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??
7
Answers
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.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.
I would do something like :
Tested on : https://search.google.com/structured-data/testing-tool
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).
you need to use “name” not “title”, read all about it on in the docs: https://developers.google.com/search/docs/data-types/breadcrumbs
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: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.To fix Fix Breadcrumbs markup in Google Search Console about missing field “id” , I just removed property itemscope from anchor
from
to
and it worked. I tested and checked this on 2 websites that I got that error.