How to fix “Breadcrumbs issues detected”

How to fix “Breadcrumbs issues detected”

This article is more than four years old. The content may be outdated, especially technical examples or references to tooling.

As of April 6, 2020, Google bots will no longer honour data-vocubulary.org markup in your html pages. Structured data based on this markup will lose its value and support. Starting January 2020 Google sent mails to developers that markup on their website is deprecated.

The solution(s)

The fix for this problem is fortunately easy. Where you’re using the data-vocubilary.org now, you should use the markup described on schema.org. Another more future proof solution would be to use JSON-LD structured data since it’s Google preferred way according to Google's John Mueller.

To verify your implementation, you could use the Rich Results Test tool

Old / unsupported structure:

<div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/books" itemprop="url">
    <span itemprop="title">Books</span>
  </a> ›
</div>  
<div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/books/sciencefiction" itemprop="url">
    <span itemprop="title">Science Fiction</span>
  </a> ›
</div>  
<div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/books/sciencefiction/awardwinners" itemprop="url">
    <span itemprop="title">Award winners</span>
  </a>
</div>

New structure (schema.org):

<ol itemscope="" itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/books">
        <span itemprop="name">Books</span></a>
    <meta itemprop="position" content="1">
  </li>
  <li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/books/sciencefiction">
      <span itemprop="name">Science Fiction</span></a>
    <meta itemprop="position" content="2">
  </li>
  <li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
    <span itemprop="name">Award winners</span>
    <meta itemprop="position" content="3">
  </li>
</ol>

New (JSON-LD):

Google recommends adding JSON-LD to your page's head, but could also be placed inside your page's body. For example when you want to place your JSON-LD in your breadcrumb template.

  
    <title>The title of the page</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Authors",
        "item": "https://example.com/books/authors"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Ann Leckie",
        "item": "https://example.com/books/authors/annleckie"
      },{
        "@type": "ListItem",
        "position": 4,
        "name": "Ancillary Justice",
        "item": "https://example.com/books/authors/ancillaryjustice"
      }]
    }
    </script>
  
  
  

The facts

  • Starting in January 2020 Google will probably mail you about deprecated markups on your website
  • Google will not support data-vocubulary.org markup for breadcrumbs, you could use schema.org markup instead or use Google’s preferred way: JSON-LD

Comments

There are no comments yet, leave yours below.

Leave a comment

Do you have an addition, question or experience related to this article? Share it below.

Comments are briefly reviewed before they appear.

Read more about:

Wat is een crawler?

Een crawler is - zoals omschreven in de IT Glossary van Gartner (Gartner, Gartner IT Glossary, 2013) - een stuk software dat ontworpen is om URL's op websites te volgen om vervolgens nieuwe URL's te vinden. Het zoeken en het volgen van URL's is een recursief proces, waardoor de crawler een oneindig pad op het internet volgt naar nieuwe webpagina's en websites. Een crawler bestaat uit verschillende componenten en een crawler kan op verschillende…

Lees verder

The bullshit of implementing web accessibility

The bullshit of implementing web accessibility

What is WCAG? Before I dive into the details of web accessibility, let me explain in my own words what it actually is. WCAG stands for Web Content Accessibility Guidelines. It’s a set of guidelines designed to ensure that websites and web applications are accessible to everyone, including people with disabilities…

Continue reading

CSS-only Carousel Slider

CSS-only Carousel Slider

As a frontend developer, my days are primarily filled with crafting JavaScript-based components using frameworks like Vue, React, or Angular. These frameworks excel at empowering me to create reusable frontend elements, whether it's buttons, modals, links, or accordions. However, as I reflect on my reliance on these…

Continue reading