Almost everything we do online has a social element, so it’s important to make sure that your website is just as social as you.
As well as implementing rich snippets to help search engines understand information on your site, both Facebook and Twitter have their own mark-up which you should use to ensure that your site looks great when shared on both platforms.
The purpose of Facebook’s Open Graph Protocol and the Twitter Cards system is to allow rich information to be shared in a social graph. Implementing this code gives webmasters control on which information they wish to be displayed about a certain webpage.
Below we’ll explore how to get started in implementing both Facebook’s Open Graph Protocol and the Twitter Cards system.
Facebook Open Graph Protocol
For Facebook to understand your webpage, you should implement the following basic Open Graph (OG) tags:
- og:title – The title of your page/article, excluding any branding. This usually won’t be the same as your title tag as this may be optimised for search engines and contain your brand at the end
- og:site_name – The name of your site, NOT the URL. (i.e. “Epiphany” not “Epiphanysearch.co.uk”)
- og:url – This URL should be the same as the canonical URL used on your site
- og:description – This should sum up what the content on the page is about in a few sentences. Technically optional but we recommend including it to help how much your page is shared and liked
- og:image – This is an image associated with the page. Facebook recommend using an image of at least 1200x630 pixels
Additional OG tags:
- og:type – Facebook allows you to choose from a number of different common object types that will change how your content is displayed. If no type is specified, the default will be ‘website’
- article:author – The tag allows you to link to an article’s author Facebook profile or page. This will likely offer the chance for the user to follow the author if they have that setting enabled
- article:publisher – Similar to the author tag above, this is intended to link to a non-personal Facebook page. Note that this tag is only available to media publishers
Facebook provide a handy testing tool which you can use to check your code has been implemented correctly.
A Simple Example from IMDb:
<meta property="og:url" content="http://www.imdb.com/title/tt2234155/" />
<meta property='og:image' content="http://ia.media-imdb.com/images/M/MV5BMjM1MzczMDgwOV5BMl5BanBnXkFtZTcwMDM4NjM2OQ@@._V1_SY755_SX509_AL_.jpg" />
<meta property='og:type' content="video.movie" />
<meta property='fb:app_id' content='115109575169727' />
<meta property='og:title' content="The Internship (2013)" />
<meta property='og:site_name' content='IMDb' />
<meta property="og:description" content="Directed by Shawn Levy. With Vince Vaughn, Owen Wilson, Rose Byrne, Aasif Mandvi. Two salesmen whose careers have been torpedoed by the digital age find their way into a coveted internship at Google, where they must compete with a group of young, tech-savvy geniuses for a shot at employment." />
Similar to Open Graph, Twitter Cards allow webmasters to attach richer media experiences to tweets than link to your content. By adding a few lines of mark-up to your HTML you will have a ‘card’ displayed along with the tweet that will be visible to the poster’s followers.
Twitter provide a Card Validator which allows you to build sample code using data about your site, all you need to is follow the four steps outlined by Twitter:
- Choose a card type - try them out or read more about them
- Then add the required meta tags to your page
- To apply for the card you want, validate your meta tags
- Once approved, tweet the URL and view your Card