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

Chromate

Do you wonder which HTML structure (ol vs. div) to use, or which vocabulary (Schema.org vs. Data-Vocabulary.org) to use? These are two separate questions. – Infinitesimal

if you decide on the first example, you can replace the ol with div and the li can be substitued with span to keep your page appearance the same. Either vocbulary can be used, although Schema.org seems to be used a bit more often. – Mouton

Both options are part of Schema.org aren't they? I'm not sure why they would create 2 ways of doing exactly the same thing. Surely there's a correct usage for each? – Chromate

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

Kaftan

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

@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 – Kaftan

Answer 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

Botanomancy

Answer 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).

Warmth

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

Mouton

also see this answer for minor corrections to your schema.org code https://mcmap.net/q/740918/-why-is-my-http-schema-org-breadcrumblist-not-validating – Mouton

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

Underfeed

Answer 6

you need to use "name" not "title", read all about it on in the docs: https://developers.google.com/search/docs/data-types/breadcrumbs

Taphouse

Answer 7

<ol itemscope itemtype="http://schema.org/BreadcrumbList">

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemtype="http://schema.org/Thing" itemprop="item" class="" href="https://exampe.com/">
<span itemprop="name">Root page</span></a>
<meta itemprop="position" content="1">
</li>

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemtype="http://schema.org/Thing" itemprop="item" class="" href="https://exampe.com/category">
<span itemprop="name">Category page</span></a>
<meta itemprop="position" content="2">
</li>

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemtype="http://schema.org/Thing" itemprop="item" class="" href="https://exampe.com/category/this-page">
<span itemprop="name">This page</span></a>
<meta itemprop="position" content="3">
</li>

</ol>

To fix Fix Breadcrumbs markup in Google Search Console about missing field "id" , I just removed property itemscope from anchor

from

<a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="..">link</a> 

to

<a itemtype="http://schema.org/Thing" itemprop="item" href="..">

and it worked. I tested and checked this on 2 websites that I got that error.

Berthaberthe