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

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. — unor, Aug 06 '15 at 20:25
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. — Mousey, Aug 13 '15 at 23:30
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? — CaribouCode, Aug 17 '15 at 14:46

FlameStorm · Accepted Answer · 2019-07-14T17:23:05.040

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.

@retroriff, may be, but both schema-org https://schema.org/BreadcrumbList and google documentation https://developers.google.com/search/docs/advanced/structured-data/breadcrumb?#microdata_1 provides right such an examples for BreadcrumbList microdata — FlameStorm, Oct 06 '21 at 07:47

score 4 · Answer 2 · answered Jul 07 '16 at 07:44

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

score 3 · Answer 3 · answered Jun 08 '17 at 21:26

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

answered Jun 08 '17 at 21:26

Claudiu

3,700
1
38
35

score 2 · Answer 4 · answered Aug 27 '15 at 01:33

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.

also see this answer for minor corrections to your schema.org code http://stackoverflow.com/a/32281558/4258817 — Mousey, Aug 29 '15 at 00:53

score 1 · Answer 5 · edited May 23 '16 at 17:28

1

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.

edited May 23 '16 at 17:28

BenMorel

34,448
50
182
322

answered Aug 29 '15 at 04:26

Moin Shaikh

376
3
15

score 1 · Answer 6 · answered Sep 22 '17 at 10:59

1

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

answered Sep 22 '17 at 10:59

Max Barrass

2,776
1
19
10

score 1 · Answer 7 · answered Sep 23 '19 at 20:11

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

Correct microdata markup for breadcrumbs

7 Answers7