Demac Media Demac Media Brand Demac Media Brand

Blog

Subscribe

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

Timer Icon 3 Mins

Conversion Optimization, Design & User Experience, Development, Magento Commerce, Marketing, Shopify Commerce

“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?

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:

Aw Yiss – Breadcrumbs!

SEO breadcrumb trail, shopify, site navigation

Subscribe to the Blog

Stay updated with 20,000+ eCommerce leaders in our community

Sign Up

Let’s talk about your 10X return

Icon/Social/Phone Contact us for pricing information