If you share your friends’ blog post on Facebook/ Google+ then sometimes you can find trouble in sharing blog post correctly. I mean to say incorrect post title, thumbnail or missing post description. To correct this problem you have to use schema.org meta tags or Facebook open graph meta tags. I have already shared about schema.org meta tags (read here). In this article we’ll learn about Facebook open graph meta tags and include/inject these meta tags correctly in your Blogger template.

Facebook Open Graph for Blogger

Most of web search shows all Facebook Open Graphs have not full potential to work perfectly. We designed after a long research and hard work. It has been tested on many blogs before publishing it here. I personally use this code. :)

What’s New in Our Code

1. This Facebook Open Graph code works on Blogger’s Index Pages, Item Pages and Static Pages
2. 2 og:type one for Home page and other for Item & Static Pages
3. fb:admin and fb:app_id to control other apps like Facebook Comments and Facebook Recommendation Bar
4. og:locale and og:locale:alternate to define blog language and alternate languages

Injecting Facebook Open Graph meta tags in Blogger template

1. Find <head> in your Blogger template and replace it with the following code –

<head prefix='og: http://ogp.me/ns# fb: http://graph.facebook.com/schema/og/ article: http://graph.facebook.com/schema/og/article'>

2. Now paste following Facebook Open Graph meta tags below new <head> tag it –

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='blog' property='og:type'/>
</b:if>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://blog-img-url' property='og:image'/>
</b:if>
<meta content='1020412247' property='fb:admins'/>
<meta content='348446671899960' property='fb:app_id'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='hi_IN' property='og:locale:alternate'/>

3. Save template and you’re done.

Note: Must change highlighted values as per your requirement. Replace this value http://blog-img-url with your square blog logo to show when there is no image in blog post. Standard image size is 200px by 200px.

If you want to get your Facebook Admin/ User ID. You can read this post- How to do it?
https://www.techprevue.com/find-facebook-admin-id-user-id-advanced-practices/

Learn More About Open Graph

If you have more interest in Facebook Open Graph Meta Tags, please go to this official page where lots of resources are available in detail to guide you.

http://ogp.me/

After injecting meta tag you can test it with Facebook Debugger.
https://developers.facebook.com/tools/debug

GitHub gist – https://gist.github.com/vinayprajapati/5900461

Conclusion

Facebook Open Graph Meta Tag integration is possible with Blogger. After injecting these meta tags in a Blogger template no errors found. Social crawlers crawl blog post with out errors. Blog post sharing on Facebook and Google+ works perfectly. Post title, description and thumbnail appears correctly.