Correct microdata markup for breadcrumbs

Question

On researching how to do microdata for webpage breadcrumbs, I've found a couple of methods and I'm not sure which is correct. Firstly, my basic breadcrumbs in the HTML look like this:

<div>
  <a href="/">Root page</a>
  <a href="/category">Category page</a>
  <a href="/category/this-page">This page</a>
</div>

Now, do I structure it like this (as I've seen in an example on SchemaOrg:

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="/" itemprop="item">
      <span itemprop="name">Root page</span>
    </a>
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="/category" itemprop="item">
      <span itemprop="name">Category page</span>
    </a>
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="/category/this-page" itemprop="item">
      <span itemprop="name">This page</span>
    </a>
  </li>
</ol>

Or do I structure it like the below as I've seen in some Stackoverflow answers:

<div>
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="/" itemprop="url">
      <span itemprop="title">Root page</span>
    </a>
  </span>
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="/category" itemprop="url">
      <span itemprop="title">Category page</span>
    </a>
  </span>
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="/category/this-page" itemprop="url">
      <span itemprop="title">This page</span>
    </a>
  </span>
</div>

Or a different method I don't know about yet??

Solution 1

Modern (2019) correct breadcrumbs Microdata markup is like provided below.

And if you want to complain best practices do not make the last breadcrumb item as a link on your page - you can use <span> instead of <a> in a such manner:

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="/" itemid="/">
      <span itemprop="name">Root page</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="/category" itemid="/category">
      <span itemprop="name">Category page</span>
    </a>
    <meta itemprop="position" content="2" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <span itemscope itemtype="http://schema.org/Thing" itemprop="item" itemid="/category/this-page">
      <span itemprop="name">This page</span>
    </span>
    <meta itemprop="position" content="3" />
  </li>
</ol>

This code is fully compliant to BreadcrumbList (see also that item's id is required) and passes Google validation on https://search.google.com/structured-data/testing-tool excellent.

Solution 2

I would do something like :

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="#" itemprop="url"><span itemprop="title">Homepage</span></a>
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="#" itemprop="url"><span itemprop="title">Child-A</span></a>
    </div>
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="#" itemprop="url"><span itemprop="title">Child-B</span></a>
    </div>
</div>

Tested on : https://search.google.com/structured-data/testing-tool

Solution 3

Use Schema.org as data-vocabulary.org is abandoned.

There were a few markups when the idea came up. But since then the standard has arrised as being Schema.org. It's of course supported by Google and given in its examples (one is BreadCrumbs).

Solution 4

The second is not part of schema.org, it uses a different vocabulary from data-vocabulary so I can't comment on if it works. The first is microdata using schema.org, which is the type given in google's breadcrumb examples.

Only structured data including Schema.org links uses schema.org - but you can use <div> and <span> with Schema.org if you want to. Structured data gives the meaning of the page and should for the most part be independent to how it appears visually, meaning that it doesn't matter whether you use bullet points or <div>s for your breadcrumbs, the structured data will work in the same way for both and have the same meaning.

Solution 5

It might be a subjective decision to be made. I would prefer Microdata method from Google as shown at https://developers.google.com/structured-data/breadcrumbs which follows ol/li method.

As long as you mention itemscope, itemptype and itemprop properly, it should't matter much which method you use.

View more solutions

Comments

[Mousey]

also see this answer for minor corrections to your schema.org code stackoverflow.com/a/32281558/4258817

[Pbinder]

Element <meta> is not permitted as content in <li>

[FlameStorm]

@retroriff, may be, but both schema-org schema.org/BreadcrumbList and google documentation developers.google.com/search/docs/advanced/structured-data/… provides right such an examples for BreadcrumbList microdata