How to implement schema.org markup for a breadcrumb?
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!
Answer
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.