Published: Sunday, December 15, 2019, Updated: Thursday, December 29, 2022

How to Add Facebook Open Graph (OG) for Blogger

Did you notice in your Facebook Profile, Page or Group while sharing any URL of any Website or Blog that shows a preview of Image Thumbnail, Heading Title, Post/Article Excerpt/Summary with Link?
How to Add Facebook Open Graph (OG) for Blogger
Facebook Open Graph Screenshot

Yes!!! You see! But isn't working in your Blogger Blog/Website?

Okay, Don't worry. This feature is called Open Graph (OG). And in this article, I will share very effective AUTOMATIC Blogger Open Graph Plugin that will work for -
  • Home Page
  • Blog Article Post
  • Blog Page
  • Label Page
  • Almost all type pages/Posts in Blogger.

3 Steps to Add Facebook Open Graph Plugin for Blogger

  1. Go to your Blogger Account and select your Blog. Open the source code by following Blogger Dashboard →Theme →Edit HTML
  2. Now click on code and Press CTRL + F from your keyboard to enable Search Option. Now paste </head> to find this tag. 
  3. Copy the following code and paste before </head> tag.
    <b:if cond='data:blog.pageType == "item"'>
    <!--Item Page True-->
    <meta content='article' property='og:type'/>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <!--Item OG IMAGE-->
    <b:if cond='data:blog.postImageUrl'>
        <meta expr:content='data:blog.postImageUrl' property='og:image'/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
        <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
        <meta content='Blog Logo URL' property='og:image'/>
    <!--/Item OG IMAGE-->
    <b:else/> <!--IF NOT ITEM PAGE-->
        <meta expr:content='data:blog.pageTitle' property='og:title'/>
        <meta content='website' property='og:type'/>
        <meta content='Blog Logo URL' property='og:image'/>
    <b:if cond='data:blog.metaDescription'>
      <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <!--/OG DESCRIPTION-->
    <meta expr:content='"en_US"' property='og:locale'/>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    <!--OPEN GRAPH STOP-->
  4. Remember: Replace Blog Logo URL with the URL of your Website's logo. 
  5. Save your theme. 
After installing this plugin successfully, check the update of any URL of your website in Facebook Sharing Debugger. 
Elliyas Ahmed
Elliyas Ahmed
Elliyas Ahmed, founder of COMPROMATH, is a Computer Science and Engineering graduate who excels in Blogging, Website Development, and SEO. He offers freelancing services to help clients succeed online. Learn more about Elliyas Ahmed.