Menu
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!
432
The BreadcrumbList is created by connecting the "itemListElement" property to as many ListItem data items as there are breadcrumbs. To add ListItems, click into the "itemListElement" property, and click "Add Data Item...". Ensure the type is set to "ListItem"and provide a name.
A set of links that can help a user understand and navigate a website hierarchy.
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.
153
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.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
