How to Add Breadcrumb Navigation Menus At the Top of Your Blog Posts

Breadcrumb navigation is becoming a more and more relevant when it comes to a blog’s user friendliness (which trickles down to search engine friendliness).   Most SEO and marketing experts agree that breadcrumb paths are a positive addition to almost any site, especially those where the content can be categorized with some sort of hierarchy. Today we’re going to discuss exactly what breadcrumb navigation is, why it is important and how you can install it on your Blogger blog if you don’t have it already. 

What is breadcrumb navigation?

Breadcrumb paths are the horizontal menus found at the top of a post or page that show the hierarchy of post content.  On Blogger, the cascade is typically:  Home >> Post Category >> Post Title

The term “Breadcrumb” is a homage to the fairy tale Hansel and Gretel where the children left a trail of breadcrumbs to find their way out of the forest.  In that same way, your breadcrumb navigation shows the path of your content. (Although not necessarily in the order you actually got there.) It is more of a roadmap of your site structure to help users navigate through your content.

I have been using breadcrumb navigation on my DIY site for a while now and it has been great for reader retention and increasing pages per session.  This is what they breadcrumbs look like on my blog:

Why are breadcrumbs so important? 

Breadcrumb navigation is extremely important especially on large commerce sites.  For example, Amazon prominently uses breadcrumb paths on their site:

and even though the structure of most blogs is not nearly as complex as Amazon, it still can be very valuable for a good user experience and SEO.

BENEFITS OF BREADCRUMBS FOR USER EXPERIENCE:

1. Aids in navigation: Having a breadcrumb path allows for easy discovery of related content. Since most blogs are written chronologically, the “next” and “last” post navigation options may not result in related or relevant content.  They are typically easy to understand for most users (and not as difficult to find as your menus in your header or sidebar) and don’t take up a lot of space or slow down you site.

2. Reduces Bounce Rate: Having a breadcrumb trail available has been proven to reduce a page’s bounce rate. By giving users an easy way to find related content they are less likely to leave after they have finished reading the content on the current page. I also increases time on site and pages per session.

3. Gives user a frame of reference: Many site visitors will not land on a home or menu page but will instead find themselves on a single post.  A quick glance at the breadcrumb path makes it quickly obvious where exactly they are located on your site, relative to the rest of your content.  Additionally, the label the current post is categorized under provides insight into the type of content available on your site.

4. Allows for easy back tracking: Breadcrumb navigation makes it easier for a user to backtrack to a parent directory (or in blogger’s case, to an entire category label).  Since breadcrumb paths tend to narrow down content by increasing specificity, they allow users to ‘back out’ of a post into a larger segment of your site’s content. 

BENEFITS OF BREADCRUMBS FOR SEO:

All of the benefits for user experience chould technically also be listed under SEO benefits, since user friendliness and engagement is such an important factor when it comes to a page’s search engine rank.  There are also some ADDITIONAL SEO perks from having breadcrumb navigation available on your blog independant of user experience.    

1. SERP results markup: Google recently announced that they are updating the MOBILE algorithm to show breadcrumb paths instead of URLS on SERPs (Search engine results pages).  To insure your links show up that way requires some additional RDFa markup separate from the HTML for navigation.

With that markup search results now look different on mobile.
2. Keyword Density: Listing the keyword rich post and category names on each page increases the keyword density on your site.

3. Internal Linking: This navigation system links together similar content via the same category label. These additional links are beneficial SEO wise.

How do you install the breadcrumb navigation to your blog posts?  

It isn’t super difficult if you have a standard template.  Custom templates may be slightly more complicated, but for most blogs it is a few simple lines of HTML added to your template.  This is what this blog’s breadcrumb menu looks like using this tutorial. 

INSTALLING BREADCRUMBS ON A BLOGGER BLOG:

From your Blogger dashboard go to Template and create a backup. Next click on “Edit HTML”   Click INSIDE the window and search for: 

<b:include data='top' name='status-message'/>

Remember you need to click ON THE CODE and THEN hit “Control-F” or else you won’t actually search the HTML! 

Now Replace the highlighted text with the following (we are adding the navigation menu to the top of your posts):

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

Now you want to find this part of your code:

<b:includable id='main' var='top'>

Replace it with the following  (What we are doing here is adding code to generate the actual text in the menu itself) :

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>  » <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>

»Unlabelled

</b:if>

» 

<span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a>

 » All posts

<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

Finally we need to format how the menu appears.  To do this you have to add the CSS (styling) to the text.  Find: 

]]></b:skin>

Paste the following immediately before it:

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
}

This is CSS markup and you can change the way your menu looks by changing this text.  This is just the most basic formatting, but feel free to play with this code if you are comfortable with CSS.

For example, here is a much more complicated CSS markup you could use instead:

.breadcrumbs {
font-size: 14px;
background: #eeeeee;
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: linear-gradient(top, #eeeeee 0%,#cccccc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
height: 25px;
line-height: 25px;
color: #454545;
border: solid 1px #cacaca;
width: 100%;
overflow: hidden; 
margin-bottom: 25px; 
padding: 0px
}

With that CSS this is what the menu would look like this on my blog:

Depending on how comfortable you are with your template, you also can move your menu to different parts of your post.  I put mine under the title, but you could also put it in the footer or near the comments.  It really will depend on your layout.  The standard location is at the top of your post.

Now you should have everything you need to install this extra navigation option for your readers and will help drive those readers to all the other related content on your site.