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 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 *