How to optimize a website for FB Open Graph

Have you will be spotted on FaceBook Walls Like to external sites where you have a thumbnail and a some text about it.

Here is an example of a YouTube Video.

image

FaceBook uses the open graph protocol tags if the website has them. If not FaceBook looks for the first image that is 90px by 90px ish for the image and screen scrapes the the rest of the information.  This is a bit of a hit or miss effort.

As web developer we can add a few of lines of code to a page to fix this.

Here is an example from the CPD blog

[code]<br /><br />&lt;meta property="og:title" content="around the circuit" /&gt;<br />&lt;meta property="og:type" content="blog" /&gt;<br />&lt;meta property="og:image" content="http://blog.circuitprotection.com/wp-content/uploads/2011/02/Strategies_in_light.gif" /&gt;<br />&lt;meta property="og:url" content="http://blog.circuitprotection.com" /&gt;<br />&lt;meta property="og:site_name" content="around the circuit" /&gt;<br />&lt;meta property="og:description" content="News and Views on Circuit Protection Technology" /&gt;<br /><br />[/code]

What does this do and how do you test? Well you can start by looking at this tool.

http://developers.facebook.com/tools/lint/

Lets look at a before and after example for this page http://blog.circuitprotection.com/blognews/shaping-intelligent-connectivity-at-designcon-2011/

Without open graph meta data.

image

With open graph meta data.

image

It not that different but I believe that the difference matters.

We get a Type and Site Name. But more importantly we got to set the image.

What more prove that we need to this well here is te.com.

image

Iphone as the image!

The full specs are here http://ogp.me/

I am sure that we find that CMS’ will start to produce this data by default but for now we have to use a work around. I believe it is worth this extra work.

 

Leave a Reply

Your email address will not be published. Required fields are marked *