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.

Optimize Your Blog's Meta (Search) Descriptions Using Keyword Research

One of the things many bloggers struggle with when it comes to SEO is what exactly to include in their posts' meta descriptions.  The meta description (also called the search description on Blogger) is the short text snippet that appears on SERPs (search engine results pages) under the page title and URL.  Typically the meta description is a summary of the page content.

Search Engine Title Swapping: Make Post Titles Appear Before Blog Titles on Google

How your blog posts show up in Google’s search results is extremely important.  Since search engines take into account how frequently a displayed listing is clicked when ranking content, you want to make sure that your search results accurately reflect what your post is about.  Since the most predominant part of a search result is the post title, ensuring that it is displayed in full is very important.  But by default, Blogger does not have your search listings formatted that way.  

How to Verify Your Blog in Webmaster Tools (and Set Your Preferred Domain)

Last week I explained how to generate a sitemap and submit it to search engines in order to ensure you content was all being crawled. I mentioned that my preferred method of submitting site map was through the Webmaster Tools Sitemap tool.  After that post I had a few people ask about how to establish a Webmaster tools (which is now officially called “Google Search Console”) account for a Blogspot blog.

Because it does require inserting some code into your template, and because it turns out that you should actually be setting up accounts for multiple URLs, I thought it was worth an entire post.

How to Generate and Submit a Site Map for a Blogspot Blog

A question I get from a lot from bloggers is “How do I know that Google sees my site?” And the short answer is: as long as you have the privacy settings set correctly (In your Blogger Dashboard under Settings >> Basic) Google can find you.
The long answer, however, is a little more complicated.

5 Easy SEO Tips Everyone on Blogger Should Be Using

I could have titled this post  “SEO Optimization 101” because this is an extremely basic tutorial on optimizing your Blogger blog content.  Lucky for bloggers on Blogger/Blogspot, Google has made it super easy to manage your SEO settings within the Blogger dashboard. These five small changes will give you the most SEO bang for your buck.

If you are an advanced blogger you may already do some (if not most) of these things and you are well aware that this is only the tip of SEO iceberg.   I could (and may) write an entire series on optimizing your SEO on Blogger but we are going to start with these baby steps since they are the low hanging fruit.

In other words, if you don’t do ANYTHING else to optimize your SEO, at least you should be doing these 5 things.   

I want to assure everyone that NONE OF THESE TIPS ARE DIFFICULT.  They don't involve any type of HTML or messing with your template.  No matter how much experience you have using the Blogger platform, you can do this! 

The Top 5 Things Every Blogger Blogger Should Be Doing Improve Their SEO

No Follow Vs. Do Follow Links: The Good, The Bad, The Ugly

If you have been blogging for any length of time, especially if you have done any sort of sponsored content or affiliate marketing, you probably have heard of “No Follow Links.”   You may even have a pretty good understanding of what they are and how they work, but there are still probably a few things about follow and no follow links you may not have heard about, especially when it comes to the long term SEO impact they have on your site.

And even if you are using no follow links whenever brands and networks ask you to, and anywhere you are earning revenue, you still may not realize just how frequently you should be using no follow links when it comes to other content.  There are many many many black hat SEO companies out there who rely on site owners not realizing when and where they should be using no follow links.  They are able to sneak backlinks onto hundreds (if not thousands) of sites in order to suck up Google juice from naive bloggers the way a hungry leach sucks blood from unsuspecting hosts.

How to Remove, Rewrite and Republish Old Content and Optimize SEO on Blogger

With the start of the New Year, many bloggers are cleaning house.. both literally and on their blogs.  One question I get all the time when I talk about SEO is “How can I optimize old content?”

We all have those old posts that have great content, but not the best photography or that we haven’t optimized correctly.  Often they are posts that we would love to share with our current readers, but we aren’t sure the best way to do it.  We worry about what we will ‘mess up’ if we change them.

We also have posts that are just TERRIBLE and we want to remove them all together.  Posts that are either no longer relevant or are no longer trafficked.  People often ask “Can I just go back and delete old content?” and the answer is “It depends.”  (I know.. not the most straight forward answer.)

So today I’m going to show you a variety of situations that you may run into that involve either deleting, rewriting, republishing or changing the date of old content to keep your blog evergreen and to optimize SEO as well.  The specifics of this tutorial will focus on Google’s Blogger platform (since that is my favorite) but the tips apply to other platforms as well.. but you may need to adjust the method for editing/changing/dating posts.  (Tips for Wordpress users will be in RED)