SUNGSAH: Add Open Graph Meta Tags For Blogger

add facebook open graph meta tags in blogger

The Facebook open graph meta tags enables web pages to integrate into social graph and provide ability to treat your page likeFacebook page and also helps your +1ed web page to be integrated into social graph if you have addedplus 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 != ""'>
<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.

SUNGSAH

Add Open Graph Meta Tags For Blogger

Tutorial On How To Add Open Graph Meta Tags To Blogger::

How This Open Graph Work !!??::(Think you are sharing a post of your blog on facebook)

No comments:

Post a Comment

ဒိမွာ member လုပ္ရင္ Join this Site ကုိနွိက္ၿပိး Email ႏွင့္ယင္ပါ