Rich snippets - Breadcrumbs

Note: This article describes an experimental format. Depending on feedback and on other available markup standards, it may be modified or replaced in the future.

About breadcrumbs

A breadcrumb trail is a set of links (breadcrumbs) that can help a user understand and navigate your site's hierarchy, like this:

Pages can have more than one breadcrumb trail. For example:

When you mark up breadcrumb information in the body of a web page, Google can identify it and use it to understand and present the information on your pages in our search results.

Properties

Breadcrumbs can contain a number of different properties which you can label using microdata or RDFa markup. Google recognizes the following breadcrumb properties.

Property Description
title The title of a breadcrumb.
url The URL of a breadcrumb.
child The next breadcrumb in the hierarchy. The child must be another Breadcrumb item.

The following HTML code describes a breadcrumb trail for a product page on a women's clothing site.

  <a href="http://www.example.com/dresses">Dresses</a> › 
  <a href="http://www.example.com/dresses/real">Real Dresses</a> › 
  <a href="http://www.example.com/dresses/real/green">Real Green Dresses</a> 

This set of breadcrumbs will appear on the page like this:

DressesReal DressesReal Green Dresses

The following sections describe how to mark up this content using microdata or RDFa.

Microdata

Here is the same HTML code marked up with microdata:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses" itemprop="url">
    <span itemprop="title">Dresses</span>
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses/real" itemprop="url">
    <span itemprop="title">Real Dresses</span>
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
    <span itemprop="title">Real Green Dresses</span>
  </a>
</div>

Here's how this sample works:

  • On the first line of each <div>, <itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> indicates that the HTML enclosed in the <div> describes a breadbrumb. itemscope indicates that the content of the <div> describes an item, and itemtype="http://data-vocabulary.org/Breadcrumb" indicates that the item is a breadcrumb.
  • The sample describes properties of the item, such as its title and URL. To label properties, each element containing one of these properties (such as <div> or <span>) is assigned an itemprop attribute indicating a property. For example, <span itemprop="url">.
  • Each breadcrumb item should appear in order, with the first item representing the top-level page, and the final item representing the parent of the current page.

If a page has multiple breadcrumb trails

If your page contains only a single breadcrumb trail, Google will use the order of items as they appear on your page. However, if your page contains more than one breadcrumb trail, you must indicate the breadcrumb trail to which each breadcrumb belongs. To do this, use the child property to specify the next item in the hierarchy, like this:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/books" itemprop="url">
    <span itemprop="title">Books</span>
  </a> ›
  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/books/authors" itemprop="url">
      <span itemprop="title">Authors</span>
    </a> ›
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/books/authors/stephenking" itemprop="url">
        <span itemprop="title">Stephen King</span>
      </a>
    </div>
  </div>
</div>

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/books" itemprop="url">
    <span itemprop="title">Books</span>
  </a> ›
  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/fiction" itemprop="url">
      <span itemprop="title">Fiction</span>
    </a> ›
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/books/fiction/horror" itemprop="url">
        <span itemprop="title">Horror</span>
      </a>
    </div>
  </div>
</div>

RDFa

​Here is the same HTML content marked up with RDFa.

<div xmlns:v="http://rdf.data-vocabulary.org/#">
   <span typeof="v:Breadcrumb">
     <a href="http://www.example.com/dresses" rel="v:url" property="v:title">
      Dresses
    </a> ›
   </span>
   <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/dresses/real" rel="v:url" property="v:title">
      Real Dresses
    </a> ›
   </span>
   <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/dresses/real/green" rel="v:url" property="v:title">
      Real Green Dresses
    </a> ›
   </span>
</div>

Here's how this sample works.

  • The example begins with a namespace declaration using xmlns. This indicates the namespace where the vocabulary (a list of entities and their components) is specified. Be sure to use a trailing slash and # (xmlns:v="http://rdf.data-vocabulary.org/#" ).
  • Each breadcrumb is identified by typeof="v:Breadcrumb".
  • The breadcrumb name is identified using the title property, prefixed with v:, like this: <span property="v:title">. The rel attribute indicates that the link is that breadcrumb's URL. The property attribute should be specified in the <a> element rather than nested inside it, like this: <a href="books.html" rel="v:url" property="v:title">Books</a>.
  • Each breadcrumb item should appear in order, with the first item representing the top-level page, and the final item representing the parent of the current page.

If a page has multiple breadcrumb trails

If your page contains only a single breadcrumb trail, Google will use the order of items as they appear on your page. However, if your page contains more than one breadcrumb trail, you must indicate the breadcrumb trail to which each breadcrumb belongs. To do this, use the child property to specify the next item in the hierarchy, like this:


<div xmlns:v="http://rdf.data-vocabulary.org/#"> 
  <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/books" rel="v:url" property="v:title">
      Books
    </a> ›
    <span rel="v:child">
      <span typeof="v:Breadcrumb">
        <a href="http://www.example.com/books/authors" rel="v:url" property="v:title">
          Authors
        </a> ›
        <span rel="v:child">         
          <span typeof="v:Breadcrumb">
            <a href="http://www.example.com/books/authors/stephenking" rel="v:url" property="v:title">
              Stephen King
            </a> ›          
          </span>
        </span>
      </span>
    </span>
  </span>
</div>

<div xmlns:v="http://rdf.data-vocabulary.org/#"> 
  <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/books" rel="v:url" property="v:title">
      Books
    </a> ›
    <span rel="v:child">
      <span typeof="v:Breadcrumb">
        <a href="http://www.example.com/books/fiction" rel="v:url" property="v:title">
          Fiction
        </a> ›
        <span rel="v:child">         
          <span typeof="v:Breadcrumb">
            <a href="http://www.example.com/books/fiction/horror" rel="v:url" property="v:title">
              Horror
            </a> ›          
          </span>
        </span>
      </span>
    </span>
  </span>
</div>