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

If you share your blog post on Facebook, you can sometimes find trouble in sharing blog posts correctly. I mean to say incorrect post title, thumbnail, or missing post description. You have to use Facebook Open Graph meta tags or Schema.org meta tags to correct this problem. I have already shared information about Schema.org meta tags. In this article, we’ll learn how to use Facebook Open Graph meta tags for Blogger/Blogspot blogs.

Facebook Open Graph Protocol

Most web searches show that Facebook Open Graph does not have the 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. We are using this Open Graph 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 the 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 Facebook 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’s gisthttps://gist.github.com/vinayprajapati/5900461

If you cannot see the correct link preview of a blog post or web page. You should learn more about using 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, we don’t find errors.

  • Social crawlers crawl blog posts without errors
  • Blog post sharing on Facebook, Twitter, and LinkedIn work perfectly
  • Post title, description, and thumbnail appear correctly

Please, don’t forget to share this post with friends.

15 thoughts on “How to Use Facebook Open Graph Meta Tags for Blogger/Blogspot?”

    1. Avatar photo
      Vinay Prajapati

      It’s necessary only when you use Facebook social plugins like Like Box, Recommendation Bar, Comments etc. But I recommend you to use it.

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

    1. Avatar photo
      Vinay Prajapati

      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. Avatar photo
    Ella Anderson

    Those who use Facebook are well known for the importance of tagging on Facebook. Tagging is sharing some necessary information with those linked to your Facebook account.

Leave a Comment

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

Scroll to Top