How to fix “Breadcrumbs issues detected”

Posted on 24th of January 2020 | Reading time: 4 minutes

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