Friday, January 02, 2015

Create Open Graph in Blogger Blogspot

Create Open Graph in Blogger Blogspot for SEO to boost your blog's visibility in Search Engine like Google and Bing.

Put the following two codes in your Blogger Template (Template -> Edit HTML)

First Code: xmlns:og='http://ogp.me/ns#'

Put the above code right after the following code [http://www.google.com/2005/gml/expr'] at the top of the template. It will look like this:

<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>


Second code:

<!-- Open Graph Meta Tags BEGIN -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<!-- Open Graph Meta Tags END -->

Put the above code anywhere between <head> and </head>

Done.

COMPLETE OPEN GRAPH FOR BLOGGER

<link href='Google_Plus_ID_Here' rel='author'/>
<meta content='en' http-equiv='Content-Language'/>
<meta content='Keywords_Here' name='keywords'/>
<meta content='Site_Author_Name_Here' name='author'/>
<b:if cond='data:blog.pageType == "archive"'>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
expr:content='data:blog.pageTitle' property='og:title'/>
expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='blog' property='og:type'/>
<b:else/>
expr:content='data:blog.pageName' name='twitter:title'/>
expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
</b:if>
<meta content='Your_Site_URL_Here' name='twitter:domain'/>
expr:content='data:blog.canonicalUrl' property='og:url'/>
expr:content='data:blog.canonicalUrl' name='twitter:url'/>
expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<b:else/>
<meta content='Your_Site_Favicon_URL_Here' property='og:image'/>
<meta content='Your_Site_Favicon_URL_Here' name='twitter:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
expr:content='data:blog.metaDescription' name='og:description'/>
expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<meta content='Your_FB_App_ID_Here' property='fb:app_id'/>
<meta content='summary' name='twitter:card'/>
<meta content='@Your_Site_User_Name_Here' name='twitter:site'/>
<meta content='@Your_User_Name_Here' name='twitter:creator'/>

Guidelines:

“Google_Plus_ID_Here” paste your Google Plus id like: 1234567890 or +Your_user_name.
“Keywords_Here” keywords like shown in image above.
“Site_Author_Name_Here” your full name here.
“Your_Site_URL_Here” your website/ blog url here. (starts with http://)
“Your_Site_Favicon_URL_Here” your site/ blog logo url here. (minimum 200px)
“Your_FB_App_ID_Here” create your fb app id here: http://bit.ly/1buVuNf
“@Your_Site_User_Name_Here” site twitter username.
“@Your_User_Name_Here” your twitter username.

Open graph for non Blogger Blogspot, see here.


EmoticonEmoticon