How to Add Open Graph Meta Tags to Your Blogger

0
To instruct Facebook and other social 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 on these services, the sharing service will try to guess the title, url, image, and description of 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 blogs..

In custom Blogger themes/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/website 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 our webpage. Today is biggest medium of Blog promotion is Social Media Services. So we must consider that the social media as a gateway for reaching towards audience. But we must make our blog or site compatible with Open Graph Meta Tags Protocol.

How Open Graph Tags Work:

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

open graph protocol, open graph tags, open graph meta tags, blogger, social media, sharing, how to add, facebook, sharing services


How To Add Open Graph Protocol Meta Tags To Your Blogger Blogspot

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

Step 1. Log in to your Blogger Account and Go to 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>
Open Graph Tags
<!-- 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 be able to display your Blog Title, Description, URL, Image Site Name. But you have to do little changes on these several Meta Tags.
  • Locate Facebook APP ID and Facebook Admin ID, and replace it 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 Country Name and replace it with your country name.

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

Conclusion:
After following post you should know what Open Graph Meta Tags are? What is its importance and how it should be implemented in the Blogger blog? Most of the Blogger Themes/Templates are not optimized for open graph meta tags. So you should do it by yourself if you are facing any problem in implementing it feel free to comment or contact us.

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

Post a Comment

0 Comments
Post a Comment (0)
To Top