How to implement schema.org markup for a breadcrumb?

xhtml breadcrumbs schema.org

51,285

Solution 1

schema.org finally released a new breadcrumb markup system in the schema.org v1.92 update (released 2014-12-11). The new breadcrumb system is an extension of ItemList called BreadcrumbList. Each BreadcrumbList contains multiple ListItem elements. This allows for multiple breadcrumb trails per page, separation of each individual link as a separate ListItem, and provides a wrapper around the entire breadcrumbs. This should satisfy pretty much every use case.

Here is the Microdata example from schema.org:

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">
    <span itemprop="name">Dresses</span></a>
    <meta itemprop="position" content="1" />
  </li>
› <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

Google's recently redesigned Structured Data Testing Tool parses this markup properly. However, the redesign of the tool dropped the search preview, so it's difficult to say how Google will display breadcrumbs with this markup in Google search results (or if Google will use this data at all). The linter.structured-data.org parses this new markup correctly as well, but as mentioned there, "This preview is only shown as a example of what a search engine might display. It is to the discretion of each search engine provider to decide whether your page will be displayed as an enhanced search result or not in their search results pages."

Google Webmaster Tools recently added the ability to track how well your structured data is being indexed. It doesn't show which structured data is being used in search results, but it does show what data is being indexed on which pages, and also shows any errors in your structured data.

Solution 2

The first document is the definition, so don't worry about that. It just says that breadcrumb is a text property of WebPages.

The example on http://schema.org/WebPage is the one you want to use and understand. It sets the breadcrumb snippet to a single text field saying "Books > Literature & Fiction > Classics".

You would do that like this:

<body itemscope itemtype="http://schema.org/WebPage">
  <span id="breadcrumbs" itemprop="breadcrumb">
      <a rel="home" href="http://example.com">
          <span>Noob Archive</span>
      </a> » 
      <span>
          <a href="http://example.com/topic/html/">
              <span>HTML</span>
          </a> » 
          <strong>Best Practices: Markup for Setting up Breadcrumbs on Web Pages</strong>
      </span>
  </span>
</body>

The result would be "Noob Archive » HTML » Best Practices: Markup for Setting up Breadcrumbs on Web Pages".

You can use http://linter.structured-data.org/ to check how your item properties are parsed and http://diveintohtml5.ep.io/extensibility.html to find out more about the parse rules.

Solution 3

The answer by @somori is incorrect -- but that is because the documentation on correctly marking up breadcrumbs with microdata / schema.org is widely incorrect.

EACH breadcrumb needs to be declared with an itemprop property, you can't just wrap them with itemprop="breadcrumb" in the containing div or span and use itemprop="child" in the nested divs.

More info here:

http://lists.w3.org/Archives/Public/public-vocabs/2012Jan/0016.html

Do it like this, to get your breadcrumbs to show up in SERPs:

<div class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">

  <span class="breadcrumb-lead">YOU ARE HERE:</span><a title="Go to %title%." href="%link%" class="%type%" itemprop="url"><span itemprop="title">Homepage</span></a>

  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;"><a title="Go to %title%." href="%link%" class="%type%" itemprop="url"><span itemprop="title">Category One</span></a></div>

  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;"><a title="Go to %title%." href="%link%" class="%type%" itemprop="url"><span itemprop="title">Category Two</span></a></div>

</div>

Then test in google structured data testing tool:

http://www.google.com/webmasters/tools/richsnippets

Solution 4

According to Google Webmaster Central Help Forum, it is not recommended by experts to use the schema.org breadcrumb markup for the time being,it's seems that "there is some sort of glitch in the schema.org breadcrumb structure". Instead, it is exhorted to use the data-vocabulary.org breadcrumb markup, which Google and the other search engines can easily read as well.

A data-vocabulary.org Breadcrumb markup example:

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

Solution 5

   itemscope itemtype="...">

Is invalid in an xhtml page.

The correct syntax is:

   itemscope="itemscope" itemtype="...">

View more solutions

51,285

Author by

its_me

Updated on February 01, 2020

Comments

its_me about 4 years

There isn't much info about implementing a breadcrumb using schema.org markup. So far, I could get two official documents -- one showing this:

<div itemscope itemtype="http://schema.org/Property" itemid="http://schema.org/breadcrumb">
   <link itemprop="domain" href="http://schema.org/WebPage"/>
   <link itemprop="range" href="http://schema.org/Text"/>
</div>

And another showing this:

<body itemscope itemtype="http://schema.org/WebPage">
  <div itemprop="breadcrumb">
    <a href="category/books.html">Books</a> >
    <a href="category/books-literature.html">Literature & Fiction</a> >
    <a href="category/books-classics">Classics</a>
  </div>
</body>

The two markups are quite different. Do they make any sense to you? If they do, how do I enclose the following plain breadcrumb code with that markup -- the RIGHT WAY?

<body>
  <span id="breadcrumbs">
      <a rel="home" href="http://example.com">
          <span>Noob Archive</span>
      </a> » 
      <span>
          <a href="http://example.com/topic/html/">
              <span>HTML</span>
          </a> » 
          <strong>Best Practices: Markup for Setting up Breadcrumbs on Web Pages</strong>
      </span>
  </span>
</body>

Thanks!

Xarcell about 11 years

He asked about schema.org not data-vocabulary. You are right in a sense, but also wrong.
Brady Moritz about 11 years

data-vocabulary is the outdated predecessor to schema.org
its_me about 11 years

@boomhauer data-vocabulary is not exactly outdated yet.
Brady Moritz about 11 years

it still works, but go to data-vocabulary.com and it's pretty clear that schema.org is the replacement for it. So, for new work I would assume one should use the latest.
s3m3n almost 11 years

Answer is incorrect, google parser says that itemprop="title" is: Error: Page contains property "title" which is not part of the schema.
ElHaix over 10 years

What about not linking to the current page? Assuming that Category Two is the current page, shouldn't that not be a link?
dafyk over 10 years

rel="home" is not defined by schema.org. For a better example take a loot at W3C wiki
zonzon about 10 years

The above code doesn't display breadcrumbs in google.com/webmasters/tools/richsnippets
Evgeniy over 9 years

this is correct answer! Schema.org markup doesn't generate visual rich sippets, at least through testing tool
transformerTroy over 9 years

This should be the #1 answer.
volume one about 9 years

This can't be correct. Google says Breadcrumb is not a valid target type for the Breadcrumb/child property.
Frug over 8 years

Google's testing tool now properly parses the above example.
thirdender over 8 years

Nice :-) Although they completely redesigned the Structured Data Testing Tool, and it no longer shows the search result preview. The new tool looks and works similar to the linter.structured-data.org tool. Answer has been updated to reflect this.
Claudiu almost 7 years

data-vocabulary.org is abandoned. Schema.org is the standard.