How To Add Google Friendly Breadcrumb On Blogspot

How to add Google friendly breadcrumb to Blogspot Blog, there are many tutorials concerning this issue yet not all of them bringing the Google friendly breadcrumbs that's indexed by Google. Of course one of the reasons a blogger set out this navigation tool is because they want their post appears professionally on Google search result page. Like in the following picture.

The problem is not all the tutorials to display breadcrumbs trail that are shared by bloggers will display a form like in the screenshot above. Yes the breadcrumbs appears on every post, yet they are not indexed by Google. So the results will be similar like any other blogs that appear on the Google result page.

If you want your breadcrumbs indexed by Google, just follow the instructions on this post. And you will reap the result once your post is published. And then Google will update the rest posts in your blog. But firstly let's discuss about Breadcrumbs, what is it and the benefit of using it.

What is Breadcrumb?

Breadcrumbs is simply a navigation tool in website or blog to assists user (visitor) to know their current location in the website's hierarchical structure. For example if you are reading this post then point your view to the upper screen right above the post title, you will find a navigation path like the following.

That's the example of breadcrumb. By that navigation then you know where you are at this post under category, How To Blogspot pointed with Home.

This navigation tool is useful especially for a blog or website that has many pages that needed to provide a navigation help used in visitors interfaces. A user can utilize the feature to keeps track their locations.

As for SEO, will breadcrumb trail benefits to our SEO effors?

Well, hmmm...I think indirectly yes! My opinion is purely based on the user experience, if users feeling helped with the navigation then they will like our blog. If they do, they will stay longer than expected. And the user's staying period counts by Google in bounce rates. So by that factor, let me safely say yes but indirectly. If you own other opinion than mine, please share to me.

Anyway I think it's time to get ourselves into the core topic which is to display Google friendly breadcrumb on Blogspot blog. So let's get started.

Tutorial to add Google friendly breadcrumb on Blogspot Blog

1. Login to your Blogger.com account. And pick the blog you wish to display the breadcrumb trail. (Consider you have more than one blog in your dashboard.)
2. Now go to Template > Edit HTML.
3. Find this code ]]></b:skin> and paste the following CSS code right above it.
   

   .breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

4. Now find this tag <b:includable id='main' var='top'> and then replace it with the following lengthy codes.
   
   

   <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> &#187; <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'>
   &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
   </b:loop>
   &#187; <span><data:post.title/></span>
   </div>
   <b:else/>
   <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <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> &#187; <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> &#187; <span>All posts</span>
   <b:else/>
   <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <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'/>

5. Now save your template.

Well you just finished installing the needed codes to display breadcrumb trail on your Blogspot blog. Wonder will it work or not, just check it by visiting your post randomly.

If you have found there is a navigation tool called breadcrumb appears above each of your post title. Good for you. Now it's time to check whether Google index your breadcrumb. How? Just visit this Google richsnippet page and paste your any post (URL) in the provided form and hit Preview red button.

Here is my post result.

Since you have fully understood on how to implement the tutorial, it's time to add Google friendly breadcrumb on your own blog.