Change your language:English
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.
Copyright © 2018 Aeron7 Inc. All rights reserved.