How to add Open Graph Protocol Tags to Blogger ?

Facebook and other social media platforms uses the Open Graph Protocol. The Open Graph protocol enables any web page to become a rich object in a social graph.In this post, we shall discuss How to add Open Graph Protocol Tags to Blogger ?

If you are a Blogger users, you need to specify explicitly Open Graph tags in your Blogger template to instruct Facebook what to show in your post share previews. If Open Graph tags aren't on the page when sharing, an undesirable image or title may appear. This blog post explains how to integrate the Open Graph tags for compliance with Facebook for sharing.

The basic four required Open Graph Tags are:

og:title - The title of your object as it should appear within the graph
og:type - The type of your object
og:image - An image URL which should represent your object within the graph.
og:url - The canonical URL of your object that will be used as its permanent ID in the graph.

Test if your blog has Open Graph tags missing:

Go to https://developers.facebook.com/tools/debug/
Copy a URL of any of your blog post (not your main website URL) and paste it in “Input URL”
Click ‘debug”
Check the “Warnings That Should Be Fixed”
Also check “When shared, this is what will be included’ section

Steps to add Open Graph Tags to a Blogger template:

Login to Blogger Dashboard
Go to Template > Edit HTML
Find <html
Add “xmlns:og='http://ogp.me/ns#” at the end of the <html tag that is before “>”
Example:

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>

Find “</head>”

Copy the code below and paste it just before “</head>”

<!-- Open Graph Meta Tags BEGIN -->
<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:if>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<!-- Open Graph Meta Tags END –>

Debug

Go to https://developers.facebook.com/tools/debug/
Paste a URL of any of your blog post and debug again
Check the “Warnings That Should Be Fixed”
Also check “When shared, this is what will be included’ section

You have successfully integrated Open Graph Tags to your Blogger blog.

Results

Let's see the results after implementing Open Graph on Blogger. The following are the results of auto post shared to Facebook Page before and after the Open Graph tags integration with Blogger.

Before:

Facebook picked random details, no description and no thumbnail picked.

After:

Facebook picked details of the blog as described and instructed by the Open Graph Tags inserted in Blogger template.

Author Description

Tech Tips Hub