Add Open Graph Meta Tags for Blogger Blogs

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.

  • Step # 1
Go to your blogger dashboard –> Template –> Edit hmtl.
  • Step # 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#’>
  • Step # 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-bloglogo.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 Pink with your configuration.
  • NOTE:- use Facebook Lint Tool to verify your Open graph meta tags.

(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.
  • #1
<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.
Reactions:

Post a Comment

Thank you for getting in touch!
We appreciate you contacting us about [Contact Reason]. We try to respond as soon as possible, so one of our Customer Service colleagues will get back to you within a few hours.
Have a great day ahead!

 
Top
Sayyad Graphics /*adblocker Script*/