Add Breadcrumbs Navigation to Blogger Blog for Rich Snippets

Learn the way to include breadcrumbs to your Blogger blog for rich snippets in Google search results. It also helps to navigate your blog more easily.

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 BlogSpot.com 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 data-vocabulary.org/Breadcrumb item types.

How to Add Breadcrumbs 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 breadcrumbs 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:

www.superwebtricks.com/year/month/blogger-breadcrumbs-navigation.html

The same will replace with

www.superwebtricks.com › Blogging › Blogger Blog › SEO 

Blogger-Breadcrumbs-Navigation

Step-1:

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

Step-2:

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='http://data-vocabulary.org/Breadcrumb'><!--
Breadcrumbs microdata markup added by www.superwebtricks.com 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'><data:label.name/></span>
</a>
</span>
<b:if cond='data:label.isLast != &quot;true&quot;'>|
</b:if>
</b:loop>
</b:if>
&#187;
<a expr:href='data:post.url' itemprop='url' title='Post Title'>
<span itemprop='title'>
<data:post.title/>
</span>
</a>
</div>
</div>
</b:if><!--
Breadcrumbs microdata markup added by Showeblogin END. -->

Step-3:

Search for </b:skin>

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

/*
Blogger Breadcrumbs added by www.superwebtricks.com
--------------------------------------------------*/
.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}

Step-4:

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.

Shortlink: https://www.superwebtricks.com/?p=543 Free Technical Help
If you don't want to miss our daily tutorials then you may Subscribe to Showeblogin via Email | Facebook | Twitter | and Google Plus

4 Responses to Add Breadcrumbs Navigation to Blogger Blog for Rich Snippets

  1. Dewi Sri says:

    Hello it works on my tester blog, but teks transform for the label is uppercase. i want to change the label to be lowercase, what should i do ? thanks before, this is link of my tester blog :http://feministester.blogspot.com/2017/10/di-batas-kota.html

    • Suresh Prasad says:

      You may use/add the following CSS code in step-3

      .swtBreadCrumbs {text-transform: lowercase;}

      • Dewi Sri says:

        Hello suresh, sorry i mean is not lowercase but i want teks transform for the label is same with Home and Title of blogpost. the capital letter/font is only at the beginning of the word. What should i do ?

  2. suman tiwari says:

    Very informative thanks for providing breadcrumbs knowledge

Leave a Reply

Your email address will not be published. Required fields are marked *

Home»Blogging»Blogger Blog»SEO»Add Breadcrumbs Navigation to Blogger Blog for Rich Snippets
Top