How to Add Facebook Open Graph Meta Data in Blogger

Advertisements
Usually, Facebook is quite clever in gathering the right data for your posts as soon as they are shared on Facebook. However, we have seen a lot of users complaining about the fact that Facebook is not putting the right thumbnail image whenever someone shares it on Facebook or presses the like button. Few peoples also have some concerns that sometime it does not even fetches the right page title, etc. In this article, we will show you How to Add Facebook Open Graph Meta Data in Blogger?

Facebook Open Graph Meta for Blogger:

Before we jump to our tutorial, it is essential to learn what terminologies (object properties) are more commonly used in Open Graph.  This would not only help you to understanding the attribute but would also help you in learning their functionalities. 

  • og:title: This condition represents the title of your posts, blog, etc.
  • og:url: This represents the URL of your posts, homepage, etc.
  • og:image: This conditions represents the image that should be displayed on Facebook.
  • og:type: It represents the type of your page. For example, on the homepage we use “blog” and on article pages we use “article” attribute. 

Step#1: Adding Open Graph Protocol Namespace:

The First thing you need to do is to Login into your Blogger account. Now from the dashboard go to Template >> Edit HTML and search for the following highlighted HTML attribution. (Quick Tip: This code is usually present at the first lines of your template’s coding). 

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

Now just next to the highlighted code (as shown above) add xmlns:og='http://ogp.me/ns#'. Once everything is down, it would somewhat look like this. (Quick Tip: Make sure you leave a space between these two codes). 

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

Step#2: Adding Object Properties:

After adding the namespace properly in the template, now it is time to insert the object properties that we have discussed in the very beginning of this tutorial so search for the <head> tag and just below it paste the following chunk of coding. Once everything is done, press the “Save Template” button. 

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

Congratulations: Facebook Open Graph Meta Data is successfully added to your Blogger blog. 

You might be curious to know whether you everything right or not, so if you want to learn how the content would look when you will share on Facebook then test your URLs in Facebook Debugger that works exactly like a Google Rich Snippet tool. It displays the errors and provides you a small preview of your content.

On the second note, most of the templates are not optimized for Open Graph, so you do need to get this job done yourself no matter whether you use a Custom or default Blogger templates. However, these tags do not help you to rank well in the Search engine results. These are just to help Social crawlers to fetch the right content from your site.

We are confident that this article would help you in tackling the bugs which you probably face while sharing your content on Facebook. However, if you know a better way of doing this then do share it with us by leaving a comment below.  
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

22 comments

May 5, 2013 at 3:30 PM

Nice post bro. Bro why your alexa ranks goes upstream..

May 5, 2013 at 10:46 PM

Great article bro. Helped me out on few things. Good thing is that I learnt few more things out of this.

May 5, 2013 at 10:47 PM

Hi Guys,

we've to make a little change in this code before adding it to our blog

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

In the above code we've to replace http://www.your-blog-logo.jpg with our blog logo URL.

Thanks :)

May 6, 2013 at 5:48 AM

thats good.

Editorial Team MOD
May 6, 2013 at 5:55 AM

Well, I Think people're smart enough to do such changes. Thanks anyways.

Editorial Team MOD
May 6, 2013 at 5:55 AM

We aren't really concentrating on Alexa, Content is our first priority.

May 6, 2013 at 7:25 PM

Great bro,can you say me how to add a code to template which will redirect it to another site if the credits are removed????

May 6, 2013 at 10:03 PM

Some people(I mean beginners) may not know it.

It's better to notify them. ;)

May 7, 2013 at 2:40 AM

thanks bro :)

May 9, 2013 at 11:16 AM

Wow.. Long time no see brother, you're still great.

But, yeah.. I use the normal metode to add its thumbnail in facebook meta tag, i think it could be a mili second faster for browsers to find the thumbnail. :)

By the way, why you don't add the "admin" meta tag on this website? I've just checked it..

Here is your, and here is mine mine :)

May 9, 2013 at 11:27 AM

What do you mean brother? To redirect a page to another page but both pages still belong to your blogger blog, you can do that through your setting tab on search prefference. But if you want to redirect the page to another page beyond your blogger blog, you can use javascript, and you can find the code easily through google search.

However, you said about credit, then why don't you just edit the post and put the credit inside?

May 10, 2013 at 12:26 PM

Thank You Coy :)

September 10, 2013 at 10:05 PM

how to remove s72-c from the result post photo that makes photo in size 72 because facebook and twitter require more than 200×200 size

September 25, 2013 at 9:04 AM

Same problem here :(

November 14, 2013 at 1:42 AM

In your own blog, you don't have change "app-id" and "Facebook-Profile-ID" and "blog-logo" I had seen these error in html source of this page.

Nor
January 5, 2014 at 5:31 AM

Hi,thanks for the clear post.
I have followed all the steps, but Facebook keeps selecting my Google account photo as thumbnail.
My question is: After adding the code to the Blogger Template, do I need to do something in the code of the Post to indicate that a certain image is the image to be used as og:image?

Thanks a lot, and sorry for the newby question.

January 14, 2014 at 7:54 PM

I tried this code, ran it thru the Debugger and it threw an error around the Facebook-Profile-ID line. Removed the line (as noted in another comment) and the debugger worked fine... but when I try to share the page it says it can't post to my Wall. HELP!

April 7, 2015 at 6:39 PM

Tried it twice according to instructions and didnt work

June 17, 2015 at 7:41 PM

Some beginners like me have no idea what is going on so any further explanation helps.

February 18, 2016 at 3:53 PM

wohhhhh....
it worked..
thanks

May 15, 2016 at 12:14 AM

i have added the codes as explained above, but no results, still same issue, while sharing with fb, in thumbernail pic it takes logo pic of the header instead of taking post picture

June 26, 2017 at 7:05 AM

im a bigginer do explain it clearly

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.