WordPress Breadcrumbs Explained

wordpress breadcrumbs explained
Photo: Breadcrumbs Explained

If I created the definition of Ultimate Guide myself, then this post may be my “Ultimate Guide to WordPress Breadcrumbs”. So its time for you dive in.
Table of Contents

  1. 1. What are Breadcrumbs?
  2. 2. Types of Breadcrumbs
    1. 2.1. Location Based Breadcrumbs
    2. 2.2. Attributes Based Breadcrumbs
  3. 3. Why you should use Breadcrumbs
    1. 3.1. Breadcrumbs Rocks!
    2. 3.2. Good for SEO
    3. 3.3. User Experience
    4. 3.4. Breadcrumbs decrease Bounce Rates
  4. 4. Google search and Breadcrumbs
  5. 5. Things not to do with Breadcrumbs
  6. 6. Installing Breadcrumbs in your site
    1. 6.1. Installing using a WordPress Plugin
    2. 6.2. Installing without using any WordPress Plugin

WordPress Breadcrumbs Explained

1. What are Breadcrumbs?

Also known as the Breadcrumbs Trails, they are used for the ease of navigation across sites, typically appears horizontally across the top of a page. It allows users to keep track of their location in a webpage. How? For example if it says  WordPress > Plugins > Yoast, then a user can easily determine that (s)he is in sub-category Plugins under WordPress.

2. Types of Breadcrumbs

There are mainly two types of breadcrumbs based on location and attributes. There is also path based breadcrumbs but not used commonly. It shows users the path which brought them to a specific page or post.

2.1. Location Based Breadcrumbs

Simple. It tells users their current location related to the whole site structure. Unlike Path based breadcrumbs, in this type a page will always have the same breadcrumb no matter how user gets there.

breadcrumbs navigation

2.2. Attributes based Breadcrumbs

These are normally category based in websites. Like a product on an e-commerce website may have assigned different categories to it. A single page may have different breadcrumbs e.g. someone is buying a book on Amazon.com in price range of 7-10$ then this book can be in how-tos category or in cooking. As another example, you are buying an antivirus software then it can also be in Software > Utilities and may be in Software > Antivirus. See the picture below:

attribute breadcrumbs

 3. Why you should use Breadcrumbs

Because it is good for user experience + Google Likes it (Also good for some SEO). Visitors aren’t stupid, they know where they are in a site. But visitors will be required to use alternative visual information to discover what parent article is of the current article. Also breadcrumbs are consistent and common.

3.1. It just Rocks!

Unless you have some personal bias against using them, breadcrumbs rocks.. Some of the big players use breadcrumbs navigation like Google, Youtube on its channel pages, Facebook (other than its main pages because it uses AJAX for most content loading) for example in their help pages.

3.2. Good for SEO

Breadcrumbs make it easy for Google to crawl your website and categorize. It makes Google easy to understand the structure of a site and to include that kind of navigation within search results.

3.3. Good for User Experience

The most important is that they helps user to navigate in your site. Google itself has put breadcrumbs in its search results. They do this because they believe it improves user experience. Google itself has used Breadcrumbs in their pages:

google breadcrumbs

3.4. Breadcrumbs decrease bounce rate

Breadcrumbs can be an excellent way to encourage first-time visitors to continue browsing through a web site after having viewed their landing page, ultimately reducing Bounce Rate.

Recommended: 8 Reasons you should use breadcrumbs on your site

4. Google Search and Breadcrumbs

As of November 2009, Google integrated bread crumbs in search results (SERPS). Google even has a “dedicated team” for handling this breadcrumb stuff. Although not every result include breadcrumb in Google search results, it depends on how Google categorizes them. Tip: want Google to show breadcrumbs in SERPS for your site too? try to put them near the top of the post.

wordpress seo yoast

WordPress SEO by Yoast in SERPS

5. Things not to do with Breadcrumbs

While it may be helpful to user of you put breadcrumbs, it may be confusing if you do it the wrong way.

Don’t use Breadcrumbs every time:  Some sites use breadcrumbs multiple times on one page or use different types. It should be for the user first and the for some SEO++; Don’t add breadcrumbs just for the sake of adding good internal anchor text.

Do not make current page a link: User gets nothing but the current page reloaded when clicking on last link of a breadcrumb (if current page is a link). This can be frustrating. Isn’t it?

Do not use as alternative to main navigation: If your site uses vertical structure showing categories and types of content, do not just replace it with breadcrumbs.

Avoid Path-Based Breadcrumbs: Users use back button if they want to go back. Why TH (TH -> the heck) you want to create visiting path if browser is doing this already?

Include the full navigational path: Instead of showing just like Home > article, use Home > Category, type > article

6. Install Breadcrumbs on your website

Of course I put this in end of the article. Stop complaining, I’m sorry for making you spend another 10 minutes of your time. Do you think? well, maybe 😉

6.1. Install using a plugin

Installing without a plugin can be a bit tricky. You may want to install by using a plugin. There are some awesome plugins out there like Breadcrumb NavXT. But I recommend the ultimate sooper dooper must have WordPress SEO by Yoast which is also a full pack for those who want their web site Search Engine Optimized. I have already written about how to enable breadcrumbs in WordPress SEO by Yoast.

6.2. Install without a plugin

Still sticking to go without any plugin, huh!

Go to your site’s appearance from WordPress left side menu. Click editor and find your theme’s functions.php Paste the following PHP function code in the file. Alternatively you can edit the file directly from your FTP/SSH whatever you love to use. You can also consult my How to Enable Breadcrumbs Tutorial for help editing related files. You can also change backslash to anything else. Just play with it.

Add this line wherever you want your breadcrumbs to appear:

<?php the_breadcrumb(); ?>

Add this to your WordPress theme’s style.css:

#breadcrumbs{
list-style:none;
margin:10px 0;
overflow:hidden;
}

#breadcrumbs li{
float:left;
margin-right:15px;
}

#breadcrumbs .separator{
font-weight:700;
font-size:20px;
color:#999;
}

That’s all done!

The last part of this article that explains installing breadcrumbs without plugin was made by cazue.com don’t know what that means o.O ..

I think that’s enough for this

I am all tired at this point, drop in comments if you have something to say. And if you are no selfish then why not share with others??

About Asim

View all Posts

Asim is a blogger who enjoys writing articles on Technology and Blogging niche. He is our Gold Star Contributor.