Breadcrumbs

Breadcrumb trails are a powerful navigational aid enabling your users to quickly navigate your site’s hierarchy.

For example, your site may be structured like this:

Contoso»Fashion»Women»Boots

The last breadcrumb in the trail represents the user’s current location in your site’s hierarchy.

The addition of one or more breadcrumb trails to your pages enables Bing to get a better understanding of your site’s structure, and enables us to incorporate this structure into our search results.

Marking It Up

Individual breadcrumbs in the breadcrumb trail contain two or three required properties, depending on your content:

 

Item property

Microdata

RDFa

Description

URL

url

url

Required. The URL of the breadcrumb. The URL is required to have a valid syntax.

Title

title

title

Required. The title of the breadcrumb.

Child

child

child

Required when displaying multiple breadcrumb trails. The child item property denotes the next breadcrumb in the breadcrumb trail.

Note that within the breadcrumb trail, you are free to use a breadcrumb separator of your choice (both textual separators as well as graphical elements can be used), or none at all.

Breadcrumbs will be displayed in the order they appear in your pages’ source code.

Microdata

Example 1: A single breadcrumb trail.

<div> <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.contoso.com/" itemprop="url"> <span itemprop="title">Contoso</span> </a> » </span> <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.contoso.com/fashion/" itemprop="url"> <span itemprop="title">Fashion</span> </a> » </span> <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.contoso.com/fashion/women/" itemprop="url"> <span itemprop="title">Women</span> </a> » </span> <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.contoso.com/fashion/women/boots/" itemprop="url"> <span itemprop="title">Boots</span> </a> </span> </div>

The output for this example will look like this:

Contoso>Fashion>Women>Boots

Breaking It Down

In this example, the first line defines the item type through the vocabulary (itemtype=http://data-vocabulary.org/Breadcrumb). For each breadcrumb in the trail, the syntax defines a URL (itemprop="url") and a title (itemprop="title"). We use the right-pointing double angle quotation mark (») as the breadcrumb separator.

Since the example generates a single breadcrumb trail, we can safely omit the child item property.

Example 2: Multiple breadcrumb trails.

<!-- First breadcrumb trail --> <div> <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.contoso.com/" itemprop="url"> <span itemprop="title">Contoso</span> </a> > <span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.contoso.com/fashion/" itemprop="url"> <span itemprop="title">Fashion</span> </a> > <span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.contoso.com/fashion/women/" itemprop="url"> <span itemprop="title">Women</span> </a> </span> </span> </span> </div> <!-- Second breadcrumb trail --> <div> <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.contoso.com/" itemprop="url"> <span itemprop="title">Contoso</span> </a> > <span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.contoso.com/clothing/" itemprop="url"> <span itemprop="title">Clothing</span> </a> </span> </span> </div>

The output for this example will look like this:

Contoso>Fashion>WomenContoso>Clothing

Breaking It Down

In this example, we use a nested structure in combination with the child item property to associate breadcrumbs with the appropriate breadcrumb trail. The use of the child item property is required when displaying multiple breadcrumb trails. We use the greater-than sign (>) as the breadcrumb separator.

RDFa

Example 1: A single breadcrumb trail.

<div xmlns:v="http://rdf.data-vocabulary.org/#"> <span typeof="v:Breadcrumb"> <a href="http://www.contoso.com/" rel="v:url" property="v:title">Contoso</a> » </span> <span typeof="v:Breadcrumb"> <a href="http://www.contoso.com/fashion/" rel="v:url" property="v:title">Fashion</a> » </span> <span typeof="v:Breadcrumb"> <a href="http://www.example.com/fashion/women/" rel="v:url" property="v:title">Women</a> </span> </div>

The output for this example will look like this:

Contoso»Fashion»Women

Breaking It Down

In this example, the first line declares the namespace (xmlns:v="http://rdf.data-vocabulary.org/#"). For each breadcrumb in the trail (typeof="v:Breadcrumb"), the syntax defines a URL (rel="v:url") and a title (property="v:title") in the same element. Note the prefix referring to the namespace we declared in the first line of the syntax (v:). We use the right-pointing double angle quotation mark (») as the breadcrumb separator.

Since the example generates a single breadcrumb trail, we can safely omit the child item property.

Example 2: Multiple breadcrumb trails.

<!-- First breadcrumb trail --> <div xmlns:v="http://rdf.data-vocabulary.org/#"> <span typeof="v:Breadcrumb"> <a href="http://www.contoso.com/" rel="v:url" property="v:title">Contoso</a> > <span rel="v:child"> <span typeof="v:Breadcrumb"> <a href="http://www.contoso.com/fashion/" rel="v:url" property="v:title">Fashion</a> > <span rel="v:child"> <span typeof="v:Breadcrumb"> <a href="http://www.contoso.com/fashion/women/" rel="v:url" property="v:title">Women</a> </span> </span> </span> </span> </span> </div> <!-- Second breadcrumb trail --> <div xmlns:v="http://rdf.data-vocabulary.org/#"> <span typeof="v:Breadcrumb"> <a href="http://www.contoso.com/" rel="v:url" property="v:title">Contoso</a> > <span rel="v:child"> <span typeof="v:Breadcrumb"> <a href="http://www.contoso.com/clothing/" rel="v:url" property="v:title">Clothing</a> </span> </span> </span> </div>

The output for this example will look like this:

Contoso>Fashion>WomenContoso>Clothing

Breaking It Down

In this example, we use a nested structure in combination with the child item property to associate breadcrumbs with the appropriate breadcrumb trail. The use of the child item property is required when displaying multiple breadcrumb trails. We use the greater-than sign (>) as the breadcrumb separator.

Note that within the breadcrumb trail, you are free to use a breadcrumb separator of your choice (both textual separators as well as graphical elements can be used), or none at all.

Breadcrumbs will be displayed in the order they appear in your pages’ source code.