By adding some simple social meta tags to your website or blog, you can improve how your content is displayed on social networks like Facebook, Twitter, LinkedIn and Google+. This improves your visibility and increases your traffic by making your updates more appealing for both clicks and shares.

After all, when you use the right image, descriptive text, and so on for a sponsored update on social, you can improve engagement (including click-throughs) by often 100s of percent.

The same principle applies for organic updates – normal, every day, run-of-the-mill updates on social – and social meta tags are how you control exactly what’s shown, including:

  • The title
  • The description
  • The image

As a quick example of the difference this can make, here’s what would show on Twitter for someone sharing the blog’s url (http://blog.vwriter.com) before I made use of the right tags:

Without the right social meta tags, this is how the blog would look on Twitter

Without the right social meta tags, this is how the blog would look on Twitter

(Note I’m using Twitter’s Card Validator tool for these examples – more info on using that below).

As you can see, not too appealing for anyone wanting to share or click through, right?

And here’s what it looks like after I’d added some special meta tags:

Once the right tags had been added, there is a vast improvement

Once the right tags have been added, there is a vast improvement

As you can see there’s a big, big difference. It’s going to attract more shares, more click-throughs, more engagement in general.

Worth doing? Absolutely. And the good news is it’s a foundational step for your website and/or blog (we cover both in this Ultimate Guide). Take care of it once, and then you don’t really have to think about it again.

As I show you below, it’s also relatively quick and simple to do.

Download this cheatsheet you need to add social meta tags to your site.

Do These Tags Impact SEO?

Yes and no.

There’s no direct benefit for your rankings on search.

But there is an indirect advantage to be enjoyed.

If your content is more shareable and clickable as a result of using these tags, you’re more likely to attract links from other websites to your content.

For example:

  • More people will see and be aware of your content.
  • You’ll have more people on your list to communicate with and make aware of your content (i.e. through converting a proportion of your traffic to email leads).
  • Increased sharing levels will build the authority and credibility of your content, and encourage linking.

These natural links to your content build your authority and help your rankings.

Types Of Social Meta Tags

There are two main types of tags you need to maximize your results from social:

  • Open Graph tags
  • Twitter Card tags

I cover both of these below in terms of how to actually install and use them, but here’s a quick overview of what these tags actually are and how they work.

Both types are meta tags, that show up in the <head> section of the HTML source code on the different web pages on your site. Meta tags exist to tell programmatic robots or ‘bots’ more information about the page, that otherwise they would have to attempt to glean in some other way.

You might be more familiar with how meta description and keyword tags on your site help search engines understand what a particular page is about (though with far less importance than in times gone by).

The meta description tag also helps define (though doesn’t completely control) what actually shows on search for your page. Using the right text can help attract clicks, and higher click-through rates can improve your rankings.

Example showing how the meta description tag helps define what shows for a web page in the search engines

Example showing how the meta description tag helps define what shows for a web page in the search engines

The social meta tags work in a similar way for social sites. When a social update contains a link to a page on your site, social bots look at your site to determine what information to display.

If they find social meta tags, they will use the information they contain as shown below. Otherwise, they make a best guess about what to display, which is usually sub-optimal.

The social meta tags on your page define exactly how the social update will appear. This example shows Open Graph tags, covered below.

The social meta tags on your page define exactly how the social update will appear. This example shows Open Graph tags, as used by Facebook and other social sites, further covered below.

Open Graph

The Open Graph protocol was created by Facebook, and defines tags you can use on a web page that can then be read by social platforms. The tags determine what is shown to users in a relevant social update.

Open Graph tags are recognized by Facebook, as well as most other social networks like LinkedIn and Google+. Twitter also uses Open Graph tags, unless there are equivalent Twitter Card tags (see below).

A typical Open Graph tag looks like this:

This is the og:title tag, determining what shows as the title in a social update.

The full list of Open Graph tags you can use are as follows (if you think this is starting to look complicated, it’s easier than you might think to actually add these tags, as I’ll show you below – just stick with it for now!):

  • og:locale Optional, defaulting to en_US which is suitable for most English websites, whether inside or outside the USA.
  • og:type This is optional – if it’s not specified, will default to website. The other option is article, which you should use for blog posts for example (see section below on adding such tags to a blog).
  • og:title The title of the page or the article.
  • og:description Description of the page or the article, should be different to og:title
  • og:image The full url for the image you want to show. So http://yoursite.com/image.jpg, not /image.jpg.
  • og:url  The full url for the web page you have added the tag to, without any parameters after the link. So http://yoursite.com/page.html, not /page.html or, for example with parameters showing, http://yoursite.com/page.html?category=2
  • og:site_name The name of your website. This doesn’t mean your domain name, although the two could be the same. As an example, Facebook rather than facebook.com.

See below for full instructions on adding these to your site, along with an example to follow.

Twitter Cards

Twitter Cards mean that when someone Tweets a link to your content, other content is automatically attached to the Tweet (such as photos, videos and other media). This makes the Tweet much more engaging than it might be otherwise.

As the content owner, you have full control over what the Twitter Card actually shows.

As an example of how this works in practice, SlideShare implements Twitter Cards on their site. So when you create a SlideShare and Tweet about it, rather than a basic Tweet like this:

This is what you would see for a Tweet linking to SlideShare if they didn't use Twitter Cards

This is what you would see for a Tweet linking to SlideShare if they didn’t use Twitter Cards

You actually see the media – i.e. the SlideShare presentation – attached to the Tweet itself:

(If on the odd occasion the SlideShare’s not showing up, try reloading this page).

It’s no different on your own site. For example, here’s a Tweet to a previous blog post that has a Twitter Card attached showing the featured image for the post and a summary:

Implementing Twitter Cards on your own site, which I go into in more detail below, involves using tags very similar to the Open Graph tags above. Here’s one such example:

This is of course the twitter:title tag, similar to the Open Graph og:title tag above.

Here’s the full list of Twitter Card tags you need to use:

  • twitter:card Determines the type of card to use. Here are the options to choose from (the actual value to set in the meta tag is shown in italics, though more information is below):
    • Summary Card (content) – shows a small image with summary text
    • Summary Card with a large image (summary_large_image) – as in the example Tweet above, shows a larger, more prominent image along with summary text
    • App Card (app) – only relevant if you’re a developer of mobile applications
    • Player Card (player) – permits video clips, audio streams and other media, as in the SlideShare example above
  • twitter:title Title of the page or article, as in og:title above.
  • twitter:description Description of the page or article, equivalent to og:description above.
  • twitter:site Your Twitter username, for example for this site it’s @vwriterit
  • twitter:image Full link to the image you want to use for the page, equivalent to og:image. Shouldn’t be a generic or site-wide image, but relevant to the page in question.
  • twitter:creator You can optionally set this as the Twitter username of the creator of the content. Only relevant where twitter:card is set to summary_large_image.

So how do you actually add all these tags to your site, to implement both Open Graph and Twitter Cards?

That’s just what I’m covering next:

  • First I’ll show you how to add the social meta tags to a non-Wordpress site.
  • Then I’ll cover adding them to your WordPress blog through the use of special plugins.
  • In the final section, I’ll show you how to use special online validation tools to check the tags are all set up correctly.

Adding Social Meta Tags To A Non-Blog, Standard Website

Adding the tags to a non-Wordpress site means a simple manual adjustment of the code on your pages. For that reason, it is more technical and time consuming than for sites running on WordPress.

Before proceeding, check what tags you might already have by looking at your site’s source code and searching for e.g. og:type and twitter:card. If you already have some or all of them, check the information is appearing for social updates as you would like it to (see the final section below on validating the tags).

Open Graph

The following Open Graph tags need to be added to the <head> section of each page on your website. This is a template you can copy from and then adjust with your own information.

See above for more information on the information each tag should contain.

Once added to a page, see the section below on checking the tags have been added correctly.

Twitter Cards

In a similar way, here is a template you can use for Twitter Card tags. Again, what to set as the value of each tag (i.e. the content bit) is covered above.

Note again the latter tag is only relevant if twitter:card is set to summary_large_image as it is above.

See the final section below to check you now have Twitter Cards properly implemented.

Adding Social Meta Tags To A Blog

Thanks to certain WordPress plugins, adding social meta tags to a blog is a lot more straightforward, and largely taken care of for you.

However, it still requires care. Different plugins can create the tags, and even your WordPress theme might do so, so the first step should be to check the source code of your blog to see exactly what is showing up. You don’t want the Open Graph tags for example to be added multiple times.

While many such plugins are available, I consider the best plugin for adding the social meta tags to be Yoast.

Once you’ve installed the plugin – or perhaps you already have it – here’s how you set it up to create the tags:

  • Go to SEO > Social
Click through to the Social settings for the plugin

Click through to the Social settings for the plugin

  • Click on the Facebook tab
  • Click to Add Open Graph meta data – this automatically creates the Open Graph tags you need for all your posts and pages
Tick the option to add Open Graph meta data

Tick the option to add Open Graph meta data

  • Optionally set the title, description and image for the front page of your blog via Frontpage settings:
    • Image URL: Set this to avoid an image being used from a recent blog post when a link to your blog is shared. For example, this is the image I use:

      The image I set in the Open Graph tags on this blog’s front page

    • Title and Description: Only set these if you want different information to what you already have set as the blog title and meta description (Titles & Metas within Yoast)
  •  Under Default settings, set the Image URL as the same as the Image URL above – this means a suitable image will be used even if a particular post or page doesn’t contain any images
  • Click Save Changes
  • Setting your blog up to use Twitter Card tags is even simpler:
    • Click the Twitter tab
    • Tick the Add Twitter card meta data checkbox, and select the type of card you want to use
    • Click Save Changes

      Add Twitter Cards to your blog easily via the Yoast plugin

      Add Twitter Cards to your blog easily via the Yoast plugin

Download this cheatsheet you need to add social meta tags to your site.

How To Validate The Tags Have Been Added Correctly

Double check your social meta tags are showing up exactly as you want them to. To do that, there are validation tools available for both Open Graph and Twitter Cards as follows.

Remember to check more than just a single page. For example, check your blog’s home page along with an individual post.

Open Graph

Facebook's Open Graph validation tool allows you to see how a page will appear when shared based on the tags you've provided

Facebook’s Open Graph validation tool allows you to see how a page will appear when shared based on the tags you’ve provided

  • Check for any errors that show up and correct them. For example, when checking the tags on this blog, I found I had more than one og:url set on my posts, caused by both Yoast and my theme creating the Open Graph tags.
Take note of any errors so you can then go and correct them

Take note of any errors so you can then go and correct them

Twitter Cards

Use Twitter's card validation tool to check you have implemented Twitter Cards correctly

Use Twitter’s card validation tool to check you have implemented Twitter Cards correctly

  • Note it talks about whitelisting, but this automatic. If you see any errors relating to whitelisting, carefully check your tags to make sure they are correct, and that the page in question is fully viewable by Twitter.

Conclusion

In Conclusion

You now have everything you need to know for taking full advantage of social meta tags for your site, optimizing shares, click-throughs and more.

Make it super-simple and download a FREE copy of our Social Meta Tags Cheat Sheet containing:

  • All the tags you need ready to copy and paste.
  • Simple definitions of each tag so you know exactly how to adjust for your own site.
  • Links to the validation tools.

Download now.