May 10, 2020
Estimated Post Reading Time ~

How to fix “Breadcrumbs issues detected”

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>


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.