Correct microdata marking for breadcrumbs

Question

Learning how to make microdata for breadcrumbs of web pages, I found several methods, and I'm not sure if this is correct. Firstly, my basic HTML crackers 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, I am structuring it like this (as I saw in the 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 I structure it, as shown below, as I saw 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 another method that I don't know about yet?

Answer 1

Modern (2019) Regular Breadcrumbs Microdata Markup as Below.

And if you want to complain that best practices don’t make the last crumb element as a link on your page, you can use <span> instead of <a> this way:

 <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 consistent with the BreadcrumbList (see Also that an item identifier is required) and passes Google's check on https://search.google.com/structured-data/testing-tool excellent.

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: https://search.google.com/structured-data/testing-tool

Answer 3

Use Schema.org as data-vocabulary.org is abandoned.

When the idea came up, there was a few markups. But since then, the standard has been introduced as Schema.org. It, of course, is supported by Google and is given in its examples (one of them is BreadCrumbs ).

Answer 4

The second is not part of schema.org, it uses a different dictionary from the data dictionary, so I can not comment on whether it works. The first is microdata using schema.org, which is the type shown in google 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. Structured data gives a page meaning and for the most part should be independent of how it looks visually, which means that it doesn’t matter if you use bullet points or <div> for your breadcrumbs, structured data will work in one and the same path for both and makes the same sense.

Answer 5

This may be a subjective decision. I would prefer the Microdata method from Google, as shown at https://developers.google.com/structured-data/breadcrumbs , which follows the ol / li method.

As long as you specify itemscope, itemptype and itemprop correctly, it doesn't matter which method you use.

Answer 6

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

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 the breadcrumbs markup in the Google search console due to the absence of the id field, I simply removed the itemscope property from the binding

from

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

from

before

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

and it worked. I checked and checked this on 2 sites that I received this error.