Home

Breadcrumbs & Their Importance To SEO & User Experience

What are breadcrumbs & how do they help your users, your internal linking, & SEO

Breadcrumb SEO hero image

Utilize the benefits of the simple but useful breadcrumb navigational tool. Breadcrumbs are a simple way to help users navigate their way around your website, help search engines understand the way your content is connected, and help improve the overall user experience of your content.

In this guide, we'll walk you through everything you need to know to provide the most value possible by adding breadcrumbs to your pages. So, before we get started, let's dive into why breadcrumbs are important for SEO.

What Are Breadcrumbs In SEO?

What are breadcrumbs in SEO?

Breadcrumbs are simple little navigational links that help users and search engines understand your content better. When a user lands on a page with breadcrumbs, it lets them easily understand what related content your website offers by seeing the specific page they are on and the more generalized categories that come before it.

Using breadcrumb navigation is a great way to improve user experience and communicate with search engines. It communicates that your website is a quality and organized resource in your niche and helps search engines crawl and discover your content. You don't always need to use breadcrumbs, though, so it is important to understand when they should be used and when you should avoid them.

When Should You Use Breadcrumbs?

In general, when you are on any page other than your homepage, it is a good idea to use breadcrumbs. When on your homepage, there is no need to display the structure of the website because the user isn't deep enough in the URL structure of your site to require breadcrumb navigation.

But, once they begin to dig a little bit deeper into your content, and they start looking into subdirectories, or the children of subdirectories, then you need to start using breadcrumbs.

7 Best Practices For Breadcrumbs In SEO

While these best practices aren't an "end-all-be-all" list, they will give you a great idea of what can be used to maximize the benefits breadcrumbs will give your website.

Hierarchy-Based Breadcrumbs

Make sure that your breadcrumbs make the structure of your content very obvious, as that is the main benefit of breadcrumbs from a user's perspective. Highlighting your URL structure with the use of breadcrumbs will not only help users stay on your pages for a longer period but will also help search engines understand more clearly how everything fits together.

Consistency

When creating breadcrumbs for your entire website, ensure that the styles, structure, and wording are all consistent across the entire website. It is a good idea to always remain consistent with everything site-wide in a website, but especially with breadcrumbs, as any deviation may confuse the user, which will lead to a lack of credibility and potentially a higher bounce rate. Pick a style, and stick with it for each breadcrumb you make.

Use Keywords

Example of natural and unnatural breadcrumbs.

Breadcrumbs are a great way to improve usability and indexability, but when using keywords, make sure it enhances the content and that the keywords aren't forced. You can use exact-match keywords in breadcrumb links, but only if it makes sense and helps to make your content easier to understand. Never force a keyword into a breadcrumb that doesn't seem natural.

In the image above, you can see some examples of both natural and unnatural breadcrumbs. Knowing the difference is very simple. All you need to keep in mind is that your breadcrumbs, in as few words as possible, should accurately describe the page they represent.

If you have a page for "cheese pizza," but the primary keyword you're targeting is "best cheese pizza near me," it makes more sense to use "cheese pizza" for your breadcrumb. Using the "best ... near me" variation is very unnatural and will seem like spam to everyone, including search engines.

Use The '>' Separator

An image showing which separator to use for breadcrumb navigation.

Using the ">" to help visually separate each category in the URL path is a universal way to communicate that what the user is seeing are breadcrumbs. This point is more for the user than anything because search engines have little need for the visual aid that this separator gives.

However, because of the familiarity with the convention of the greater-than sign, you will help users feel confident and comfortable navigating their way around your website. This small convention might seem like it isn't a big deal, but these little touches are great ways to improve your bounce rates and increase overall time spent on your pages.

The Last Item Should Be The Current Page

You always want the very last item in your breadcrumb navigation to be text that represents the page the user is currently on. There is no need for this to be a link, and it can be a simple paragraph tag.

Keep Them Short

When it comes to breadcrumb navigation, you want it to fit on all devices, so keep it concise. The shorter, the better, especially because your breadcrumb might include 3, 4, or even five pages, including the current page.

Use Schema

You should be doing this for all of your pages, but a great way to help search engines crawl, discover, and understand your content is to create a relevant schema that you can add to your HTML code. We'll have content detailing this in the future, so subscribe to our newsletter to be notified when we release that content.

Schema is semi-structured data that helps your pages communicate even more thoroughly with search engines, and among the various data-types you can include in Schema, breadcrumbs are a data-type to include in your code to help search engines understand your URL structure.

The 3 Types of Breadcrumbs

An image representing the three types of breadcrumbs.

Breadcrumbs can be broken down into three different types of organizational structures. Below, we'll detail each of the most common methods for organizing URLs via breadcrumbs.

Hierarchy-Based Breadcrumbs

Hierarchical breadcrumbs

Hierarchy-based breadcrumbs are by far the most common type of breadcrumb. They help users understand the structure of your website, and will often improve your bounce rates by helping them to navigate their way to other content they might find useful or interesting.

Attribute-Based Breadcrumbs

Attribute Breadcrumbs

Attribute-based breadcrumbs are typically used on e-commerce websites and help e-commerce stores organize many products into certain categories. These types of breadcrumbs will take certain characteristics of many products and lump them all together according to those specific attributes.

For example, you could have something like: "Home > Shoes > Mens > Running > Nike." Attribute-based breadcrumbs will help users clearly understand what each link will contain.

At first glance, attribute-based breadcrumbs might appear to be the same as hierarchy-based breadcrumbs, but the benefit of attribute-based breadcrumbs comes in when products have multiple attributes.

Breaking the breadcrumb navigation down into attributes helps certain products appear in multiple areas or even limit what products appear in certain areas, whereas hierarchy-based breadcrumbs are more linear.

History-Based Breadcrumbs

Historical breadcrumbs

History-based breadcrumbs are very specific to the user's personal journey. These are typically used in e-commerce or large complex websites, as they help users understand their journey and even help them get back to pages they recently left.

While history-based breadcrumbs are great for certain types of websites, like the ones we've discussed above, they are typically bad choices for the average website, as they will not help the user discover pages other than ones they have already been on.

If your website isn't an educational, large e-commerce website, a research/database website, or a forum, you will want to avoid these types of breadcrumbs. If your website isn't any of the above types of websites, hierarchy-based or attribute-based breadcrumbs will be a better fit.

Why Are Breadcrumbs Important To SEO?

A breadcrumb trail helps to boost your SEO because they help improve the usability of your website and they help users to navigate around your website easily. What these navigational improvements mean for your metrics is that users will be more likely to visit more pages than they otherwise would have.

In turn, your bounce rate will improve, your page visits will increase, and search engines will start to attribute your website to quality content because users will not only visit more of your pages, but they'll be spending more time on the pages they do visit because you'll be able to get the content they want to see in front of them easier.

5 Ways Breadcrumbs Can Improve Your SEO

There are more than five ways breadcrumbs can improve your SEO, but these are just the five we've chosen for this resource. To learn more about on-page SEO tactics, head over to our on-page SEO page.

Improved Site Crawling

Using breadcrumb navigation is a great way to improve the crawlability and indexability of your pages. Search engines will see the breadcrumbs and will be able to discover your pages more easily.

Optimized Structured Data

Using Schema breadcrumbs - which is different from breadcrumb navigation - you are able to even more clearly communicate with search engines in terms of the structure of your website. Using Schema breadcrumbs in conjunction with on-page breadcrumbs is a great way to maximize the organizational structure of your content to ensure your pages have the best chance possible of being discovered, crawled, and indexed by Google.

Improved Search Engine Results

In addition to making it easier for the algorithms to discover, crawl, and index your content, you'll also improve the user experience of your content. When improving the user experience, you'll improve your metrics, which will improve where in search results the algorithm decides to place your content.

Optimize Pages For Keywords

Not only will you improve your usability and indexability, but you'll also be able to get another chance to place your keywords in your content in a non-spammy and completely useful, natural, and beneficial way.

Improve Bounce Rates

We've said this a few times in this article already, but breadcrumbs will help you get other content on your website in front of your users that they might have otherwise never found. By utilizing breadcrumbs, they will see the structure of your URLs, and if they are interested in learning more, they will know - based on your breadcrumbs - where the information they might want can be found.

To understand more about bounce rates and why it is important to improve them, check out our page that walks you through everything you need to know about bounce rate.

5 Ways Breadcrumbs Can Improve Your User Experience

These are five ways you can improve the experience your users have while visiting your website. These aren't the only ways breadcrumbs can help, but these are five important ways to leave your users feeling confident in and satisfied with your content.

Improved Navigation

When visiting a page, users won't inherently know what pages you have made already, so with breadcrumbs, you can help direct them to other potential areas of interest. If they want to learn more about a specific topic, they can easily find their way there with breadcrumb navigation.

Reduced Clicks

Breadcrumb navigation helps users not only understand your website more clearly but also makes it easier for them to get around your website as well. With this type of navigation, they will be able to instantly jump to pages that are the most important and relevant to them.

If they are on a specific page, they are there for a reason, and if they don't find what they are looking for, breadcrumbs will be a great way to direct them elsewhere.

Improved Understanding

Breadcrumbs help users understand what they might find on your website and where they might find it. It helps users understand not only what your content is about but also where they can go if they want to dig into the topic in more detail and where they can go if they want to change the course of their journey entirely.

Maximize Accessibility

Breadcrumbs provide a clear navigation structure that screen readers and keyboard navigation can easily use. It provides visual clarity, allows fewer clicks to get around, and it is consistent. All of the benefits listed help to improve accessibility for a variety of individuals with disabilities of all kinds.

Improves Consistency

If done properly, breadcrumbs provide a site-wide consistency that is an amazing way to improve usability. Your users will come to know, expect, and rely upon these navigational links. As long as you are consistent with every aspect of your breadcrumbs, your users will benefit greatly from them and will, in turn, improve the metrics that will help increase conversions and rankings.

What Are Some Examples of Breadcrumbs on a Website?

Below, we'll share some images of websites that currently use breadcrumbs to help you get an understanding for what they look like, and where they are often located.

The North Face

Example of the North Face's Breadcrumb Navigation

Here is an example of The North Face and their use of breadcrumbs. Their breadcrumbs use the standard hierarchal structure to display other more generalized content related to the current page of women's insulated & down jackets.

Nordstrom Rack

Example of Nordstrom Rack's Breadcrumb Navigation

Nordstrom Rack is using a hierarchal structure as well to make searching for other men's items easier for their users.

Macy's

Example of Macy's Breadcrumb Navigation

Macy's is using a very simplified hierarchal structure to categorize the various items for their users. Breadcrumb navigation this concise can be good and bad depending on the specific website, but in this case it is very simple and provides the user with very simple choices.

Dick's Sporting Goods

Example of Dick's Sporting Goods Breadcrumb Navigation

Dick's Sporting Goods is also using a hierarchal structure for their breadcrumb organization, however, their structure is much more lengthy and complex than the Macy's example we've just seen. Breadcrumb navigation like this can be a double-edged sword as it is good for navigating, but this structure is also somewhat confusing, and might actually hurt the user experience.

Table of Contents
Devin Pfromm is the owner and project manager for Spirra Digital.
Author

Devin Pfromm

Devin Pfromm has been in SEO, Web Development, and Design for more than a decade. He’s worked with many companies to help them grow their businesses by utilizing various aspects of digital marketing.