Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Correct microdata markup for breadcrumbs

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

like image 667
CaribouCode Avatar asked Aug 06 '15 16:08

CaribouCode


People also ask

What is a breadcrumb markup?

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.

Do breadcrumbs affect SEO?

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.

How do I add breadcrumbs to 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.

What is breadcrumb schema used for?

A set of links that can help a user understand and navigate a website hierarchy.


1 Answers

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.

like image 177
FlameStorm Avatar answered Oct 03 '22 23:10

FlameStorm