A breadcrumb navigation (or breadcrumb trail) helps users to determine the current location within the site, based on hierarchy, user trail or both.
In this guide we discuss implementation and types of breadcrumb navigation as well as best practices and common mistakes.
Breadcrumbs are usually situated at the top of the site, between top navigation and content headline. They usually consist of a set of links, starting from the highest level of the site, going down one level by another.
Schema.org defines it as:
"A set of links that can help a user understand and navigate a website hierarchy."
Example - breadcrumbs
Home > Furniture > Tables > Kitchen Table
User experience benefits
Technical benefits
A breadcrumb navigation can benefit users and site structure on any site with more than two elements in the breadcrumbs.
Large and complex sites with a lot of content levels can highly benefit from well defined breadcrumbs. Common use cases are e-commerce sites with a lot of products, categories and faceted search, as well as category-heavy information sites.
Implementing breadcrumbs can be done with simple HTML/XHTML markup.
Let's say you want to create a breadcrumb trail like this:
Home > Furniture > Tables > Kitchen Table
A simple HTML markup to create it might look like this:
<a href="/">Home</a> > <a href="/furniture/">furniture</a> > <a href="/furniture/tables/">Tables</a> > Kitchen Table
In order to separate the breadcrumbs items, it is suggested to use simple characters like
Using these characters adds to familiarity and therefore user experience.
Single characters should be used preferably. It is not important which of these separation character you select. Just stick to one thing and don't mix it up.
Think about the user when implementing your breadcrumbs.
If you want to make sure search engines understand your breadcrumbs, you should use the schema.org vocabulary and one of the following structured data formats to help search engines understand your breadcrumbs:
The advantage of applying this to your breadcrumbs is that search engines are more likely to add your breadcrumbs to snippets for your site in the search results.
Example - breadcrumbs in search snippet
The structured data format properties for breadcrumbs are defined by schema.org BreadcrumbList.
Search engines usually use the following properties to generate breadcrumb listings in search snippets:
Example breadcrumbs:
Home > Furniture > Kitchen
<ol itemscope itemtype="http://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="https://example.com/"> <span itemprop="name">Home</span></a> <span itemprop="position" content="1">></span> </li> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="https://example.com/furniture/"> <span itemprop="name">Furniture</span></a> <span itemprop="position" content="2">></span> </li> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="https://example.com/arts/furniture/kitchen/"> <span itemprop="name">Kitchen</span></a> <span itemprop="position" content="3"></span> </li> </ol>
Example breadcrumbs:
Home > Furniture > Kitchen
<ol vocab="http://schema.org/" typeof="BreadcrumbList"> <li property="itemListElement" typeof="ListItem"> <a property="item" typeof="WebPage" href="https://example.com/"> <span property="name">Home</span></a> <span property="position" content="1">></span> </li> <li property="itemListElement" typeof="ListItem"> <a property="item" typeof="WebPage" href="https://example.com/furniture/"> <span property="name">Furniture</span></a> <span property="position" content="2">></span> </li> <li property="itemListElement" typeof="ListItem"> <a property="item" typeof="WebPage" href="https://example.com/furniture/kitchen/"> <span property="name">Kitchen</span></a> <span property="position" content="3"></span> </li> </ol>
Example breadcrumbs:
Home > Furniture > Kitchen
<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "item": { "@id": "https://example.com/", "name": "Home" } },{ "@type": "ListItem", "position": 2, "item": { "@id": "https://example.com/furniture/", "name": "Furniture" } },{ "@type": "ListItem", "position": 3, "item": { "@id": "https://example.com/furniture/kitchen/", "name": "Kitchen" } }] } </script>
Whatever structured data format you chose to specify your breadcrumbs, you can verify it with the Google Structured Data Testing Tool.
It will validate your structured data markup and point out errors. Invalid structured data markup may lead search engines to ignore your breadcrumb specifications.
Before we look at the possible logics of breadcrumb navigations, let's take a look at the technical differences that depend on your sites structure and your URL structure.
Planning your breadcrumbs, you will get to a point at which you have to make some decisions:
A breadcrumb trail is consistent, if it is not "jumpy". That means, with every click on a link that leads to a deeper content level, the breadcrumbs get enhanced by one level.
Example for consistent breadcrumb trail:
The user enters the site on the landing pages for kitchens. The breadcrumbs looks like this
home > furniture > kitchen
The next click leads you to a product page "kitchen tables". Now the breadcrumb trail looks like this
home > furniture > kitchen > kitchen table
Example for inconsistent breadcrumb trail
User enters the site on the landing pages for kitchens. The breadcrumbs looks like this
home > furniture > kitchen
The next click leads to a product page "kitchen tables". Now the breadcrumb trail looks like this
home > products > kitchen table xy
Example for consistent breadcrumb trails with multiple category architecture:
User has clicked through categories "furniture", "kitchen" and "tables" and then selected the product
home > furniture > kitchen > tables > kitchen table xy
User has found the product on any other way
home > products > kitchen table xy
A major challenge can be found in creating an information architecture that is search engine friendly when products are in multiple categories.
The product can be accessible via
Both approaches can create a positive user experience - depending on what you are trying to do. But both approaches have downsides as well, that need to be addressed in a different fashion, if you want to provide best user experience and at the same time please the search engines.
If your product has a unique URL, you avoid duplicate content issues. The downside to this approach is, that your breadcrumbs might be jumpy if you don't implement a more sophisticated algorithm to make the breadcrumbs behave consistent for the user.
Category-URLs:
http://example.com/furniture/kitchen/ http://example.com/furniture/tables/
Product-URL:
http://example.com/procuct/kitchen-table-xy
If you have multiple URLs for a product, this may lead to duplicate content issues. In this case you need to define a default version and assign rel=canonical with a target URL pointing to the products default URL on all your product pages.
Category-URLs:
http://example.com/furniture/kitchen/ http://example.com/furniture/tables/
Product-URLs:
http://example.com/furniture/kitchen/kitchen-table-xy http://example.com/furniture/tables/kitchen-table-xy
The most consistent user experience is achieved, if the user path is incorporated into the breadcrumb trail.
Examples:
User has looked at a featured items box and then selected the product
home > kitchen > featured items > kitchen table xy
User has used the manufacturer filter for "Best Tables Inc" and then selected the product
home > kitchen > Best Tables Inc > kitchen table xy
User has found the product on any other way
home > products > kitchen table xy
There are three basic ways to define the breadcrumb logic: Based upon location, path, or attributes.
A common usage of breadcrumbs are location-based breadcrumbs. Location-based breadcrumbs show the current position within the site's hierarchy and enable the user to quickly navigate through levels of the site.
In location-based breadcrumbs, the hierarchic structure is in sync with the breadcrumbs.
Example:
URL
http://example.com/tables/kitchentable-oak/
Breadcrumb Path
Home > tables > kitchen table oak
Pro:
Contra:
Requirements:
Attribute-based breadcrumbs allow to enhance the breadcrumb trail with attributes of the current content.
Attribute-based breadcrumbs act independent from the site's hierarchy and therefore require more technical effort to be implemented correctly.
Example:
URL
http://example.com/tables/kitchentable-oak/
Breadcrumb Path
Home > oak > large > kitchen table oak
Pro:
Contra:
Requirements:
Mixed breadcrumbs are a combination of location-based breadcrumbs and attribute-based breadcrumbs. The location-based part is often taken from the main category, the attribute-based part is taken from selected filters or attributes of content.
Example:
URL
http://example.com/tables/kitchentable-oak/
Breadcrumb Path
Home > furniture > kitchen > tables > oak (x) > large (x) > kitchen table oak
Pro:
Contra:
A less common way to set up breadcrumbs is to make them path-based. In simple path-based breadcrumbs, the breadcrumb navigation is a history trail and shows the path the user took through the site.
The root level in this type of breadcrumb would be the landing page that brought the user into the site.
Example:
The user enters over a blog article with the title "Best kitchen furniture", then clicks through to the tables category, selects oak, returns to tables and selects the product.
URL
http://example.com/tables/kitchentable-oak/
Breadcrumb Path
Best kitchen furniture > tables > oak > tables > kitchen table oak
Pro:
Contra:
We suggest choosing a breadcrumb implementation that is balanced in terms of effort and estimated gain and is search engine friendly. This means:
From technical point of view we suggest:
This solution has the following advantages
If you want to work with multiple URLs, make sure to
If you want to synchronize the user path with breadcrumbs
From a conceptual point of view we suggest:
Breadcrumbs in combination with deep links into the lowest level can be very effective to lower the amount of crawl levels and therefore create a more dense site structure.
Example:
You have a site with 6 levels under the root level. If you put a link from the root level to 6th level content with breadcrumbs, you lower the crawl level and click depth of all content on levels 3-6.
Home | Level 1 | Level 2 | Level 3 | Level 4 | Level 5 | Level 6 | |
---|---|---|---|---|---|---|---|
Level before | 0 | 1 | 2 | 3 | 4 | 5 | 6 |
Level after | 0 | 1 | 2 | 2 | 2 | 2 | 1 |
As mentioned above, search engines are likely to show breadcrumbs in search results, if they can identify them on the site. But search snippets offer only limited space. So in case the breadcrumbs are too long, search engines have to shorten them in the search results.
Usually the first elements of the trail under the root page are left out and only the last two elements are shown. It is important to keep these last two items relevant to the user, to improve click rate from the search results.
We suggest to use categorization over attribution for the last two crawlable items in your breadcrumbs.
Example categorized breadcrumbs in search snippet
Home > … > Kitchen > Tables
Example attribute based breadcrumbs in search snippet
Home > … > oak > large
Pagination should be represented in the breadcrumbs as well. If you have paged content, you should add the first element and the current element of the paginated content in your breadcrumbs.
Example:
Home > Furniture > Kitchen > Tables > Page 3
The link "Tables" links to the first element of the paged content "Tables" and allows the user to jump back to the start of the pagination.
Adding the pagination to your breadcrumbs also creates relevant internal links to the starting document of your paginated content. This can help to make it more relevant for search engines.
You can find an in-depth discussion on pagination in our Ultimate Pagination Guide.
If the breadcrumb trail is too short on a site with many legit levels of information, the breadcrumbs will not be as effective in order to create a more dense site structure.
We suggest you design your breadcrumbs in a way that helps reduce crawl levels. This can help your Crawl Rate Optimization.
In some cases webmasters add the breadcrumb trail in the website HTML title. This can easily get out of hand and lead to title lengths that do not get supported by search engines and will be shortened in the search results.
We do not suggest to use the breadcrumb trail in the site's HTML title.
If you have a home item shown in your breadcrumb trail, we suggest to link to it in order to keep the user experience consistent.
From a SEO point of view and to keep breadcrumbs shorter on large sites, you can also spare out the home page element and start with the first level. This complements your effort on having the most relevant breadcrumbs shown in search engines.
From a technical SEO point of view there is no difference whether with or without the current item shown in the breadcrumbs.
Website owners on sites with large audience can A/B test which way leads to better user interaction.
If you decide to show the current item in the breadcrumb trail, the next question usually is whether the current item should be linked to or not.
This question can be answered from both technical and usability point of view:
From a usability perspective a user might get confused when clicking on a link that leads to the same document again. This is basically a refresh of the site and might lead to bouncing users, even though you get an additional page impression.
From SEO perspective, the link does not add any value to the internal link graph.
In addition there are guidelines for providing breadcrumbs within the Techniques and Failures for Web Content Accessibility Guidelines 2.0 from the W3C that suggest not to implement the current location as a link in a breadcrumb.
We suggest not to link to the current item in the breadcrumb trail!