The full anatomy of breadcrumb navigation

Breadcrumbs are one of the elements of website navigation. The term comes from the classic Brothers Grimm tale in which children scattered bread crumbs in the woods to find their way back home. On a website, breadcrumbs serve the same purpose – they help users understand where they are and, if necessary, help them get back to the previous site section.

In this post, we’ll discuss which breadcrumb types exist, whether your site needs them and how to set them up properly. 

Breadcrumb types and structure

Normally, you’d find a breadcrumb navigation trail at the top of the page right below the header menu. It consists of several elements, with each linking out to a website category or to the homepage. Depending on the elements included in the trail, we can single out several types of breadcrumbs.

Hierarchy-based breadcrumbs are most widespread. They show users the path all the way up to the home page letting them easily navigate to category pages one or several levels up in the website hierarchy. So, the breadcrumb trail will typically look like this: Homepage > Category > Subcategory > Page.

Pretty often, though, breadcrumbs on e-commerce websites don’t have the homepage element and, as a result, start off with the category the user is browsing. Such breadcrumbs look neater, but users are forced to use the main navigation to check out other website categories.

Both of these examples are variations of hierarchy-based breadcrumbs, as the path always starts with the top-level category and guides users down the website structure. They are static, meaning that breadcrumbs look the same for every user, no matter how they get to a certain page. But this is not the only possible option.

Dynamic or attribute-based breadcrumbs are formed dynamically based on the user click path. They may show the place of the page within the website’s structure or feature the product’s attributes instead.

In the example below, if users get to the product page from the vacuum cleaners category, they will see this kind of breadcrumbs.

Meanwhile, if users started the search from the iRobot brand category, the breadcrumb trail will look totally different.

Just like hierarchy-based breadcrumbs, dynamic breadcrumbs can also have different variations. The trail can start on the homepage or category page, extra elements can be added to the trail or some evident elements can even be omitted. It depends on the path a user takes to get to a certain page. 

Drop-down navigation breadcrumb menu. If the website is really big, and you want to add more than a few extra elements to the trail, drop-down navigation menu is your option. It works both for hierarchy-based breadcrumbs and dynamic breadcrumbs, but let’s look at dynamic ones as an example.

On the TripAdvisor website, users can see the full list of items that belong to the Playa del Carmen category as well as all the related pages thanks to drop-down navigation.

If you pick the Playa del Carmen Vacation Rentals category from the drop-down list, the breadcrumb trail will go through a transformation and will start with the Vacation Rentals category while the Playa del Carmen element will disappear.

Finally, the last type of breadcrumbs is history-based. This is when the path consists of the actual pages a user visited, so the path looks something like this: Home > Previous page > Previous page > Current page. Such breadcrumbs are seldom used, as the browser Back button easily does the same job. Besides, they are of no use to visitors who came from Google or other external sources.

At the same time, history-based breadcrumbs are often combined with other breadcrumb types to let users easily come back to the previous page.

So, as you can see breadcrumbs come in all shapes and sizes to cater to the needs of every website. The question is whether you need to have them on your website in the first place. 

Which websites cannot do without breadcrumbs

Given all of the examples above, you might think that only large online stores with complicated website structures and lots of categories need breadcrumbs. However, this isn’t the case. We can find a great use of breadcrumbs on media websites, forums, business catalogs, blogs, etc. It all depends not on the type of website but on how complicated its structure is.

If your website has a linear structure with no more than two levels of pages, you can totally do without breadcrumbs. Websites that host separate, non-related landing pages do not need breadcrumbs either. 

In all other cases, seriously consider adding breadcrumb navigation to your website. There are several reasons for it as the benefits breadcrumbs can bring to your website go beyond better usability. 

Three reasons to become a fan of breadcrumbs

You won’t find it hard to implement breadcrumbs on your websites. Once you do, you’ll have improved three things: website usability, internal linking structure, and CTR.

Enhanced user experience

Breadcrumbs make it easier for users to move around your website. Users always know where they are and can go back to the previous page or go to a different category with no extra hassle. Breadcrumbs are especially helpful for the users who came from the SERP and have no idea what your website’s structure is.

Let me give you an example. Say, you’re looking for a sofa. You clicked on a Google snippet and want to check out what other options the store offers. Thanks to breadcrumbs, you can get to the entire sofa catalog or check other products of the same brand in only one click.

Breadcrumbs are also helpful when you initially start your product search from the website’s category page and set filters like color or size. Then, if you come back to the category page from the product page using breadcrumbs, you won’t have your filters cleared and will be able to pick up right where you left off. If you use the browser Back button instead, you may very well lose your filter preferences.

Better internal linking structure

Along with the header menu and footer, breadcrumbs help you spread link equity across your website. The higher the page is placed within your website hierarchy, the more pages should be pointing to it stressing its prominence. It means categories should link out the main page, subcategories should link out to categories, and product pages should link out to subcategories.

SE Ranking’s Website Audit tool can help you adjust your website linking structure in a way that passes the linking juice to the right page. Check out this guide on internal linking to learn how to properly use all types of internal links, including breadcrumbs.

Compelling search snippets 

Proper breadcrumb markup enables you to include your breadcrumb trail in your Google SERP snippet.

As a matter of fact, every SERP result now features a breadcrumb trail, as Google is replacing URLs with breadcrumbs on desktop search. But, if you don’t use actual breadcrumbs, or if you fail to tell Google you have them in a language it understands, Google will come up with its own version of breadcrumbs based on your URL. Here’s what breadcrumbs will look like if you don’t include the webpage category within the URL:

To make Google display your breadcrumbs in the snippet, and not the modified URL, use the schema markup. The interesting part here is that Google will decide on its own which of your website categories to include in the trail depending on their relevance to the search query. 

To check out what your pages’ SERP snippets look like, you can Google all of the pages you are interested in one by one. Or you can use SE Ranking and check everything within a single tab. After you create a project, you’ll be able to check the snippets for every keyword you track in the Analytics and Traffic section.

The tool stores data for 30 days, so you can pick any date or time period within this range and check what your SERP snippets looked like.

Breadcrumbs in Google snippets allow users to understand at a glance which category the page belongs to, and which related products/information they can find on the website. Therefore, proper breadcrumbs are yet another factor that makes users choose your website over others in SERPs. 

So, to sum up, breadcrumbs help you send better behavioral signals to Google and properly distribute link juice across your website. Both things are positive ranking signals, which means implementing breadcrumbs may also help your website rank higher. So, let me now share some tips on how to add breadcrumbs to your website using the most popular CMSs.

How to properly add breadcrumbs to your website

There are a few things you need to consider before adding breadcrumbs. Let me quickly list them all.

• Do not link out to the current page in breadcrumbs. Having a page linking out to itself is bad for SEO. You can still include the current page in the breadcrumb trail, just don’t link to it. For the same reason, it is not recommended to add breadcrumbs to the homepage, as in this case, the trail will consist of a single element linking out to itself. 
• Put breadcrumbs at the top of the page right below the main navigation. This is common practice and users intuitively expect to find breadcrumbs there. However, some websites put breadcrumbs at the bottom of the page – this is how Apple handles it on their website.

The reason for this is that their product pages come with pretty lengthy descriptions, so users will have a hard time scrolling the page all the way up. For the same reason websites offering endless scroll can also benefit from having the breadcrumb trail at the bottom of the page. Another way out would be to use two breadcrumb paths – one at the top of the page and another one at the bottom. 

• Make sure to add schema markup to your website code before enabling breadcrumbs. Schema markup is a semantic vocabulary of tags that are added to HTML code. It helps Google understand your content and, in particular, tells the search engine that the list of links at the top of your page stands for breadcrumbs.

How to implement breadcrumb schema markup for rich snippets

By adding the Schema.org vocabulary to your HTML Microdata, you’ll make Google display your actual breadcrumbs and not the adapted version of the page URL in the rich snippet. 

So, here’s what the breadcrumbs code looks like without the schema markup.

Source: Schema.org

And here’s the breadcrumbs trail code with the schema markup.

Source: Schema.org

It is recommended to use two types of schema markup, namely Microdata and RDFa. To get detailed instructions on how to properly implement the markup on your website, check out Google’s guidelines. 

Once you are finished, make sure to check if you did everything right with the help of Google’s Structured Data Testing Tool. There should be no errors.

Now that you know why schema markup matters and which best practices to follow when adding breadcrumbs, let’s finally talk about plugins for the most popular CMSs that will help you implement breadcrumbs. 

Adding breadcrumbs in WordPress

If your website runs on WordPress, you can either use one of the special plugins to add breadcrumbs (Breadcrumb NavXT, SEO by Yoast) ) or code everything on your own.

Using a dedicated plugin

Let’s take a closer look at the BreadcrumbNavXT plugin as an example here, as it is one of the most popular solutions on the market. 

The plugin is available for free. It is compatible with WordPress version 3.0. and higher and your host should support PHP version 5.5 or later.

Once you install and activate the plugin, go to Settings > Breadcrumb NavXT to configure it. Standard settings should work well for most websites, but you may as well customize everything according to your needs.

Source: wordpress.org

Under the General settings tab, you can set breadcrumb separator type, choose whether you want to have the homepage included in the breadcrumb trail, etc.

Under the Post types tab, you can set up breadcrumb links for different page types like posts, pages, or custom post types.

When you’re done with the settings, breadcrumbs will not immediately appear on your website. To call them, you’ll have to add a few lines of code to your theme or child theme‘s header.php file.

div class=”breadcrumbs” typeof=”BreadcrumbList” vocab=”http://schema.org/”>
<?php if(function_exists(‘bcn_display’))
{
bcn_display();
}?>
</div>

That’s it. Breadcrumb navigation should now be visible on your website. 

Coding breadcrumbs on your own

WordPress code is plain and clean, so you won’t find it hard to code your own breadcrumb solution. Here’s a sample of the breadcrumb code, but naturally you’ll be able to decide which variables to include in the code according to your unique WordPress setup.  

function the_breadcrumb() {
    echo '<div id="breadcrumb"><ul><li><a href="/">Home</a></li><li>></li>';

    if ( is_category() || is_single() ) {
        $cats = get_the_category();
        $cat = $cats[0];
        echo '<li><a href="'.get_category_link($cat->term_id).'">'.$cat->name.'</a></li><li>></li>';
    }

    if(is_single()){
        echo '<li>';
        the_title();
        echo '</li>';
    }

    if(is_page()){
        echo '<li>';
        the_title();
        echo '</li>';
    }

    echo '</ul><div class="clear"></div></div>';
}

The code should be added to your functions.php file, and the main rule here is not to put this function inside a different function so that they won’t conflict with each other.

To make your website show the breadcrumbs, call the function by putting the following line of code where breadcrumbs should appear:

<?php the_breadcrumb(); ?>

That’s basically it. To make your breadcrumbs look nicer, you can play around with their design by editing the style.css file in the id=“breadcrumbs” part.

If you do decide to code breadcrumbs on your own, you’ll have a lot of space for customization. Besides, your website will most definitely load faster, as plugins tend to slow it down.

Adding breadcrumbs in Joomla

Joomla comes with a breadcrumbs module from the get-go which you can add by going to Extensions > Modules from your admin panel. Here you can easily pick which breadcrumb elements to include in the trail (home, current page, remove “You are here” element that Joomla offers by default), select custom a breadcrumb separator, choose where you want to place breadcrumbs. Under the Advanced tab, you can define a custom CSS class for the breadcrumbs. 

Source: docs.joomla.org

The most popular CMSs have special plugins/modules that can help you implement breadcrumbs on your website, which is yet another proof that this navigation element really makes a difference.

If none of the offered solutions for WordPress and Joomla work for you, you can add breadcrumbs manually using regular HTML tags:

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Category</a></li>
  <li><a href="#">Subcategory</a></li>
  <li>Page</li>
</ul>

The drawback of this approach is that you’ll have to manually add breadcrumbs to every single website page where you need them to appear.

No room for hesitation

Breadcrumbs are one of the most essential navigation elements and, thanks to the abundance of plugins and modules, they are also easy to implement. So, if your website has more than twenty pages and a multi-level structure, there’s no excuse for you not to have breadcrumbs. This navigation trail will be of great help to your users both on your website and in the SERP.  

Do you have breadcrumbs on your website? Which type of breadcrumb navigation fits you best? Share your experience in the comments section below.

Svetlana Shchehel

Svetlana is the Head of Content at SE Ranking. Her interests span across digital marketing, SEO, and translation. She regularly shares her expertise on the SE Ranking blog and across various marketing media. Svetlana believes that complex notions can be explained in plain words and loves creating immersive stories. Svetlana spends most of her evening hours learning new languages, planning memorable trips, and petting her cat.