Ever find yourself lost on a website? Or have no idea how to get back to a page you were on that had some helpful insights?
This is the beauty of breadcrumb navigation or “breadcrumbs” for short.
What is Breadcrumb Navigation?
Typically, breadcrumb navigation is a text path displayed near the top of the page near the site menu or primary navigation. Depending on the type of breadcrumb, it can show users how the page they are on is categorized on the site or the path the user took to find it.
For example, here’s what breadcrumb navigation looks like on Barnes & Noble’s website:
Breadcrumb navigation is what’s referred to as a “secondary navigation” on a site. Used effectively, breadcrumbs are valuable to both your site visitors and search engines.
For users, these navigational aids can make it easier to find content on your site, help orient them with where they are on your site, and help the users backtrack if needed. For search engines, breadcrumbs tell them how your site is structured.
If you want to provide a better user experience to people coming to your site — and help ensure they don’t get lost once there — leave them some breadcrumbs.
Here are three breadcrumb navigation options:
- Hierarchy-based breadcrumbs
- Path-based breadcrumbs
- Attribute-based breadcrumbs
Hierarchy-Based Breadcrumb Navigation
In almost every article you come across about breadcrumbs, they start with hierarchy-based breadcrumb navigation (also referred to as “location-based breadcrumb navigation”). This is because it’s the most common option, especially for websites that have complex site architecture with more than two levels.
This breadcrumb navigation option follows the architecture or “hierarchy” of your website, making it easy for users to anticipate and find related content.
Consider this example from Target:
As you can see from the example above, hierarchy-based breadcrumb trails start with the broadest top-level category (in this case, Target as a whole) and progresses through more specific, nested subcategories before arriving at the current page. If the user changes their mind, they can easily click on a broader category to find something else.
Path-Based Breadcrumb Navigation
Path-based breadcrumbs (also called “history-based breadcrumbs”) are like the navigation version of the back button on your browser. They reflect the user’s unique path leading to their current page, though typically this path is not displayed in its entirety. This breadcrumb option can help make it easy for site visitors to return to search results, especially on ecommerce sites.
Here is an example from Adidas:
In the example above, Adidas uses a path-based breadcrumb (the “Back” link) to return the user to their search results page. As you can see, it also sits alongside the site’s location-based breadcrumbs. This way, users gain the advantages of both.
Path-based breadcrumbs are often used on interactive pages, such as web forms, as they allow users to go back to the previous step while retaining all of the information they’ve already submitted. Users can then make changes to the submitted information if needed.
Attribute-Based Navigation
Attribute-based breadcrumbs display meta-information about a page or topic in a breadcrumb format. This can be useful when an item falls into multiple separate categories simultaneously, which can be difficult to display in a hierarchy. Attribute-based breadcrumbs are commonly found in e-commerce websites to filter product search results.
Here is an example from apparel retailer Old Navy:
In the above example, the “filters” are actually attribute-based breadcrumbs. Each one relates to a separate, specific attribute of Old Navy’s clothing inventory. With the above string, a user can only see women’s tops that are size small, green, and loose-fitting. However, they could remove any of those filters, or even add more, without needing to move to a different category.
In this example, Old Navy’s website also combines attribute- and hierarchy-based navigation, so that users have the option of viewing an entire category (women’s tops), or filtering more precisely within that category.
Why Breadcrumbs Are Good For SEO
Breadcrumbs offer many SEO benefits, including:
Helping Users & Search Engines Understand How a Site is Organized
Breadcrumbs provide users and search engines with important information about what type of content is available on your site, and how that content is structured. This can help search engines better understand your pages, while also helping site visitors better understand what your site has to offer–encouraging them to stick around for even longer.
Appearing in Search Results
Google tells us they use breadcrumbs to help contextualize the content on your site and place it in more relevant search results. Breadcrumbs are even displayed in the SERPs to help searchers better anticipate the contents of your page when they see it in their results.
Increasing Crawlability & Reducing Bounce Rate
Because breadcrumbs make it easier for users to understand and navigate your site more easily, they can help reduce bounce rate. They also improve the crawlability of your site by creating internal links across pages and categories, both of which could have positive impacts on organic performance.
A tool like Site Audit can help you check your breadcrumbs and crawlability and identify orphaned pages that could be improved using breadcrumb links.
Using Site Audit to Check Your Site’s Breadcrumbs
If you’re using breadcrumb schema, Site Audit’s Markup report can help you verify that it was implemented correctly.
Markup is one of Site Audit’s Thematic Reports. Once you’ve set it up, the Markup report can be found in the Overview tab:
Site Audit recognizes more than 20 structured data items, including BreadcrumbsList. It can tell you how many pages on your site have invalid structured data, or do not include it at all.
Site Audit will also tell you which pages on your site contain invalid structured data–such as breadcrumb schema–and how to fix it.
Using this report, you can quickly target your efforts, and ensure that your breadcrumbs are implemented correctly across your entire site.
Check Your Site’s Breadcrumbs
with the Site Audit Tool
Enhanced Functionality for Browsing & Search
Attribute- and path-based navigation, especially in combination, can help users filter site content, meaning they can find the content they’re looking for more quickly and easily.
Visitors can use attribute-based breadcrumbs as search filters, and path-based breadcrumbs to return to those filtered results after clicking through, which could boost UX, especially on ecommerce sites.
5 Tips for Effective Breadcrumb Navigation
Now that you know what types of breadcrumbs are available and their potential benefits, the next step is to implement them. Below are 5 tips to help you make the most of breadcrumb navigation on your website.
Only Use Breadcrumbs That Make Sense for YOUR Website
Breadcrumbs typically make the most sense if the structure of your content has more than two levels. If you have a flat site structure–where everything is only one click away from the home page–then breadcrumbs probably won’t add any real information or value to your visitors.
Consider the type of content you’re providing on your site and how users are likely to get to it. In most cases, a hierarchy-based system will be the most effective option as it directly reflects how your content is organized.
However, if you’re running an ecommerce site, for example, individual product pages may have many different attributes that are shared across multiple categories (e.g. size, color, brand). In that case, it might also make sense to use a combination of attribute- and path-based breadcrumbs to help users find the products they’re looking for.
Use Breadcrumbs That Meet Your Audience’s Needs
When you’re deciding whether and how to use breadcrumbs, think about how your audience typically interacts with your site. Ask yourself:
- What information is most important for your audience to be able to find?
- Which pages are currently the most and least popular?
- Which pages are the most and least accessible?
If you know of other websites that your audience is likely to spend time on–especially if they’re comparable or in your market–take note of how those sites are organized, and how they use breadcrumbs. This can tell you what your audience might expect to see.
Assuming your website’s content is structured in a logical way, the next step is to make sure your breadcrumbs follow that structure in a clear and consistent way. Here are a few things to watch out for:
- Use a consistent naming convention across all pages.
- Keep your breadcrumbs short, using as few words as possible.
- If possible, use your breadcrumbs to incorporate additional keywords.
- Make sure your breadcrumbs are displayed in a logical order (i.e. location-based breadcrumbs should increase in specificity).
Organize Your Breadcrumbs in a Logical Way
The majority of websites display their breadcrumbs in the top half of the page, generally directly underneath the primary navigation menu, or directly above the page content. For example, IKEA places theirs directly below the primary navigation and search bar:
However, your needs may vary based on your website, what your customers expect, and what’s standard in your industry. If you’re not sure, consider exploring your competitors’ websites to see how they’ve used breadcrumbs in their navigation.
Keep Breadcrumb Design Simple
Breadcrumb design should be as simple and unobtrusive as possible, so as to be useful without distracting the reader from the actual contents of the page. That’s why, on so many websites, they look just like normal text links.
For example, here’s how Nordstrom designed theirs:
Nordstrom’s breadcrumbs are found near the top right corner of the screen, in small but readable font consistent with the rest of their website. Even the separators between the categories are simple. These breadcrumbs are easy to locate and understand but don’t draw any more attention than they absolutely need to.
Benchmark Your Breadcrumbs
Whether you’re adding breadcrumbs to your site for the first time, updating your category names, or adjusting how they are laid out, it’s a smart idea to split-test before you finalize your breadcrumb option. This can help you catch and resolve any potential negative results before they have a major impact (a tool like SplitSignal can help you do this).
Split-tests work better for smaller and more incremental changes, so if you’re making several updates, it’s best to conquer them one at a time. This way, your test can deliver more reliable results, and you can update your website with confidence in your decision.
Enhance Your SEO & UX with Breadcrumbs
Breadcrumb navigation may look simple, but making sure they are working effectively, user-friendly and consistent on every page once they’re added to your site can be more complex.
Tools like Site Audit can help you easily identify technical issues and errors related to your site’s breadcrumbs, schema, crawlability, and more, helping ensure your breadcrumb navigation is boosting your SEO benefits and adding value to those visiting your site.
