Description: A full guide to add Facebook Open Graph Protocol Meta Tags to your Blogger Blogs Using Large Blogger Thumbnail Images.
This post will guide you to add Facebook open graph Meta tags to your Blogger with easy and simple method. You may integrate your Web pages into the social graph via open graph protocol tags. Once you add the open graph meta tags on your webpage, your page would likely to equivalent as a Facebook page. When a user clicks on a Like button on your blog's homepage, and if you already have installed Facebook's JavaScript SDK to your Blogger, a connection is made between the user and your blog. It will be appeared in the 'Likes' section of the user's timeline profile. If a user clicks on Like button on your post pages, it will also display on their Facebook timeline and their friend's newsfeed. After adding Facebook open graph meta tags to your Blogger, Facebook will sync your blog information such as post title, description, author and post large thumbnail easily, and will be display on Facebook.
You have successfully added open graph protocol Meta tags to your Blogger blog. You may check these open graph Meta tags installation by Facebook debugger tool.
Conclusion: Facebook open graph meta tags help to sync our blog post data for Facebook. You can notify to Facebook that which image is your featured thumbnail, who is the author of the article etc. Your Facebook shares can be more engaging by using proper open graph meta tags.
"The data you provided via Facebook Open graph Meta tags define how your page will be represented on Facebook."
How to Add Open Graph Meta Tags to Blogger
I would like to recommend you before adding Facebook open graph meta tags, create & Install a unique Facebook app and app ID for your Blogger. Now, follow the steps.- Go to Blogger Dashboard --> Select your Blog --> Template --> Edit HTML, find the HTML attribution that will be placed on the starting as shown below,
<html ... ... ... xmlns:expr='http://www.google.com/2005/gml/expr'>
- Add the following open graph namespace to the above code (Add it only when your template doesn't have.),
xmlns:fb='http://ogp.me/ns/fb#' xmlns:og='http://ogp.me/ns#'
It will look like,
<html ... ... ... xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#' xmlns:og='http://ogp.me/ns#'>
- Now, find <head> and below it, paste the following code.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='blog' property='og:type'/>
</b:if>
<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.postImageUrl' property='og:image'/>
<b:else/>
<meta content='http://www.your-default-thumbnail.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'/>
Replace http://www.your-default-thumbnail.jpg with your custom image, it will be show up if your post doesn't have any image. The post host image to Blogger may help you to get direct image link. Change App-ID with your Facebook App ID that you have created as I mentioned a link above to this post. Now, change Facebook-Profile-ID with your Facebook profile ID [To know your profile ID, go to http://findmyfbid.com/ site, and type your profile URL link into the desire field, and hit 'find numeric ID ->'. For example my profile URL link is http://www.facebook.com/shadab.mohammad, if you put it and hit enter. You will see my profile ID, 1606375657. - Inside your Blogger source code, search for "<b:includable id='post' var='post'>", and paste the following code just below to it.
<meta expr:content='data:post.author' name='author'/>
- Finally, click on Save template.
You have successfully added open graph protocol Meta tags to your Blogger blog. You may check these open graph Meta tags installation by Facebook debugger tool.
Best Practices for Facebook Open Graph Meta Tags
- Blog Post Title: You should write your blog post title with not more than 70 characters. By default, Blogger post titles are not SEO friendly since post titles contain blog title that is not good for characters limit as well as SEO. Here is complete guide to make your Blogger post title SEO friendly.
- Blog Post Description: Here, characters limit is upto 160. You should write informative & subjective description to each Blogger post.
- Blog Post Featured Image: The first image you are using in your Blogger post is currently a featured image. The image size is also important when you want to display large image on social media sites. You should try to avoid images less than 200px X 200px as a featured image. The best practic to use a better featured image is to use an aspect ratio of 1.91:1. I recommend you to use featured image of width 640px or 600px, and respectively height 640/1.91= 335px or 600/1.91=315px.
Conclusion: Facebook open graph meta tags help to sync our blog post data for Facebook. You can notify to Facebook that which image is your featured thumbnail, who is the author of the article etc. Your Facebook shares can be more engaging by using proper open graph meta tags.
