How to Use Facebook Open Graph Meta Tags for Blogger/Blogspot?

14

If you share your blog post on Facebook 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 Facebook Open Graph meta tags or Schema.org meta tags. I have already shared information about Schema.org meta tags. In this article, we’ll learn about how to use Facebook Open Graph meta tags for Blogger/Blogspot blogs.

Facebook Open Graph for Blogger/Blogspot

Most of the web searches show all Facebook Open Graph have not full potential to work perfectly. We are bringing this to you after long research and hard work. It has been tested on many blogs before publishing it here. I personally use this code on Blogspot blogs.

What’s New in Our Open Graph Meta Tags?

1. This Facebook Open Graph code works on Blogger’s Index Pages, Item Pages, and Static Pages.
2. Two “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.
4. “og:locale” and “og:locale:alternate” to define blog language and alternate languages.

Steps to use Facebook Open Graph meta tags for Blogger/Blogspot

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 a blog post. Standard image size is 1000px by 667px.

If you want to get your Facebook Admin/User ID.

You can read this post- How to find Facebook user ID?

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.

After using OG meta tags, you can test it with Facebook Sharing Debugger.

GitHub gisthttps://gist.github.com/vinayprajapati/5900461

If you are not able to see the correct link preview of a blog post or web page. You should learn more about how to use Facebook Debugger to Update link preview.

Conclusion

Facebook Open Graph meta tags integration is possible with Blogger/Blogspot. After injecting these meta tags in a Blogger theme no errors found. Social crawlers crawl blog post without errors. Blog post sharing on Facebook, Twitter, and Linkedin work perfectly. Post title, description, and thumbnail appear correctly.

Don’t forget to share this post with friends.

14 COMMENTS

  1. Even if I do that, I still see something like that when I clicked AddThis Facebook share button :

    • AddThis button is not related with this code any how. AddThis button take title and description with the help of it’s JavaScript. You should look for template there might be error. Probably a conflict between Open graph and schema.

  2. Great tips. Thanks for sharing your thoughts about meta tags. Very helpful and informative.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.