What are breadcrumbs on a website?

You see them above the title of almost any product page: Home › Women › Shirts › Linen shirt. The name comes from the story of Hansel and Gretel, who dropped crumbs to find their way back. In a store they do two jobs at once. They orient someone who lands on a product page from a search engine without passing through the home page, and they tell Google where in the catalog that page sits. They are navigation and structured data at the same time, and what matters is that they say the same thing in both places.

How they work

What the visitor sees. The W3C, in its accessibility patterns guide, defines breadcrumbs as a list of links to the parent pages of the current page, in hierarchical order. It asks for three things: that the list sit inside a navigation landmark, that the landmark have a label (with aria-label or aria-labelledby) and that the link to the current page carry aria-current="page", so a screen reader announces where you are.⁠^{[1]W3C, WAI-ARIA Authoring Practices Guide. Breadcrumb Pattern} Google describes the same idea from the other side: breadcrumbs indicate the page's position in the site hierarchy, can help it understand and explore the site, and let you go up one level at a time starting from the last crumb.⁠^{[2]Google Search Central. Breadcrumb (BreadcrumbList) structured data}

Which hierarchy they show. This is the decision that goes wrong most. Google recommends that breadcrumbs represent a typical user path to the page, rather than copy the URL structure. There is no need to include the domain level or the page itself, and a page reached by different paths can declare more than one: in Google's example, the same literary awards page hangs from "Books › Science Fiction Novels" and also from "Literature".⁠^{[2]Google Search Central. Breadcrumb (BreadcrumbList) structured data}

What the search engine reads. Breadcrumbs are marked up with the BreadcrumbList type from Schema.org, which the vocabulary defines as an ItemList made up of a chain of linked pages, normally described by their URL and name, and which usually ends at the current page. The position property is what rebuilds the order, starting at 1.⁠^{[3]Schema.org. BreadcrumbList} Google asks for a BreadcrumbList with at least two items of type ListItem, each with three properties: item (the URL of that crumb's page), name (the text the visitor sees) and position (its place in the path, where 1 is the start). The last crumb can go without item: Google then uses the URL of the page that contains it.⁠^{[2]Google Search Central. Breadcrumb (BreadcrumbList) structured data}

What changed in Google. On January 23, 2025, Google stopped showing breadcrumbs in mobile search results, in all languages and regions, because on small screens they got cut off and were not as useful. On mobile, the result's visible URL is reduced to the domain; on desktop it still shows the domain and the breadcrumb path. Google clarified that anyone using the markup does not need to do anything, because it still supports it for desktop results, and that the breadcrumb rich results report in Search Console and the Rich Results Test remain available.⁠^{[4]Google Search Central Blog. Simplifying the visible URL element on mobile search results} Its documentation says it that way today: the feature is available on desktop in all regions and languages where Search is available.⁠^{[2]Google Search Central. Breadcrumb (BreadcrumbList) structured data}

And every crumb is a link. Google uses links as a signal to decide how relevant pages are and to find new pages to crawl, and in general it can only follow a link if it is an <a> element with an href attribute.⁠^{[5]Google Search Central. Link best practices for Google} Breadcrumbs built with buttons that navigate through JavaScript look the same, but a crawler may not follow them.

In a store

The visible path and its markup, one below the other. Fictitious example: the store, the categories and the addresses are made up.

<nav aria-label="Breadcrumbs">
  <ol>
    <li><a href="https://www.example.com/">Home</a></li>
    <li><a href="https://www.example.com/women">Women</a></li>
    <li><a href="https://www.example.com/women/shirts">Shirts</a></li>
    <li>
      <a href="https://www.example.com/calella-linen-shirt" aria-current="page"
        >Calella linen shirt</a
      >
    </li>
  </ol>
</nav>

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Home",
        "item": "https://www.example.com/"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "Women",
        "item": "https://www.example.com/women"
      },
      {
        "@type": "ListItem",
        "position": 3,
        "name": "Shirts",
        "item": "https://www.example.com/women/shirts"
      },
      { "@type": "ListItem", "position": 4, "name": "Calella linen shirt" }
    ]
  }
</script>

You check them position by position: each name is the text of a visible crumb, each item is the address of its link, and the order is the same. The last crumb goes without item, because it is the page you are on. Notice that the product page's URL, /calella-linen-shirt, does not contain /women/shirts, and that is fine: breadcrumbs describe the visitor's path, not the address.⁠^{[2]Google Search Central. Breadcrumb (BreadcrumbList) structured data} If the same shirt is also in the sale section, the product page can declare a second path instead of picking one at random.⁠^{[2]Google Search Central. Breadcrumb (BreadcrumbList) structured data}

On a product page published with Clione, the BreadcrumbList sits inside the same @graph as the Organization, WebSite and Product nodes.

How to check it

1. Read the visible path on a product page and open its source code: every crumb except the last must be an <a> link with an href.⁠^{[5]Google Search Central. Link best practices for Google}
2. Run the URL through the Rich Results Test. It tells you which rich result types it finds, breadcrumbs among them, and with what errors or suggestions.⁠^{[6]Search Console Help. Rich Results Test}
3. Compare crumb by crumb the name, the item and the position of each element with what the visitor sees, and confirm there are at least two.⁠^{[2]Google Search Central. Breadcrumb (BreadcrumbList) structured data}
4. Watch the Search Console breadcrumb report after changing theme or template. Google warns that an increase in invalid items after a change usually points to a template that is not working.⁠^{[2]Google Search Central. Breadcrumb (BreadcrumbList) structured data}
5. Search for your product page on Google from a computer, not a phone: it is where Google still shows the breadcrumb path under the title.⁠^{[4]Google Search Central Blog. Simplifying the visible URL element on mobile search results}

Related concept: internal linking

Breadcrumbs are a form of internal linking, but they are not all of it. Internal linking is the set of links between pages on your own site: the menu, related products, links inside a description and also breadcrumbs. Google reads each link's text as a clue about the destination page, for people and for itself.⁠^{[5]Google Search Central. Link best practices for Google} In breadcrumbs that text is the name of each category page, so a good category name works twice: it orients the visitor and describes the page it points to. What sets breadcrumbs apart from the rest of the linking is their order: they do not show the whole site, as a menu does, but the path to the page you are on.

To keep going, the structured data reading path orders the rest of the terms, and the guide to auditing a product page's structured data includes breadcrumbs in the review of a full product page.