Jumat, 22 Maret 2013

Setting Up Breadcrumb, Rich Snippets, Star Rating and Google Authorship

Setting Up Breadcrumb, Rich Snippets, Star Rating and Google Authorship
Rich Snippets provide a small sample of a site’s content on Search Engine Result Pages (SERPs) of search engines such as Google, Yahoo and Bing. They enhance your search listing, making it more enticing for users to click on and easier for search engines to extract information. Adding Rich Snippets to your site won’t affect the appearance or content of your pages; rather, everything is done behind the scenes in your site’s HTML code. To display Rich Snippets, you just need to tweak the code of your website with some additional tags.

Google Authorship

Incorporating Authorship isn’t hard. Here’s the step-by-step guide so you don’t get confused (as I did in the early days of authorship).

  1. Set up your Google+ profile. If you have a Gmail account, you probably already have an Google+ account. If not, you can sign up on Google+.
  2. Add your contributor links. These tell Google where to look for your content. This is a screenshot of what mine look like.
  3. Insert this code to your template between <head> code :
<head>
<link href='url google plus agan disini' rel='author'/>
<link href='url google plus agan disini' rel='publisher'/>
</head>

Star Rating Rich Snippet

Insert this code to your template :
[] find code <data:post.body/> at edit html
paste this code below <data:post.body/>
<p>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='margin-top:30px'>
<div itemscope='' itemtype='http://data-vocabulary.org/Review-aggregate'>
<div style='padding:5px; width:85px; float:left;'>
<img height='55px' itemprop='photo' src='insert your profile picture google+' width='55px'/></div>
<div style='padding:5px; font-size:11px; float:left;'>
Title Post: <span itemprop='itemreviewed'><b><data:post.title/></b></span><br/>
Rating: <span itemprop='rating' itemscope='' itemtype='http://data-vocabulary.org/Rating'>
<span itemprop='average'>100%</span>
</span>
based on <span itemprop='votes'>99998</span> ratings.
<span itemprop='count'>5</span> user reviews.<br/>
Author: <b><a href='Insert your link profile Google+ '><data:post.author/></a></b><br/><br/>
Thanks for read this post.</div>
</div>
</div>
</b:if>
</p>

 Breadcrumb

how to make breadcrumb indexed by google?, lets start :
  1. Login blogger 
  2. Templates, then edit html
  3. find code ]=]=></b:skin>
  4. copy code below, and paste above code ]=]=></b:skin>
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}
5.  find code <b:includable id='main' var='top'>  and replace with code below :
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

After make a changes, save template and then cek you posts link here : http://www.google.com/webmasters/tools/richsnippets

Thats all how to Setting Up Breadcrumb, Rich Snippets, Star Rating and Google Authorship at blogspot. Thanks for reading.. 
Powered by Blogger