Like search, social media has become a gargantuan chunk of the internet. Social media sites have become some of the most visited spots on the web, with many services being considered the ‘homepage’ that many users head to first before they do anything else online.
Social media websites bring people together to talk, catch up and share content, but how do the social network contextualise the links shared on their services and give them flavour?
On the Sleeky blog this week: we’re going to be looking into the most important aspect of optimising your website for social media sharing: meta tags.
This is the final part of a two part piece from Sleeky. If you missed part one, ‘The Basics’, give that a read first by following this link. Go on, we’ll be here when you get back.
When links are shared on social networks, they often pull in additional information from the link itself, adding a short preview below the link which gives the user a taster of what they will find once they click through.

When shared on social networks, links with appropriate meta tags look great and enliven the experience for your audience.
Unfortunately, in contrast to what we learned in Part One of this guide, there’s no ‘one-size-fits-all’ solution which will optimise our meta tags for all social networking services. If we want to enrich our links on Pinterest, we also have to ensure we properly tag the same content for other social networks also.
That said, if you only have time to optimise your website for one type of tags, we recommend Facebook’s Open Graph tags. Open Graph is the most widely supported protocol, with full support from Facebook, Pinterest, and Google+ as well as partial support from Twitter.
In Code
Facebook OpenGraph
Facebook’s OpenGraph is an open-platform developed by Facebook, which is why it is the most widely-supported of the major social network’s meta tagging standards.
There are four basic meta tags within OpenGraph:
<meta name=”og:title” content=””> – The title of your object as it should appear within the graph, e.g., “The Rock”.
<meta name=”og:type” content=””> – The type of your object, e.g., “video.movie”. Depending on the type you specify, other properties may also be required.
<meta name=”og:image” content=””> – An image URL which should represent your object within the graph.
<meta name=”og:url” content=””> – The canonical URL of your object that will be used as its permanent ID in the graph, e.g., “http://www.imdb.com/title/tt0117500/”.
There are however many, many more meta tags specifically for open-graph which you can read about on the official website.
Twitter Cards
Twitter’s ‘Cards’ system allows you to attach photographs, videos and additional media to your links for the benefit of Twitter users who share your links. The benefit to Twitter Cards is that they allow you as the site-owner to give further context to links to your website on Twitter outside of the 140 character limit of a Tweet.
Unlike OpenGraph, each Twitter Card has to be approved first and white-listed with the service before your card will display.
Pinterest Rich Pins
Pinterest is an interesting social network in that content is saved and collated into ‘scrapbook’-like collections. Users can save photographs, videos, website links and more to their collections.
With Rich Pins, you can include additional information to be saved alongside the content on your site when Pinterest users save your site.
You can include a download link for your app, links to your shop or many more.
This guide from Pinterest is broad enough to get you started.
Google+ Snippets
Although not the most used social network, properly configuring your website for Google+ makes sense if you want to improve your positioning on Google searches.
Use a Generator
In opposition to writing the code yourself for each social network, the Mega Tags generator from Secret Sauce is well worth your time.
Plugins
If you are using a content-management system, you may find that there are already a large handful of plugins or extensions that will do the heavy lifting here for you. For WordPress and Drupal, the ever-popular Yoast SEO plugin allows you to edit the meta tags for each page, whilst also optimising these for the variety of social networks.
Validation
Once you’ve implemented your meta tags for social networks, you can validate them with these platform-specific tools to preview what your site will look like when shared. If they don’t look quite right, make changes and refresh the validator until you get the results you want.
Twitter Validator
Facebook Validator
Pinterest Validator
Google+ Validator
If you enjoyed this blog, be sure to check Part 1 in the masterclass in which we talk specifically about meta tagging for your website.
Would you like some additional support or guidance optimising your website for social media? Pick up the phone or send us a friendly email — we don’t bite! 🙂