How to Add Open Graph Protocol in Blogger Blogs

Open graph protocol is essential to blogger for properly showing the blog’s tittle, image and description in social medias like Facebook, Google+ or others.

You want visitors to share you blog post in the social media’s. But if those social medias are note able to extract information (i.e., tittle, image, description, ) from you blog post then not only it will disturb the visitor who is trying to share it but also will hamper your website’s traffic.

Suppose I am sharing this post’s link on my Facebook-page; my friends on Facebook will not like and click the link if that share-post do not have rich information that’s necessary to understand what they will get from that link.

When any link on the blog is shared on the social media’s; I want it to be richly represented in them with information that will encourage clicking on them and visit the blog post. That’s where Open Graph protocol comes in as it enables any web page to become a rich object in a social graph.

Open Graph protocol 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 like Facebook, Google Plus and many other social medias. WordPress users can use plugins for it but blogger users must add the manually by editing their template.

open graph enables rich objects for sharing links on social media sites

Before you add Open Graph protocol to your blog, you should;

Make sure your post’s have meta description. If you are not using meta description in your blog then you should.
For showing image; make sure your first image in you blog post is large enough for the social medias. For Facebook it should be at least 200px X 200px and for Google Plus it should be the height must be at least 120px, and if the width is less than 100px. If not and other images in the blog post are large enough that will work; but its best to make the first image of the post large enough.

Now follow this instructions to implement Open Graph data to your blogger blog.

Step-1: adding Open Graph Protocol Namespace

Go to you blogger dashboard and click on the “Template” tab then click “Edit HTML“. Before you move on to next step, you should back up your template.

Now find <html and replace it with <html xmlns:og='http://ogp.me/ns#' and click “Save Template” to save your template.

Step-2: Adding the Open Graph Meta Tags to Blogger Template

Now find <head> and paste the code from below;

<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='Link of an image' property='og:image'/>
<meta content='blog' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>

Now; replace link of an image with a url of an image; best option is the logo of your blog. Just make sure it is larger than 100px. Save your template. Yes that all it takes to implement Open Graph to blogger. After this when you will try to share you post you will see that if contains all the tittle, image and meta description of your post.

Step-3: Check if Open Graphs are Working.

Now go to the Facebook Debugger Tool page to check if the Open Graphs are working. Also try to share 2-3 post to see for yourself.

These is all you need to do for adding Open Graph Protocol to you Blogger blog. But here are some more tips for you related to Open Graph and social sharing;

When you are sharing the URL on Google Plus, make sure you use a large image or the description will not be shown.
You can use these two additional and optional Open Graph tags for solely for Facebook.
```
<meta content='App-ID' property='fb:app_id'/>
<meta content='Facebook-profile-ID' property='fb:admins'/>
```
Here; fb:admins is your Facebook profile ID or Username and fb:app_id – The application ID provided by Facebook App. Only use if you require them.

Many blogger try to use this if there is no meta description;

<meta expr:content='data:post.snippet' property='og:description'/>

This will not work as you will see an error message on top of your blog-page like this;

TEMPLATE ERROR: Invalid data reference post.body: No dictionary named: 'post' in: ['blog', 'skin', 'view']

So avoid this.

Even if you are not using meta description (which you should) in you post you can still show description of your blog with this method.First backup your template then for this go to “Edit Template” and search for <b:includable id='post' var='post'> and find <data:post.body/> inside that code and replace it with <p><data:post.body/></p>. You will find more than once on the template and may find more that once in <b:includable id='post' var='post'> too.Whatever is the case replace them all. Now a fair warning this still might not work. Because of, the <div>, <blockquote> or <br> (created by line breaks) tags in you post. Blogger automatically adds a <div> tag whenever you add an image or click text alignment icons in the post editor.So before adding image or doing alignment in the post leave enough text or a praragraph of at least 120 characters. Even after that it might not work. So I suggest use blogger meta description system.
You can change data:blog.canonicalUrl to data:blog.url; if you do not want to add ?m=1, ?m=1 or others in the shared url. However you won’t be able to avoid them if you have turned on the mobile version for your blog in ‘Template‘ section of your blogger dashboard.