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 200×200 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 200×200 pixels.

 

Leave a Reply

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