Add Facebook Open Graph Meta Tags for Blogger blogs

By Ayman H Monday, March 12, 2012
The Facebook open graph meta tags enables web pages to integrate into social graph and provide ability to treat your page like Facebook page and also helps your +1ed web page to be integrated into social graph if you have added plus one button on your blogger blog.
Social networks like Facebook,Google+ can collect structured information about your blog posts and pages by adding open graph meta tags to your blog.

https://4.bp.blogspot.com/-avfkR5knupY/V02y4WeAh_I/AAAAAAAAAHg/qvCvj2xxJ0oM7jmao-K2vu8vJKeJaJI1ACLcB/s1600/og_logo.png

Tutorial on How To Add Open Graph Meta Tags to Blogger

1. Go to your blogger dashboard > Template > Edit hmtl. 
2. Find for <html and add xmlns:og=http://ogp.me/ns# at the closing end of this tag like this.
<html..xmlns:og=http://ogp.me/ns#>
3. Now find <head> and add the following code just below it.
<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=Your-App-ID property=fb:app_id/>
<meta content=Your-Facebook-Profile-ID property=fb:admins/>
  • Change the text in Red with your configuration.

How This Open Graph Work !!??


(Think you are sharing a post of your blog on facebook)
1. <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>
This IF condition code structure instructs facebook to fetch your blog post title and post url is you are sharing a post of your blog.
2. <meta expr:content=data:blog.title property=og:site_name/>
This instructs facebook to fetch your blog title as site name while sharing.
3. <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>
This IF condition code structure instructs facebook to fetch your post image as thumbnail if you are sharing a post and instructs to fetch your blog logo as thumbnail when sharing your blog home page.
4. <b:if cond=data:blog.metaDescription != &quot;&quot;>
<meta expr:content=data:blog.metaDescription name=og:description/>
</b:if>
These tags instructs facebook to fetch your blog description stored in meta tags while sharing your blog.

Post Tags:

Blogger Tricks

Basic / Advanced tutorials on WordPress, Google Blogger, SEO, Earning online income, Website development tips, tricks, etc.

No Comment to " Add Facebook Open Graph Meta Tags for Blogger blogs "