seo Question posted in
Some basic information to get you started with this can be found here.

Correct microdata markup for breadcrumbs – SEO

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

Tags:

7

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

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

    enter image description here

    Login or Signup to reply.
  4. 0

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

    Login or Signup to reply.
  5. 0

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

    Login or Signup to reply.
  6. 0

    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.

    Login or Signup to reply.
  7. 0 
    <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 Fix Breadcrumbs markup in Google Search Console about missing field “id” , I just removed property itemscope from anchor

    from 

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

    to 

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

    and it worked. I tested and checked this on 2 websites that I got that error.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search