Add Open Graph Protocol Meta Tags to Blogger

The Open Graph Protocol help web pages to integrate into social graph. It combines all the unstructured data of a page into a structured information so that the page can be defined how it will be represented on social networking sites. According to Facebook, if you include Open Graph tags, you will have the ability to treat your page same as Facebook Page.

If you have added Plus One button and/or Like button then you may want your page to get integrated into the social graph of Google+, Facebook and other social sites when they are shared. WordPress has many plugins but users of Blogger needs to add Open Graph protocol Meta tags manually to Blogger and to its post pages by editing the template. In this tutorial I will explain it in simple steps.

Open Graph protocol for Blogger

Built-in Object Types and Properties

Let us first discuss about important Open Graph protocol predefined meta tags for better understanding.

  • og:title - The title of the object, that is, page or post the reader is reading
  • og:type - blog for homepage and article for post and static pages only
  • og:url - The URL of the page the user is reading
  • og:image - The image that should be used to represent the object. It is a common problem of many Blogger users that the image is not displayed correctly or the wrong image is shown when the post is Liked or shared on Facebook. First of all be sure that you have uploaded your images from Blogger Post Editor or is hosted on Picasa Web Album. This solves the problem. The below meta tag is for Blogger OGP, thanks to alt.pathawks.com (I did some changes to the original code though).
    <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
    <b:else/>
    <meta content='http://www.your-blog-logo.jpg' property='og:image'/>
    </b:if>
    Replace “http://www.your-blog-logo.jpg” with a image so that if your blog posts or other pages do not contain any images, it will render a default image instead. It should be more than 50x50 pixels with maximum aspect ratio of 3:1 and should be in PNG, JPEG or GIF format. The image generated from data:blog.postImageThumbnailUrl will be 72x72 pixels.
  • og:site_name - The title of your blog
  • og:description - Object for having a small description of the page. You need to enable some settings to add description Meta tags to Blogger

Optional Open Graph tags for Facebook

These are completely optional meta tags to administrate you page on Facebook, here you can choose whether to add these tags or not. If “Yes” then to associate it you need either your Facebook account or your Facebook application ID (or both).

  • fb:admins - Your Facebook profile ID or Username
  • fb:app_id - The application ID provided by Facebook App

Open Graph protocol for Blogger

Step 1: Go to Blogger’s Dashboard and then to you blog's Template tab. Now click “Edit HTML” button.

Step 2: Find the highlighted HTML attribution as shown below:

<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>

After this add the Open Graph protocol namespace xmlns:og='http://ogp.me/ns#'. It will look like:

<html xmlns:og='http://ogp.me/ns#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>

Step 3: Find <head> and below it add the following Meta tags:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://www.your-blog-logo.jpg' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='App-ID' property='fb:app_id'/>
<meta content='Facebook-Profile-ID' property='fb:admins'/>

Step 5: Save your template to integrate Open Graph protocol to Blogger.

OGP for Advance users Only

This is for developers only who knows what is needed to be done. If you are a newbie then the above step is just what you need.

It creates some controversy to when to use blog to property og:type because as told in Facebook, it should be used on the root of a domain and article should be used when it represents a news article, blog post, photo, video, etc. So the Meta tags that can be added (with caution):

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='blog' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://www.your-blog-logo.jpg' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='App-ID' property='fb:app_id'/>
<meta content='Facebook-profile-ID' property='fb:admins'/>

Step 4: Save your template.

More references:

P.S. This post has been updated on December 2012 and contribute if anything is missing.

Popular posts from this blog

How to Add Extra Gadget/Widget Section to Blogger Header

Add Google Web Fonts to Blogger