How to fix “Breadcrumbs issues detected”

How to fix “Breadcrumbs issues detected”

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

Read more about:

10 JavaScript one-liners every developer should know

Code should be readable and pragmatic. For me, that means when I look at a piece of code, I should almost instantly understand what it does. Clear code always has good variable names, is predictable, avoids unnecessary logic, and lives in the right place within a project. But sometimes you need to do something a little complex without turning the rest of your code into a mess. That’s where one-liners come in. Small, pragmatic snippets…

Continue reading

The difference between debounce and throttle

Debounce and throttle are powerful techniques, but only if you really understand what they do. I often ask about them in tech interviews, and to my surprise, many developers (even seniors) struggle to explain the difference. The good news is: it’s actually quite simple. In this post, I’ll break down both techniques and share some practical use cases. If you are unfamiliar with the techniques and are asked about them too in your interview…

Continue reading

The paradox of AI in web development

Since the start of my career as a developer, I’ve seen a lot of changes. From the rise of Dreamweaver with a WYSIWYG editor for generating table code to the arrival of jQuery and professional frameworks that completely transformed web development. Nowadays, there seems to be only one buzzword everywhere: AI.…

Continue reading