Add Breadcrumb to Blogger Blog for Rich Results

Breadcrumb for Blogger: 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 RDFa (Resource Description Framework in Attributes), an HTML5 extension. It will help Google to understand and present the information on your blog posts in search results as Rich Snippets (also known as “Rich Results”).

Table of Contents

Breadcrumb (BreadcrumbList) structured data for Blogger

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 with the blog post item (Type, Name, ID, Position). Valid items are eligible for Google Search’s rich results.

Does your blog post support rich results? First of all test rich snippets with the help of Rich Results Testing Tool to know that whether you have already implemented breadcrumb for your blogger blog.

Here we help you to build, test, and release structured data. 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

Home › Blogging › Blogger Blog › SEO › Add Breadcrumb to Blogger Blog for Rich Results

Step-1 (Edit Blogger Theme):

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 (Add Breadcrumb Code):

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;'><!--
Breadcrumbs microdata markup added by www.superwebtricks.com START. -->
 <div class='swtBreadCrumbs'>
<div typeof='BreadcrumbList' vocab='https://schema.org/'>
      <span property='itemListElement' typeof='ListItem'><a expr:href='data:blog.homepageUrl' property='item' typeof='WebPage'><span property='name'>Home</span></a><meta content='1' property='position'/></span>&#8658;
      <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == &quot;true&quot;'><span property='itemListElement' typeof='ListItem'><a expr:href='data:label.url' property='item' typeof='WebPage'><span property='name'><data:label.name/></span></a><meta content='2' property='position'/></span></b:if></b:loop></b:if>&#8658;
      <span property='itemListElement' typeof='ListItem'><span property='name'><data:post.title/></span><meta content='3' property='position'/></span>
    </div></div></b:if><!--
Breadcrumbs microdata markup added by Showeblogin END.
Tutorial at https://www.superwebtricks.com/?p=543 -->

Step-3 (Add CSS Code):

If you want style your breadcrumb then you may use these codes.

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 Template):

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.