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='' xmlns:b='' xmlns:data='' xmlns:expr=''>
Add the Facebook xml namespace by adding the following line inside the tag (Before the > character):
So the html tag should look similar to:
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='' xmlns:b='' xmlns:data='' xmlns:expr='' xmlns:og=''>

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'>
<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'/>
<!-- 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:

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.

No comments:

Post a Comment