Breadcrumb

A breadcrumb trail on a page indicates the page's position in the site hierarchy. A user can navigate all the way up in the site hierarchy, one level at a time, by starting from the last breadcrumb in the breadcrumb trail.

Use Cases

Google Search uses breadcrumb markup in the body of a web page to categorize the information from the page in search results. Often, as illustrated in following use cases, users can arrive at a page from very different types of search queries. While each search may return the same web page, the breadcrumb categorizes the content within the context of the Google Search query. The page ancillaryjustice.html might display the following breadcrumb trails depending upon the search context:

Example 1: Search query for book title, Ancillary Justice Books › Authors › Ann Leckie › Ancillary Justice	JSON-LD <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "item": { "@id": "https://example.com/books", "name": "Books", "image": "http://example.com/images/icon-book.png" } },{ "@type": "ListItem", "position": 2, "item": { "@id": "https://example.com/books/authors", "name": "Authors", "image": "http://example.com/images/icon-author.png" } },{ "@type": "ListItem", "position": 3, "item": { "@id": "https://example.com/books/authors/annleckie", "name": "Ann Leckie", "image": "http://example.com/images/author-leckie-ann.png" } },{ "@type": "ListItem", "position": 4, "item": { "@id": "https://example.com/books/authors/ancillaryjustice", "name": "Ancillary Justice", "image": "http://example.com/images/cover-ancillary-justice.png" } }] } </script>
Example 2: Search query for a year and genre-based award, 2014 Nebula Award best novel Books › Science Fiction › Ancillary Justice	Microdata <ol itemscope itemtype="http://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="https://example.com/books"> <span itemprop="name">Books</span> <img itemprop="image" src="http://example.com/images/icon-bookicon.png" alt="Books"/></a> <meta itemprop="position" content="1" /> </li> › <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="https://example.com/books/sciencefiction"> <span itemprop="name">Science Fiction</span> <img itemprop="image" src="http://example.com/images/icon-science-fiction.png" alt="Genre: Science Fiction"/></a> <meta itemprop="position" content="2" /> </li> › <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="https://example.com/books/sciencefiction/ancillaryjustice"> <span itemprop="name">Ancillary Justice</span> <img itemprop="image" src="http://example.com/images/cover-ancillary-justice.png" alt="Ancillary Justice"/></a> <meta itemprop="position" content="3" /> </li> </ol>	RFDa <ol vocab="http://schema.org/" typeof="BreadcrumbList"> <li property="itemListElement" typeof="ListItem"> <a property="item" typeof="WebPage" href="https://example.com/books"> <span property="name">Books</span> <img property="image" src="http://example.com/images/icon-bookicon-.png" alt="Books"/></a> <meta property="position" content="1"> </li> › <li property="itemListElement" typeof="ListItem"> <a property="item" typeof="WebPage" href="https://example.com/books/sciencefiction"> <span property="name">Science Fiction</span> <img property="image" src="http://example.com/images/icon-science-fiction.png" alt="Genre: Science Fiction"/></a> <meta property="position" content="2"> </li> › <li property="itemListElement" typeof="ListItem"> <a property="item" typeof="WebPage" href="https://example.com/books/sciencefiction/awardwinnders"> <span property="name">Award Winners</span> <img property="image" src="http://example.com/images/cover-ancillary-justice.png" alt="Ancillary Justice"/></a> <meta property="position" content="3"> </li> </ol>
Example 3: Multiple breadcrumb trail Books › Science Fiction › Award Winners Literature › Speculative Fiction	Microdata <ol itemscope itemtype="http://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="https://example.com/books"> <span itemprop="name">Books</span> <img itemprop="image" src="http://example.com/images/icon-bookicon.png" alt="Books"/></a> <meta itemprop="position" content="1" /> </li> › <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="https://example.com/books/sciencefiction"> <span itemprop="name">Science Fiction</span> <img itemprop="image" src="http://example.com/images/icon-science-fiction.png" alt="Genre: Science Fiction"/></a> <meta itemprop="position" content="2" /> </li> › <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="https://example.com/books/sciencefiction/awardwinners"> <span itemprop="name">Award Winners</span> <img itemprop="image" src="http://example.com/images/icon-award.png" alt="2014 Award Winner"/></a> <meta itemprop="position" content="3" /> </li> </ol> <ol itemscope itemtype="http://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="https://example.com/literature"> <span itemprop="name">Literature</span> <img itemprop="image" src="http://example.com/images/icon-literature.png" alt="Literature"/></a> <meta itemprop="position" content="1" /> </li> › <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="https://example.com/literature/speculativefiction"> <span itemprop="name">Speculative Fiction</span> <img itemprop="image" src="http://example.com/images/icon-speculative-fiction.png" alt="Genre: Speculative Fiction"/></a> <meta itemprop="position" content="2" /> </li> </ol>	RDFa <ol vocab="http://schema.org/" typeof="BreadcrumbList"> <li property="itemListElement" typeof="ListItem"> <a property="item" typeof="WebPage" href="https://example.com/books"> <span property="name">Books</span> <img property="image" src="http://example.com/images/icon-bookicon-.png" alt="Books"/></a> <meta property="position" content="1"> </li> › <li property="itemListElement" typeof="ListItem"> <a property="item" typeof="WebPage" href="https://example.com/books/sciencefiction"> <span property="name">Science Fiction</span> <img property="image" src="http://example.com/images/icon-science-fiction.png" alt="Genre: Science Fiction"/></a> <meta property="position" content="2"> </li> › <li property="itemListElement" typeof="ListItem"> <a property="item" typeof="WebPage" href="https://example.com/books/sciencefiction/awardwinners"> <span property="name">Award Winners</span> <img property="image" src="http://example.com/images/icon-award-winner.png" alt="2014 Award Winner"/></a> <meta property="position" content="3"> </li> </ol> <ol vocab="http://schema.org/" typeof="BreadcrumbList"> <li property="itemListElement" typeof="ListItem"> <a property="item" typeof="WebPage" href="https://example.com/literature"> <span property="name">Literature</span> <img property="image" src="http://example.com/images/icon-literature.png" alt="Literature"/></a> <meta property="position" content="1"> </li> › <li property="itemListElement" typeof="ListItem"> <a property="item" typeof="WebPage" href="https://example.com/literature/speculativefiction"> <span property="name">Speculative Fiction</span> <img property="image" src="http://example.com/images/icon-speculative-fiction.png" alt="Genre: Speculative Fiction"/></a> <meta property="position" content="2"> </li> </ol>

HTML Example

Insert the HTML breadcrumb block within the page as part of the visual design. The HTML breadcrumb trail for the Guidelines example might be:

    <ol>
      <li>
        <a href="http://www.example.com/books">Books</a> ›
      </li>
      <li>
        <a href="http://www.example.com/sciencefiction">Science Fiction</a>
      </li>
      <li>
        <a href="http://www.example.com/books/sciencefiction/awardwinners">Award Winners</a>
      </li>
    <ol>
    

Guidelines

In addition to the general structured data guidelines, Social Profile markup should create one or more breadcrumb trails without a crumb for the target page if it's possible to find the page within a larger set of search results. Continuing the previous examples, because the search query award winning science fiction novels would find many other pages in addition to ancillaryjustice.html, you might include the breadcrumb trail to reflect the broader search category:

Books › Science Fiction › Award Winners

Type Definitions

Google Search recognizes the following properties of a BreadcrumbList.

Properties
image	URL, optional A URL to an image resource that represents the current crumb.
item	Thing, required An individual crumb in the breadcrumb trail. It contains the @id (a unique URL) and the name property.
name	Text, required The title of the breadcrumb displayed for the user.
position	Integer, required The position of the breadcrumb in the breadcrumb trail. Position 1 signifies the beginning of the trail.