close
Blogging

Add Breadcrumbs Navigation 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 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.

Tags : Blogger BlogSEO

4
Leave a Reply

200
3 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
  Subscribe  
newest oldest most voted
Notify of
Eduardo Junior

The Emporio template has many b:includable id=’post’ var=’post’, which one should I use?

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

Very informative thanks for providing breadcrumbs knowledge