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 == "item"'>
<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 != ""'>
<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.
About the Editorial TeamThe Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
23 comments
hm nice work brother,
Nice post bro. Bro why your alexa ranks goes upstream..
Great article bro. Helped me out on few things. Good thing is that I learnt few more things out of this.
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 :)
thats good.
Well, I Think people're smart enough to do such changes. Thanks anyways.
We aren't really concentrating on Alexa, Content is our first priority.
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????
Some people(I mean beginners) may not know it.
It's better to notify them. ;)
thanks bro :)
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 :)
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?
Thank You Coy :)
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
Same problem here :(
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.
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.
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!
Tried it twice according to instructions and didnt work
Some beginners like me have no idea what is going on so any further explanation helps.
wohhhhh....
it worked..
thanks
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
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.