Breadcrumb Navigation Guide - Usability & SEO

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.

What is a Breadcrumb Navigation?

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

• Additional navigation element
• Shorter click paths to navigate through levels of the site
• Builds interest on elements higher up in the site's hierarchy
• Can lead to stronger user engagement

Technical benefits

• Adds an additional navigation path that takes little space on the site
• Can be utilized to lower the amount of crawl levels on the site
• Foundation to enhance snippets in search engine result pages with breadcrumb listings

When to use a Breadcrumb Navigation?

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.

How to implement a Breadcrumb Navigation

Implementing breadcrumbs can be done with simple HTML/XHTML markup.

Example HTML markup for a Breadcrumb Trail

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> &gt; 
<a href="/furniture/">furniture</a> &gt; 
<a href="/furniture/tables/">Tables</a> &gt; Kitchen Table

Separate with easy characters

In order to separate the breadcrumbs items, it is suggested to use simple characters like

• > or >> or variations of this like › (aka french quotation mark) and »
• / or //

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.

Structured Data & 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:

• Microdata
• RDFa
• JSON-LD

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

Usable Structured Data Properties in a Breadcrumb Navigation

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:

• Item
• Name
• Position

Example Breadcrumbs Markup using Microdata

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">&gt;</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">&gt;</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 Markup using RDFa

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">&gt;</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">&gt;</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 Markup using JSON-LD

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>

How to test your Structured Data Implementation

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.

Types of Breadcrumb Navigation

Technical Thoughts about Breadcrumbs

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:

• Do you want a consistent breadcrumb trail?
• Do you want to use unique URLs for each product or multiple URLs depending on categorization?
• Will the user path be synchronized with the breadcrumb trail?

Consistent and inconsistent Breadcrumb Trail

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

Unique or multiple URLs?

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

• One unique URL
• Multiple URLs depending on the category

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.

Example one unique URL

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

Example multiple URLs depending on Category

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

User Path synchronized with the Breadcrumb Trail

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

Conceptual Differences in Breadcrumbs

There are three basic ways to define the breadcrumb logic: Based upon location, path, or attributes.

Location-based breadcrumb navigation

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:

• Easy to implement
• User can easily determine current position within the sites hierarchy

Contra:

• Breadcrumb trail might become inconsistent, depending on site structure

Requirements:

• Requires to organize information structure in a logical way

Attribute-based Breadcrumb Navigation

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:

• Can offer better usability than location-based breadcrumbs

Contra:

• Might result in a very long breadcrumb trail
• Might result in a different order for the breadcrumbs

Requirements:

• Requires to define default categories in multiple categories

Mixed Breadcrumb Navigation

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:

• Offers better usability than location-based breadcrumbs on large e-commerce sites
• More internal links point to attribute pages

Contra:

• Breadcrumb trail might become inconsistent, depending on the site's structure
• Might result in a even longer breadcrumb trails
• Might result in a different order for the breadcrumbs

Path-based Breadcrumb Navigation

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:

• Does not require any specific site structure

Contra:

• Unpredictable breadcrumb trail
• Breadcrumbs can not be cached
• Breadcrumbs needs to be stored in session for each user
• Volatile and unpredictable internal links for search engine robots crawling random paths when bots get a session (e.g. ip-based)
• User cannot determine the current position within the site's hierarchy

Practical Solution

We suggest choosing a breadcrumb implementation that is balanced in terms of effort and estimated gain and is search engine friendly. This means:

Technical Point of View

From technical point of view we suggest:

• Breadcrumbs should be consistent
• Unique URL for each product
• No user path synchronization with breadcrumbs

This solution has the following advantages

• Good user experience
• No duplicate content
• Good balance between effort and gain

If you want to work with multiple URLs, make sure to

• Define a default URL for each product and
• Work with rel=canonical to prevent duplicate content issues

If you want to synchronize the user path with breadcrumbs

• Take your time to define the possible breadcrumb paths and don't use a simple history trail

Conceptual Point of View

From a conceptual point of view we suggest:

• Breadcrumbs should have a location-based root
• Breadcrumbs should have attribute-based middle part
• If you use pathing, define entry points to create a location-based root

Best Practices on Breadcrumbs

Breadcrumbs to lower the Amount of Crawl Levels

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.

Breadcrumbs and Search Snippets

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 and Breadcrumbs

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.

Common Mistakes with Breadcrumb Navigations

Using short Breadcrumbs for deep Site Structures

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.

Using reversed Breadcrumb Trail in the Site's Title

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.

Breadcrumbs FAQ

Should I link the home item in breadcrumb trail?

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.

Should I show the current item in breadcrumb trail?

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.

Should I link the current item in breadcrumb trail?

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!