Blogger4Ever

To instruct Facebook and other sharing services what to show when a page of your website is shared, If Open Graph Tags are not present on a page when sharing, the sharing service will try to guess the title, url, image, and description for the page and might guess wrong. So you will need to Add Open Graph Meta Tag to your Blogger Blogs. In this tutorial I will tell you how to add Facebook Open Graph Meta Tags In Blogger blogspot.

In custom Blogger templates we are using Open Graph Protocol but this is not well known to everybody. Open Graph Meta Tags is a set of instructions or rules which helps to integrate any webpage into the social graph. We want to promote our blog or website around the web but we don't follow all the rules and regulation for promoting. Today is biggest medium of Blog promotion is Social Media. So we must consider the social media as a gateway for reaching towards audience. But we must make our blog or website compatible with Open Graph Meta Tags Protocol.

How Open Graph Tags Work:

Open Graph Protocol tells facebook and other sharing services which title description url and image of your blog post/page displayed when your blog or website content shared on facebook.

How To Add Open Graph Protocol Meta Tags To Your Blogger

To add Open Graph tags to your Blogger, you will need to edit your Blogger Template. I recommended you to create a backup of your template before making any changes.

Step 1. Log in to your Blogger Account and Go to your Blogger Dashboard
Step 2. Now Click On Theme >> Edit HTML
Step 3. Find ]]></b:skin> by pressing Ctrl+F
Step 4. Paste the below code before/above ]]></b:skin>

<!-- BEGIN Open Graph tags -->
<meta expr:content='data:blog.metaDescription' name='description' property='og:description'/>
<meta content='Facebook APP ID' property='fb:app_id'/>
<meta content='Facebook Admin ID' property='fb:admins'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta content='About US Page URL' property='article:author'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content=' Your Blog Favicon URL' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalHomepageUrl' property='og:url'/>
<meta content='blog' property='og:type'/>
<meta content='Your Blog Favicon URL' property='og:image'/>
</b:if>
<meta content='Your Country Name' name='geo.placename'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<!-- END Open Graph tags -->

Customization:
The above script will able to display your Blog Title, Description, URL, Image Site Name. But you have to do little changes on several Meta Tags.

• Locate Facebook APP ID and Facebook Admin ID, and replace with your Facebook Application ID and Page Admin ID.
• Replace About Us Page Url with your about us page url.
• Find Your Blog Favicon Url and replace it with your blog favicon.
• Find Your Country Name and replace it with your country name.

Now your Blog will act as Open Graph Protocol which tell Facebook and other Sharing Services that how to share your Blog or Website content.

You might also like: How To Add Hreflang (Language) Tags In Blogger
How To Add Custom Robots.Txt File In Blogger Blogspot
How To Add Meta Tags To Blogger - Blogspot