Breadcrumb with Schema.org not showing in Google Rich Snippets testing tool

Question

I have tested the Schema.org breadcrumb example with Google Rich Snippets testing tool.

<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>

The result is that it is not recognized by the tool.

So, is there a bug or is there a syntax problem? If so, what is the correct syntax?

Middleclass

Answer 1

Your question is a bit the same with this one How to implement schema.org markup for a breadcrumb?

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>

Escalante

Answer 2

You may use the microdata markup for breadcrumb as suggested in this Google link

It will surely reflect in Google Rich Snippets testing tool.

Hard

Yes, this is the way to do it; at the moment we don't support the current schema.org breadcrumb markup for rich snippets, so you'd need to use one of the other documented formats. w3.org/2011/webschema/track/issues/10 also has some details about the difference. – Travelled

@JohnMueller Will the current schema.org breadcrumb markup ever be supported? The verbosity of both Microdata and Microformats rich snippets versions you have there, are quite detrimental to page speed, and introduce quite some bloat, while the current schema.org breadcrumb is very short and to the point. Or do you have a RDFa Lite support of typeof=breadcrumb in the pipeline that would be less verbose? – Haldane

@Bry I can't comment on what might happen in the future, but from the bug I linked to, I think the schema would need to change first. Once we have a good markup to use, we'll definitely work to support that. – Travelled

Answer 3

Do you have a container element with itemtype="http://schema.org/WebPage"? See the example at http://schema.org/WebPage.

You could also see the question How to implement schema.org markup for a breadcrumb?

Perse

Hi, Yes, I have. If I test example on schema.org, it does NOT work on Google test tool ! – Middleclass

Answer 4

WebPage or MedicalWebPage should be set on the page as itemtype.

Farwell

Answer 5

You can actually start using schema.org based Breadcrumb markup now. Google is supporting it and it's good. You can choose your format JSON-LD (preferable), RDFa, microdata. And another good thing is that you can define multiple breadcrumbs if your products need it, which will usually be the case.

With Microdata support, you can do this:

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://www.yoursite.com">
        <span itemprop="name">Home</span></a>
    <meta itemprop="position" content="1" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://www.yoursie.com/category/books.html">
      <span itemprop="name">Books</span></a>
    <meta itemprop="position" content="2" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://www.yoursie.com/category/books-literature.html">
      <span itemprop="name">Literature & Fiction</span></a>
    <meta itemprop="position" content="3" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://www.yoursie.com/category/books-classics.html">
      <span itemprop="name">Classics</span></a>
    <meta itemprop="position" content="4" />
  </li>
</ol>

Note the usage of position values and it's advised to use ordered list ('ol').

After you do this, you can ask google to show your site name instead of the 'Home' that's at position #1. For achieving that, use this on your homepage:

<head itemscope itemtype="http://schema.org/WebSite">
<title itemprop='name'>Your Site Name</title>
<link rel="canonical" href="http://www.yoursite.com" itemprop="url">

For anything, refer here: https://developers.google.com/structured-data

Vickers