Add Open Graph Protocol Meta Tags to Blogger

Tweet

• Save to Delicious
• Stumble it
• Digg this
• Share

The Open Graph Protocol enables web pages to integrate into social graph. For example, if you include open graph tags, you will have the ability to treat your page same as Facebook Page. In addition, if you have added Plus One button to Blogger, it can also help you to get your +1ed page to be integrated in to the social graph of Google+.

To enable it you need to add <meta> tags. In this tutorial I will tell you how to add these Meta tags to Blogger so that Facebook, Google+ and other social networking sites can collect the structured information about your blog and post pages.

Before we start, let’s discuss about important Meta tags that can/should be included to Blogger.

og:title

<meta expr:content='data:blog.pageName' property='og:title'/>

Object Title, i.e., the title of the page or post.

og:type

<meta content='blog' property='og:type'/>

The type of object, i.e., it is for homepage and other pages expect blog post (item) and static pages, and:

<meta content='article' property='og:type'/>

Used for post and static pages only.

The type for the object should be used properly because it can create some problem.

og:url

<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

The URL of the page the user is reading.

og:image

<meta content='http://www.your-blog-logo.jpg' property='og:image'/>

The image that should be used to represent the object. Many have asked that “I want to show my blog’s logo when people Like my post”. There are also some other problems, e.g., the image does not appears or the post image is not displayed correctly when the post is Liked. This tag solves these types of problems for Blogger.

Update (12/7/2011): Now it's possible to add Blogger post images to og:image. Thanks to alt.pathawks.com.

<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>

I did some changes to the original code so that if your blog posts or other pages do not contain any images, it will render a default image instead. Replace “http://www.your-blog-logo.jpg” with your blog’s logo image, which should be more than 50x50 pixels with maximum aspect ratio of 3:1 and should be in PNG, JPEG and GIF formats. The image generated from data:blog.postImageThumbnailUrl will be 72x72 pixels.

If you think that the Like button works perfectly and you want to show images as it is added to the post, then you don’t need to add this tag.

og:site_name

<meta content='Your Blog’s Name' property='og:site_name'/>

The title of your blog. You have to replace “Your Blog's Name” with the title of your blog.

og:description

<meta content='Description of the page' property='og:description'/>

It is for having a small description of the page. Currently, getting dynamic description on Blogger is not possible through correct method. I have tried it with data:post.snippet method but it doesn't work between head tags and is also very short. It's now becoming crucial to have dynamic description on Blogger. It's my request to Google Blogger developers to enable it for us.

Update (12/8/2011): I suddenly noticed <meta expr:content='data:blog.metaDescription' name='description'/> tag to the head section. It was not there in previous templates and didn’t find any documentation also. May be Blogger is bringing a good news for us!

fb:admins

<meta content='Your-Facebook-Profile-ID' property='fb:admins'/>

This is optional. This is for Facebook Open Graph, you can choose whether to add this meta tag or not. You have to provide your Facebook profile ID in place of “Your-Facebook-Profile-ID”.

fb:app_id

<meta content='Your-App-ID' property='fb:app_id'/>

This is also optional as it is required if you have signed up for Facebook Apps. Replace “Your-App-ID” with the application ID given by Facebook.

How to Add Open Graph Meta Tags to Blogger

Step 1: Go to Blogger’s Dashboard > Layout > Design > Edit HTML tab.

Step 2: Find the HTML attribution marked in bold:

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

After this add the Open Graph Protocol name namespace:

xmlns:og='http://ogp.me/ns#'

It will look like:

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

If you have previously added the Facebook namespace as instructed in the tutorial for adding XFBML Facebook Like button to Blogger then the full attribution will look like:

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

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>
<meta content='Your-App-ID' property='fb:app_id'/>
<meta content='Your-Facebook-Profile-ID' property='fb:admins'/>

For advance use

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;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='blog' property='og:type'/>
</b:if>
<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>
<meta content='Your-App-ID' property='fb:app_id'/>
<meta content='Your-Facebook-profile-ID' property='fb:admins'/>

Step 4: Save your template.

To check if you have applied all the <meta> tags correctly to Blogger, visit Facebook Debugger for Developers.

More references:

• The Open Graph Protocol
• Open Graph Protocol – Facebook Developers
• Populating +Snippet for +1

For Developers

Contribute if anything is missing.