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 Resize Blogger Header to Logo Size

Image
One of the drawbacks of Blogger is its header. When you are using text as your blog title, you will find that there is no problem but when you add an image or logo to the header portion instead of title and description or having description placed after the image from Layout tab, you will find that it’s not the logo but the whole header becomes clickable. So in this tutorial we will find out how to resize the Blogger header in new templates.
Read more

Create your own Contact Form with Kontactr for Blogger

Image
Kontactr is one of the simplest, fast, light weight and effective contact forms that I ever came across. It is not only easy to create but is also like a breeze to add it to Blogger. I have already told the main features but it does not end here. It has got CAPTCHA protection to stop all those spam massages and the best of all is it’s free. You need to follow some easy steps and you are ready to receive all those important emails. Step 1: Visit Kontactr and signup. Step 2: After confirmation, login and copy the codes given in “AJAX Widget”. Step 3: Login to Blogger and create a page form Pages tab (also known as “ static page ”) from your blog's dashboard . Give the page a title, like, “Contact me” or anything that you like. Step 4: Paste the copied code (as told in step 2) and Publish the page. That is it. However, you can also customize it so that it matches the background color of your blog. There are some other options too, for example, instead of a form, you can hav
Read more

Add Google Website Translator to Blogger

Image
Why use any other translate widgets with or without images of country flags when Google translator widget can translate texts of any webpage and is capable of translating to 64 different languages (and increasing) automatically and instantly to readers speaking language. Google translator for websites can be added to any website or CMS, like WordPress, Blogger, Tumblr, etc. with ease. While the steps of adding this widget is all same but here I will mainly write about how it can be added to Blogger blogs. Blogger has this widget, you just need to go to your blog’s Layout tab and click “Add a Gadget” link. A popup page will open, scroll down below and you will find the Google Translate gadget. But there aren’t much options to select from to customize it, that’s why let’s add it in a different way.
Read more