How to Setup Facebook Open Graph Meta Tags in Blogger?

Learn How to Setup Facebook Open Graph Meta Tags in Google Blogger?

4
data:blog.title
How to Setup Facebook Open Graph Meta Tags in Blogger

Facebook Open Graph maybe unfamiliar with Blogger. Because this is not massively used or come with Blogger template. You may hear about the Blogger post sharing problem in Facebook site that most of the time Facebook can't detect the appropriate image or link or sometimes it shows different post title after sharing a link. This is really a biggest problem for those  who want to share their Blog Post on Fan page. If facebook unable to detect and pick the right image, title and description then visitors will become confused.

We can fix this issue by adding Facebook Open Graph Meta tag. But this is bit tricky, no matter I will show you how to add this thus you can easily share your Blogger post into facebook fan page.

opengraph


Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML

Step 3 Now find code like below above/before opening head <head>. This code also known as namespace snippet.
  • Namespace snippet from Default Blogger template
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  • Namespace snippet from Default Blogger template
<HTML expr:class='&quot;no-js &quot; + data:blog.mobileClass' expr:dir='data:blog.languageDirection'>
Remember that the Namespace snippet code will start with <html so find similar code if not exactly matching with above code.

Step 4 Copy below code and Paste the code at the end of above code.
xmlns:og='http://ogp.me/ns#'
For example new namespace snippet will be like below:
  • Namespace snippet from Default Blogger template
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>
  • Namespace snippet from Default Blogger template
<HTML expr:class='&quot;no-js &quot; + data:blog.mobileClass' expr:dir='data:blog.languageDirection' xmlns:og='http://ogp.me/ns#'>
Step 5 Now it's time to add Facebook Open Graph meta tag. Now find the opening head code </head>  

By pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 6 Simply add the below meta tag above/before closing head code </head>


<!-- Open Graph Meta Tags BEGIN -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<!-- Open Graph Meta Tags END -->

Step 7 Now simply hit the Save template Button. 

Your template is now ready for sharing Blog post on Facebook. Try to share a link on your facebook fan page and let us know that is it able to pick right Image, title and description or not If you followed the tutorial correctly then Facebook will detect everything accurately. 
How to Setup Facebook Open Graph Meta Tags in Blogger?
4 Stars stars - "How to Setup Facebook Open Graph Meta Tags in Blogger?" Facebook Open Graph maybe unfamiliar with Blogger. Because this is not massively used or com...

Post a Comment

Hi Adnan Glade to hear that.. you find this article useful. :up

data:blog.pageName refers only to the title of the blog? What about the title of the post ??

Hi Bruno
At the above you will see 2 "og:title" first one is for detecting Post title. If post title is missing then it will show Blog title.

The main code for showing post title is data:blog.pageTitle but data:blog.pageName work same. I have published another updated version of this article... you can go through that by visit below URL...

http://www.bloggerspice.com/2015/11/what-is-facebook-open-graph-protocol-and-why-you-need-it.html

thank you.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *