We're often asked by web designers and developers how they can represent their website and content online using the Social 'Open Graph' implementation used by Google and Facebook. But what is Open Graph and how does it help you?

Implementing the Open Graph Protocol to Your Website

Google+ recently updated its platform to showcase links shared with a full-sized image preview and descriptions pulled in from the website being shared. 

The changes mean you no longer have to share images and include the link in the text to get more notice on Google+. Instead, Google will favour users who implement the OpenGraph protocol on their websites.

A while ago we looked at implementing microdata and rich snippets onto your website so today we're going to build on that.

What is Open Graph?

The Open Graph protocol enables your website to become a 'rich object' in a social graph. The protocol is supported and developed on by Google and Facebook. It's a really simple way to give your website more interactivity when they're shared on social networks, whilst letting the likes of Google, understand more about the page and the content.

Open Graph Meta Tags

We've been using Open Graph on our website for over a year now. Although we can't quantify any SEO boosts, we just enjoy the simple benefits of sharing our URLs. Featured images, customised descriptions and titles. It just makes sharing easier and allows us to target content that we believe will be more engaging.

Let's take a look at what tags you need:

<!-- The type of object we're describing. We use 'website' for content pages -->
<meta property="og:type" content="website" />
<!-- We use 'article' for blogs -->
<meta property="og:type" content="article" />
<!-- The title as it should appear in the Graph -->
<meta property="og:title" content="Chester, Cheshire Web Design and Development - ALJT Media" />
<!-- One or two sentences describing the object -->
<meta property="og:description" content="Website design and development agency. Offering corporate branding, identity, online search engine optimisation and marketing services across Cheshire, Chester." />
<!-- The canonical URL of the object. A permanent ID in the graph (a key!) -->
<meta property="og:url" content="http://www.madebymagnitude.com/" />
<meta property="og:url" content="http://www.madebymagnitude.com/blog/" />
<!-- This object belongs to a 'collection'. Let's say what the site is -->
<meta property="og:site_name" content="ALJT Media" />
<!-- On blog articles, give them an image and last update time -->
<meta property="og:image" content="http://static.madebymagnitude.com/blog/20381706895322053fd8bcf8.49462153_abdbe27c.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="710" />
<meta property="og:image:height" content="357" />
<meta property="og:updated_time" content="1394738493" />

That's it - you're all set. If you want to take it a level further, you can look at adding Twitter Cards to your meta tags. Twitter uses the Open Graph title and description meta tags to get the content information when they're shared on Twitter. Find out how to use Twitter Cards.

Extending Open Graph

If you're looking to implement the Open Graph across all your website, you may be interested in referencing to more content on the site. You can create a meta array of images (if you want to show case multiple images for that object in the Graph).

<!-- The primary image -->
<meta property="og:image" content="http://static.madebymagnitude.com/blog/20381706895322053fd8bcf8.49462153_abdbe27c.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="726" />
<meta property="og:image:height" content="357" />
<!-- We want to feature a second image, just add another tag and it'll become an array -->
<meta property="og:image" content="http://static.madebymagnitude.com/blog/1708253981530f4714e5efd8.01492610_454b8a22.jpg" />
<meta property="og:image:width" content="726" />
<meta property="og:image:height" content="400" />

You'll notice we have freedom over what tags tie into which index in the array - pretty sweet! This would produce an object with an image array. It'd contain two images, the first specifying the type, URL and dimensions whilst the second only specifies the URL and dimensions - though you don't even need to state the dimensions, it just speeds up the process for Google / Facebook.

You may also notice we can have a hierarchy of properties and each property is separated with a colon. You can visualise it similar to a JSON object in Javascript, but replacing the dot with a colon.

Interactive Graph Media

Open Graph supports a massive range of media which sit nicely along HTML5. You can add tags for music whether that's a song, album, playlist or radio station. They also have support for videos and there is different properties for a movie, episode, TV show or other. The properties required are all determined from the og:type tag you specify.

Finally, you can use the Facebook Object Debugger to test your tags and make sure you're not missing any required fields.

Ignite your brand, utilise user-generated content no matter where you or your audience are ›