Optimize your website to maximize Facebook and Twitter user engagement

Social tags are the HTML tags that social networks use to know what to display when one of their users shares your webpage. Because these tags determine how your page is presented in users’ social network feeds, optimizing those tags is an essential part of modern SEO. In this post we’ll look at Facebook and Twitter tags and how to use the free tool I developed to check if your tags are correct.

Making your website work well with social networks is hardly optional nowadays: if it doesn’t function properly, you may get ignored.  A recent study last fall by the analytics firm Shareholic said that Facebook traffic alone accounts for over 10 percent of traffic for publishers it analyzed.

Social media SEO is not easy because Twitter, Google+, and Facebook all look for different types of article metadata — often called social media tags — embedded in webpages. Different networks have also different guidelines for text length, image size and so forth. For example, it seems that Facebook allow you to use a description with a maximum length of 97 characters,  while Twitter’s recommended maximum length for a description is 200 characters. Optimization can be tricky.

Introducing my Social Page Analyzer

To help you check your site and optimize your tags, I wrote a Social Tags Analyzer  web service . Once you supply your page’s address, it analyzes its content and then display how optimized your site is for Facebook, Twitter and HTML meta tags markup. If you’d like me to add more social networks (I’m doing Google+ next), please let me know which one in the comments.  And, of course, if you have ideas for other useful checks or how to improve the look and feel of the reports, let me know as well. :)

As you can see in the above screenshot, my tool provides you with a report page that provides an overview section and one section per group of tags. For each group of tags, the tool shows you what are your current values and if there is any warning or alerts. Alerts are things you need to fix to work properly with a given network, while warnings are things you should probably fix, according to the social network’s guidelines.

Understanding Facebook’s open-graph

Facebook meta tags are defined by the open-graph standard, which allows publishers to describe their pages with meta data. They all start with “og” and are meta properties. You can find Facebook’s guidelines regarding web page tags here  and a tutorial here.

I annotated the following screenshot to illustrate how the most important Facebook tags control what users are sharing.

As visible in the screenshot the most important tags are: og:title, og:description, og:image, og:site_name because they directly control the appearance of what user share. Additionally, you should add og:type, which helps Facebook to know what type of entity it is. Finally, you can consider adding fb:admins to specify which users have access to Facebook insights for this site.

Understanding Twitter cards

Twitter have their own standard called “twitter cards,” which is described here. It is called cards as it allows to have a rich content tweet when the user share your page rather than a plain one as illustrated below.

Twitter will use Facebook’s open-graph standard when Twitter-specific tags are not found. But it’s not a good idea to rely on it. One reason is that the guidelines for the image size are drastically different: Facebook wants big image with a ratio close to 1.5, Twitter wants image that are not too big (less than 500 pixels) and have a recommended ratio which is either 1 or 1.8. Having experienced it first-hand, trust me when I say that if your image is too big, it won’t show up.

Another reason to use Twitter-specific tags is that it’s the only way to get your Twitter account linked to the card as visible on the screenshot above. As illustrated on the annotated screenshot, the most important Twitter tags are twitter:site, twitter:image:src, twitter:title, twitter:creator, and twitter:description. There are many other type of cards that you can use (for photo gallery, simple image), so if your site has various content type check which cards work best for you.

How other are doing?

If you still aren’t convinced that optimizing social tags is tricky, let’s quickly look at what the tool reports for some big news outlets:
As of January 12th 2014 CNET had no errors and two warning. The Verge had no errors and four warnings. Recode.net had three errors and two warnings. The Huffington Post had four errors and four warnings. Of these sites, the New York Times’ new redesign had the most problems: five errors and two warnings.

Hopefully this post and my tool will help you improve user engagement. Please share your success stories and ideas for improvement below in the comments. To get updated on web security and performance, you should follow me on Google+ and Twitter.

About: Elie Bursztein
I lead Google's anti-abuse research and invent new ways to protect our users against cyber-criminal activities and Internet threats. I recently redesigned Google's CAPTCHA to make it easier, and made Chrome safer and faster by implementing better cryptography. I was born in Paris, France, wear berets, and now live with my wife in Mountain View, California.
Comments are loading
About me
Lead Google's anti-abuse research. Develop new ways to protect users and disrupt bad guys. Make Chrome safer and faster. Help keeping G+ and Gmail clean. Wear berets. Do magic tricks.