Sunday, December 15, 2019

How to Add Facebook Open Graph (OG) for Blogger

Last Update:

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. 

Join to BLOGGER™ Community - COMPROMATH. Ask Questions & Get Help

About me

Elliyas Ahmed
Elliyas Ahmed

Hi, I am Elliyas Ahmed, the founder of COMPROMATH. I try to share what I learn.

Work With Me - My Premium Services

Lets Start The Discussion on This Article

Put Your Valuable Comments

Welcome to comment section. Each comment is modereted. So don't try to spam.