Thursday, May 1, 2014

Adding Facebook Open Graph (OG) Meta Tags On Blogger

Facebook Logo


Addding Open Graph Meta Tags on Facebook is straightforward.

Go to blogger Dashboard => Template => Edit HTML

On top of the code, find the <html> tag, it should look similar to this:
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
 
Add the Facebook xml namespace by adding the following line inside the tag (Before the > character):
xmlns:og='http://ogp.me/ns#'
So the html tag should look similar to:
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>

Before the </head> tag, paste the following:
<!-- Open Graph Meta Tags BEGIN -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageUrl'>
</b:if>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<!-- Open Graph Meta Tags END -->


That's it! Before testing your page on Facebook, Make sure to debug your page to re-cache your blog's info:
https://developers.facebook.com/tools/debug


Also please note, that many blogs provides the wrong information, by using "data:blog.postImageThumbnailUrl" instead of "data:blog.postImageUrl", which will result in the following error on Facebook debugger:

Provided og:image is not big enough. Please use an image that's at least 200x200 px.

In order to prevent this, you can use the code above, and make sure you have a picture on your blog post with at least 200x200 pixels.