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.


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="" /&gt;<br />&lt;meta property="og:url" content="" /&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.

Lets look at a before and after example for this page

Without open graph meta data.


With open graph meta data.


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


Iphone as the image!

The full specs are here

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 *