Add Breadcrumb Navigation in Blogger with Rich Snippets Markup




Breadcrumbs are a simple navigation tool to make the life easier for average visitors to navigate around your website or blog. It helps the user to understand the hierarchy and structure of the website, and most importantly allow visitors to understand the categories of the content.

Not only it helps in navigation; it also helps to enrich your websites SERP (Search Engine Result Page). Using RDFa markup, you can put your breadcrumbs’ link on the search results of your website or blog for rich snippets.Also, you can add breadcrumbs without the markup; as the main purpose of it is aiding in navigation.

Also, you can add breadcrumbs without the markup; as the main purpose of it is aiding in navigation.

For Blogger blog’s the labels of posts are used as breadcrumbs as there are no plugin or settings directly available in Blogger.

In this post one by one you will know;

  • How to add breadcrumbs in Blogger blogs is described,
  • Breadcrumbs code for Blogger with and without RDFa markup. And tips to understand and modify them for matching your blog’s design structure.
  • Some examples of breadcrumbs with a different design, color, and HTML code if modification.
  • The impact of Breadcrumbs in your Blogger blog and whether to use them or not.

How to Add Breadcrumbs in Blogger Blogs

Follow the instructions below:
  • Go to Blogger Dashboard of your blog > Template.
  • Back Up your template and then click on ‘Edit HTML’.
  • On the template editor search for;
<b:includable id='main' var='top'>

  • Paste the following code just below and inside the above code;
<b:include data='posts' name='breadcrumb'/>

  • Now again in the template search for;
<b:includable id='main' var='top'>

  • Paste your breadcrumbs code just above it. The code is giving along with modification techniques below in the post.
<!-- paste the breadcrumbs code here -->
<b:includable id='main' var='top'>

  • Now to add CSS code for the breadcrumbs; look for ]]></b:skin> and paste the style codes just above it. Or you can search for </head> and paste the style code inside of a new or existing <style> tag.
  • Save you template by clicking ‘Save template’.
This is all is required to add breadcrumbs in Blogger blog. <b:include data='posts' name='breadcrumb'/> indicates where you want to show the breadcrumbs. Best place for breadcrumbs is just above the post title.

If it is not placed properly then try to add <b:include data='posts' name='breadcrumb'/> in a different place inside the <b:includable id='main' var='top'>.

Breadcrumbs Code With and Without the Rich Snippets Markup for Blogger

Breadcrumbs codes for blogger are given below;

Breadcrumbs Code #1: Using RDFa markup

The RDFa markup is supported by major search engines like Google and Bing. The breadcrumb code with RDFa markup is given below;

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='//rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'>
<a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><img src="//4.bp.blogspot.com/-wkCJgg0SbRw/VJNlLKPf0iI/AAAAAAAABSk/7ET68Jytluo/s1600/Home.gif" alt="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'><img src="//4.bp.blogspot.com/-wkCJgg0SbRw/VJNlLKPf0iI/AAAAAAAABSk/7ET68Jytluo/s1600/Home.gif" alt="Home"/></a></span>
&#187; 
<span>Unlabelled</span> &#187;
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>

Breadcrumbs Code #2: Not Using Any Markup

If you do not want breadcrumbs to be shown in the SERP but want to use them for navigation purpose, then all you need to do is remove all markup from the above code. Remove xmlns:v='//rdf.data-vocabulary.org/#', typeof='v:Breadcrumb', property='v:title' rel='v:url' from the above code.

After removing them this code will be;

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span>
<a expr:href='data:blog.homepageUrl'><img src="//4.bp.blogspot.com/-wkCJgg0SbRw/VJNlLKPf0iI/AAAAAAAABSk/7ET68Jytluo/s1600/Home.gif" alt="Home"/></a>
</span>
<b:loop values='data:post.labels' var='label'>
&#187; 
<span>
<a expr:href='data:label.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'><img src="//4.bp.blogspot.com/-wkCJgg0SbRw/VJNlLKPf0iI/AAAAAAAABSk/7ET68Jytluo/s1600/Home.gif" alt="Home"/></a></span>
&#187; 
<span>Unlabelled</span> &#187;
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>




Related Post


Latest Post


Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.