Structured Data Breadcrumb errors: title and url is missing

Question

I just ran a test and I received two errors on all my product pages in the breadcrumb (2) section of Googl Structured Data Tool test.

It says Breadcrumb 2 has missing title and url.

When i click on the error it takes me to the following piece of code

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">;

The raw code is set up as such:

{% if settings.product_breadcrumb %}
      <div class="breadcrumb_text">
        <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{{ shop.url }}" title="{{ shop.name | escape }}" itemprop="url"><span itemprop="title">{{ 'general.breadcrumbs.home' | t }}</span></a></span> 
        &nbsp;<span class="icon-right-arrow"></span>
        <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
          {% if collection %}
            <a href="{{ collection.url }}" title="{{ collection.title | escape }}">{{ collection.title }}</a>
          {% else %}
            <a href="/collections/all" title="{{ collections.all.title }}">{{ collections.all.title }}</a>     
          {% endif %}
        </span>

It all looks good on my end?? Any suggestions?

Answer 1

Before we get into the code, I believe that the data-vocabulary.org way of marking up breadcrumbs is probably becoming obsolete. In the past, it seems that Google preferred data-vocabulary.org specifically for breadcrumbs, but today, if you look at their Structured Data Breadcrumb spec, you'll see they like schema.org or JSON-LD. (More here: https://developers.google.com/search/docs/data-types/breadcrumbs .)

One other thing to consider is that Google's SDTT gets confused too. You use macros in your code, and as you'll see, that's partly what's throwing errors. The tool is an excellent one, but if you know something makes sense in your code and is correct, you may have to go with your own code.

Ok, here's your code. I modified it to get it to work, and indented it for clarity:

<div class="breadcrumb_text">
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com" title="{{ shop.name | escape }}" itemprop="url">
      <span itemprop="title">{{ 'general.breadcrumbs.home' | t }}</span>
    </a>
  </span>&nbsp;
  <span class="icon-right-arrow"></span>
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
          {% if collection %}
    <a href="http://www.example.com" title="{{ collection.title | escape }}" itemprop="url">         
      <span itemprop="title">{{ collection.title }}</span>
    </a>
          {% else %}
    <a href="http://www.example.com" title="{{ collections.all.title }}" itemprop="url">
      <span itemprop="title">{{ collections.all.title }}</span>
    </a>     
          {% endif %}
  </span>
</div>

This is the only way I got it to check out.

By the way, I only omitted the first line, {% if settings.product_breadcrumb %} because it was throwing errors. Let's assume it's there. I also included the closing </div> tag, for completeness' sake.

When the error in the testing tool took you to two instances of <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> it's because it identified the errors to be in two blocks that start with this, not in these lines themselves.

Notice how in all three instances, I replaced your URL macro with an actual (fake/sample) URL - http://www.example.com. This is the only way to get rid of those errors. Considering that your macro will result in actual URL's, you should be fine, hopefully. (When you set the page live, check again by running the page's URL, not the code, through the validator.) The point is, the tool itself only recognizes full URL's.

For your conditional statement, you were missing the itemprop="url" on each hyperlink. Once that was added, the validator complained about a missing name. So I added those <span> tags, with itemprop="title" just like you have it in your first block of code.

Basically, you need to have the following for each breadcrumb to get it to work:

itemscope itemtype="http://data-vocabulary.org/Breadcrumb"
itemprop="url"
itemprop="title"

The URL situation is the one where you'll have to do some testing.

Answer 2

I'm afraid, your code doesn't create the right nesting structure for inline microdata. You seem to use any kind of JS-Framework, like React or similiar. Why don't you try to populate with data a JSON-LD snippet? It would look like

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "item": {
      "@id": "https://example.com/books",
      "name": "Books",
      "image": "http://example.com/images/icon-book.png"
    }
  },{
    "@type": "ListItem",
    "position": 2,
    "item": {
      "@id": "https://example.com/books/authors",
      "name": "Authors",
      "image": "http://example.com/images/icon-author.png"
    }
  }]
}
</script>

It can be implemented on the bottom of body and will be fully recognized by Google even if you populate it with data after onLoad, but not too late - max. 5 seconds after.