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.
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 == "item"'>
<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 != ""'>
<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.
- NOTE:: use Facebook Lint Tool to verify your Open graph meta tags.
How This Open Graph Work !!??::(Think you are sharing a post of your blog on facebook)
1.
<b:if cond='data:blog.pageType == "item"'>
<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 != ""'>These tags instructs facebook to fetch your blog description stored in meta tags while sharing your blog.
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
0 comments:
Post a Comment