How to Quickly Improve Site Navigation for Users with Breadcrumb Trails!

“And Hansel said to Gretel, “Let us drop these breadcrumbs so that together we find our way home because losing our way would be the most cruel of things.”
-Lucas Scott, One Tree Hill

Breadcrumb trails enhance the way users navigate the site hierarchy. They answer the questions “Where am I?” and “Where can I go?” They reveal the user’s location in a website or web application. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the fairy tale of the same name.

Why use breadcrumb trails?

  • help users visualize their current location
  • never cause problems in user testing
  • reduce extra actions to return users to higher level pages
  • take up minimal space
  • reduce bounce rates
  • consistent, familiar, and useful
  • good for SEO

The Importance of Breadcrumb Trails

Let’s focus on that last point. Google gives a lot of importance to breadcrumbs. In 2009 Google launched a search results enhancement called “rich snippets”. It uses structured data from web pages to display extra details about pages in the results.

Structured data is a standardized format for providing information about a page. Schema.org offers a common format for structured data markup on web pages. Besides Google, it is also recognizable by Bing, Yahoo! and Yandex.

Google uses breadcrumb markup to generate breadcrumb rich snippets in the search results. Google also provides a Structured Data Testing Tools. It checks that Google can parse your markup and display it in search results.

The following code snippet is an abridged version of the breadcrumb markup we use for our clients. It uses the BreadcrumbList schema markup.

<nav role="navigation" aria-label="breadcrumbs">
  <ol itemscope="" itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="breadcrumb">
      <a itemscope="" itemtype="http://schema.org/Thing" itemprop="item" href="https://myawesomestore.com" class="breadcrumb__link">
        <span itemprop="name">Home</span>
      </a>
      <meta itemprop="position" content="1">
    </li>
    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="breadcrumb">
      <span class="breadcrumbs__separator" aria-hidden="true"> / </span>
      <a itemscope="" itemtype="http://schema.org/Thing" itemprop="item" href="/collections/helmets" class="breadcrumb__link">
        <span itemprop="name">Collection of Magical Item</span>
      </a>
      <meta itemprop="position" content="2">
    </li>
    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="breadcrumb">
      <span class="breadcrumbs__separator" aria-hidden="true"> / </span>
      <span itemprop="name">Unicorn</span>
      <meta itemprop="position" content="3">
    </li>      
  </ol>
</nav>

Here’s an example of what this code will generate in Google Search Results

SEO breadcrumb trail, shopify, site navigation

When designing a breadcrumb navigation, make sure to keep following things in mind:

  • don’t use breadcrumbs as a replacement for the primary navigation
  • don’t link to the current page
  • use separators
  • use breadcrumbs consistently
  • breadcrumbs should progress from the highest level to the lowest

Aw Yiss – Breadcrumbs!

SEO breadcrumb trail, shopify, site navigation