7

Google and other SEs support Schema.org for marking up structured data, but it turns out that for breadcrumbs Google recommends using Data-Vocabulary.org instead.

Which should we use for having breadcrumbs appear in search results?

Breadcrumb rich snippet example in Google SERP

I noticed that there are issues with the Schema.org markup for breadcrumbs, so does that mean it's best not to use it for now?

The code suggested in each is slightly different — so changing from one to the other site-wide in the future could be a nuisance:

Schema.org:

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

Data-Vocabulary.org:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses" itemprop="url">
    <span itemprop="title">Dresses</span>
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses/real" itemprop="url">
    <span itemprop="title">Real Dresses</span>
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
    <span itemprop="title">Real Green Dresses</span>
  </a>
</div>
| improve this question | |
  • You don't actually need any markup on breadcrumbs to make them appear in the SERPS. Simply having bread crumb navigation is enough to make them appear in the SERPS in my experience. Just a thought. – Max Jul 4 '13 at 9:53
  • Yup, but mot always (and not in this case, for a very high-authority site) – Baumr Jul 4 '13 at 9:57
  • 2
    Yuck, yet another microformat. The Semantic web is now the Symantec web? As in larger, slower and less understandable? This thing of throwing yet another standard in the mix... instead of fixing what we already have. – Fiasco Labs Jul 4 '13 at 16:17
  • @FiascoLabs, word — personally I like RDFa: covers most bases – Baumr Jul 4 '13 at 16:23
  • Related (maybe duplicate): Breadcrumb using Schema.org rich snippets – unor Jun 15 '15 at 0:50
3

Yes, avoid Schema for now and use Data Vocabulary, for exactly the reason you cite. I've used the latter, and it works.

John Mueller from Google has said that he expects Schema will have to change, and the discussion around it seems to suggest that Schema needs to be more like the current Data Vocabulary syntax, so any future adaptations you need to make may be less onerous than they currently appear.

| improve this answer | |
  • 1
    breadcrumbs now work in Schema.org – Mousey Aug 15 '15 at 0:37
2

Up-to-date answer, January 3rd, 2017

data-vocabulary.org - offers microdata for breadcrumbs for quite some time now. Simply use it like this:

  <div class="breadcrumb">
    <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>

read the docs

schema.org - also offers the use of microdata for breadcrumbs! Simply use it like this:

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

read the docs

GDav: "John Mueller from Google has said that he expects Schema will have to change, and the discussion around it seems to suggest that Schema needs to be more like the current Data Vocabulary syntax, so any future adaptations you need to make may be less onerous than they currently appear."

Well I guess they changed, because now schema.org also supports breadcrumbs.

Please note: both data-vocabulary.org and schema.org use microdata for search engine optimization. Apperently there are ways to combine them, but I haven't found a live example, so if I were you I would choose one of them. And then use it for all your content (I mean that I wouldn't use data-vocabulary for your breadcrumbs and schema.org for your navigation menu).

Conclusion:

They both work, just choose one.

| improve this answer | |
1

Google does not offering data-vocabulary.org as a breadcrumbs option. Right now is just schema.org as you can see in https://developers.google.com/search/docs/data-types/breadcrumbs

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.