fb-like

Social media integration is part of almost every website we deliver these days. However, in a recent project I found a nice little trick to make sure that when someone is sharing your site, you control the details - and therefore the marketing message.

Open Graph Tags

It has often been a concern from clients when adding 'Facebook Share-this' style functionality that the image and copy displayed on the user’s profile is often good, however it is auto-generated from our big brother friend, Facebook. It was never a major problem, however I thought that in a world where the symantec web is king and micro-formats are commonly excepted, that it would be better if content could have been marked so that social media sites could be spoon fed the image and description.

Facebook, however, has submitted a new standard called Open Graph Tags which uses  HTML meta data instead which is a much better solution than adding unnecessary additional markup around elements in the page,  as the markup is lightweight, valid and best of all hidden from the user, making it possible to explicitly dictate information about the website in regards to website type, description and bespoke descriptive image.

Markup

<meta property="og:title" content="Graymatter Limited - digital. Marketing. agency-"/>
<meta property="og:site_name" content="Graymatter Limited"/>
<meta property="og:type " content="website"/>
<meta property="og:image " content="http://www.graymatter.co.uk/ico-open-grah-tag.jpg"/>
<meta property="og:url " content=" http://www.graymatter.co.uk/”/>
<meta property="og:description" content="A fantastic digital marketing agency from Milton Keynes!”/>

Validator

To add a very nice cherry on top Facebook has even added a validator tool which makes it very easy to validate that everything is present and correct.

In summary, nothing major, but simple things done well are always good and this is a good example of that. Well done Facebook.