Advertisment

June 20, 2016

Add Open Graph Meta Tags for Blogger Blogs


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.

No comments:
Write comments

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!

About Owner

Sayyad Miskeen is a web developer, SEO Consultant , Graphics Expert and Online Mentor who has been working since 2013 and is managing several successful websites on the internet for last 5 years. Sayyad Miskeen can help you in Web development, Make Money, SEO , Graphics and Online Marketing related issues, if you want to know more about him then click here

About My Father


My father name is Muhammad Miskeen. He is born on 1957.He is a senior Teacher at BISE Rawalpindi.he is Joined his Duty as a art & Drawing Teacher in G.H.S.S Ausia Rawalpindi (12-08-1976) 
Qualifaction: 
carer O'level in G.H.S.S
Intermediate And Graduation in Art & Drawing + Statistics + Economics {1974 - A.I.O.U}

Featured post

Use Telenor Free Internet Trick 2016

How to Use Telenor Free Internet Trick 2016 Telenor Free 2G/3G Internet Trick j Hi ! Everyone ....! My name is Sayyad Miskeen ...

Alexa Rank

© 2014-17 Sayyad Graphics. Designed by Sayyad Miskeen & Distributed by Sayyadgraphics.com