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:
(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:
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.
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.
- 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.
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 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:
<meta property="og:title" content="Ultimate Guide To Social Meta Tags: Open Graph And Twitter Cards" />
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 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:
You actually see the media – i.e. the SlideShare presentation – attached to the Tweet itself:
[SlideShare] Online content works 24/7 to attract people to your business: what to write about. https://t.co/SIlJOPH2IP
— vWriter.com (@vwriterit) January 29, 2016
(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:
— vWriter.com (@vwriterit) January 27, 2016
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:
<meta name="twitter:title" content="How To Repurpose Your Blog Post As A SlideShare Presentation (And Get More Online Visibility, Authority and Traffic!) - The vWriter Blog" />
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).
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.
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Title Of Your Content Here" />
<meta property="og:description" content="Description of your content here" />
<meta property="og:url" content="http://www.yoursite.com/yourcontent.html" />
<meta property="og:site_name" content="The Name Of Your Site" />
<meta property="og:image" content="http://www.yoursite.com/yourimage.jpg" />
Once added to a page, see the section below on checking the tags have been added correctly.
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.
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Title Of Your Content Here"/>
<meta name="twitter:description" content="Description of your content here"/>
<meta name="twitter:site" content="@yourusername"/>
<meta name="twitter:image" content="http://www.yoursite.com/yourimage.jpg"/>
<meta name="twitter:creator" content="@yourusername"/>
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 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
- 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:
- 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
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.
- Go to Facebook’s validation tool
- Enter in the URL of a link you want to check, and click Debug
- 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.
- Go to Twitter’s Card Validator
- Enter in the URL you want to check, and click Preview card
- 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.
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 get the cheatsheet for adding social meta tags—it gives you:
- 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 you need.