Add Breadcrumb to Blogger Blog for Rich Snippets

In general a breadcrumb is a set of links which describe the root of your current webpage and helps your website visitors to navigate your site hierarchy. In other words, users of your site will go through all ladders connected to the particular webpage.

In this tutorial we will learn the technique to add Breadcrumbs trail to Blogger blogs using HTML5 microdata markup which will help Google to understand and present the information on your blog posts in search results as rich snippets.

In blogger blog we shall use Home Page URL, Labels and posts to build breadcrumb where the Labels will stand for categories or tags in breadcrumb. We shall describe the labels relationship (Name, Value and href) and property (Title) by item types.

How to Add Breadcrumb Navigation on Blogger

First of all test rich snippets with the help of Structured Data Testing Tool to know that whether you have already implemented breadcrumb for your blogger blog. The breadcrumbs will replace the whole url of your webpage address with text links of Categories or Tags under which your article has been posted.

In case your blog have breadcrumbs, you will see your blog labels followed by blog address instead of post URL just below the title of your blog posts in rich snippets results. For example if your particular blog post is labelled under Blogging, Blogger Blog and SEO with webpage address:

The same will replace with › Blogging › Blogger Blog › SEO 



Login to your blogger account. Navigate the template HTML editor of the blog in which you want to add breadcrumbs for rich snippets.


Search (Ctrl+F) for <b:includable id='post' var='post'>

Now, replace it with the following bunch of codes

<b:includable id='post' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div itemscope='' itemtype=''><!--
Breadcrumbs microdata markup added by START. -->
<div class='swtBreadCrumbs'>
<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>
<span itemprop='title'>Home</span></a>&#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span typeof='v:breadcrumb'>
<a expr:href='data:label.url' itemprop='url' title='Categories' property='v:title' rel='v:url'>
<span itemprop='title'><></span>
<b:if cond='data:label.isLast != &quot;true&quot;'>|
<a expr:href='data:post.url' itemprop='url' title='Post Title'>
<span itemprop='title'>
Breadcrumbs microdata markup added by Showeblogin END. -->


Search for </b:skin>

Now, add the following CSS code just above/before the </b:skin>

Blogger Breadcrumbs added by
.swtBreadCrumbs:before { content:"You are here:";font-size: 85%;letter-spacing: 2px;}
.swtBreadCrumbs{width:auto;padding:0 0 5px 0;margin:0 5px;font-size:95%;border:2px solid #EDE;-webkit-border-top-left-radius: 10px;-webkit-border-top-right-radius: 10px;-moz-border-radius-topleft: 10px;-moz-border-radius-topright: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;padding: 5px;text-align: left;color:#000;background:#C3B9A8;background:-webkit-linear-gradient(top,#C3B9A8,#F3F1E6);background:-moz-linear-gradient(top,#C3B9A8,#F3F1E6);background:-ms-linear-gradient(top,#C3B9A8,#F3F1E6);background:-o-linear-gradient(top,#C3B9A8,#F3F1E6);background:linear-gradient(top,#C3B9A8,#F3F1E6);line-height:22px}


Save your blog template and enjoy.

Hey, Great! You have done. Now you will see a dynamic breadcrumbs just above your blog post titles. However, if you are not able to add breadcrumbs to your blogger blog please fill free to ask me for help.