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?

Hoe vindt een crawler nieuwe webpagina's en welke bepaalt hij als eerste te bezoeken? Dit artikel legt uit hoe de scheduler, downloader en queue samenwerken. Ook vergelijken we Breadth First, Best First en Depth First Search: drie manieren om het web te doorzoeken, met elk een andere aanpak voor volgorde en relevantie.

Lees verder

The bullshit of implementing web accessibility

The bullshit of implementing web accessibility

An accessibility audit can turn green while the next feature introduces the same barriers again. I explain why a round of fixes is not enough, and how design, development, content and testing must share responsibility. Accessibility needs to survive the next release, not just the audit.

Continue reading

CSS-only Carousel Slider

CSS-only Carousel Slider

Does a carousel really need a JavaScript framework? This example builds a slider with HTML and CSS, then adds navigation between slides. It is an invitation to look at what the browser already provides before turning another interface element into a JavaScript component.

Continue reading