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