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??
Google Search uses breadcrumb markup in the body of a web page to categorize the information from the page in search results. Often, as illustrated in following use cases, users can arrive at a page from very different types of search queries.
Breadcrumbs help users navigate your website and they help Google categorize and navigate your website. That makes breadcrumbs kind of a big deal for SEO.
If you are using the block editor, you can use the Yoast SEO breadcrumb block to simply add breadcrumbs to individual posts and pages. This is helpful if you don't want to touch code or if you only want to add to a specific page. Adding breadcrumbs is incredibly easy — simply hit the big + icon to add a block.
A set of links that can help a user understand and navigate a website hierarchy.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With