Breadcrumbs Invalid URL in field "id"

Hi Leslie,

Looks like the issue here is an errant itemprop="item" in the span element. Once that is removed, the test passes. Here is the updated Smart Breadcrumbs code:

Code:

<section class="t-expanded-block u-bg-white">
<nav class="o-wrapper x-collapsing-breadcrumbs t-breadcrumbs t-wrapper" data-hook="collapsing-breadcrumbs" aria-label="Breadcrumb">
<ul class="o-list-inline x-collapsing-breadcrumbs__group u-hidden" data-hook="collapsing-breadcrumbs__group"></ul>
<ul class="o-list-inline x-collapsing-breadcrumbs__list" data-hook="collapsing-breadcrumbs__list" itemscope itemtype="http://schema.org/BreadcrumbList">
<li class="o-list-inline__item u-hidden" data-hook="collapsing-breadcrumbs__trigger-area">
<button class="c-button c-button--hollow u-border-none u-color-black u-bg-transparent x-collapsing-breadcrumbs__button" data-hook="collapsing-breadcrumbs__button">&hellip;</button>
</li>
<li class="o-list-inline__item u-text-bold" data-hook="collapsing-breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a class="u-color-gray-50 u-inline-block" href="&mvt:breadcrumbs:homelink;" title="Home" itemprop="item">
<span itemprop="name">Home</span>
</a>
<meta itemprop="position" content="1" />
</li>
<mvt:assign name="l.settings:breadcrumb:position" value="1"/>
<mvt:foreach iterator="cats" array="breadcrumbs:links">
<mvt:assign name="l.settings:breadcrumb:position" value="l.settings:breadcrumb:position + 1"/>
<mvt:if expr="l.settings:cats:name EQ '...'">
<li class="o-list-inline__item" data-hook="collapsing-breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a class="u-color-gray-50 u-inline-block" href="&mvt:cats:link;" title="&mvt:cats:name;" itemprop="item">
<span itemprop="name">&mvt:cats:name;</span>
</a>
<meta itemprop="position" content="&mvt:breadcrumb:position;" />
</li>
<mvt:elseif expr="l.settings:cats:code EQ l.settings:breadcrumbs:current_item:code">
<li class="o-list-inline__item" data-hook="collapsing-breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span class="u-color-gray-50 u-inline-block" title="&mvt:cats:name;" aria-current="page">
<span itemprop="name">&mvt:cats:name;</span>
</span>
<meta itemprop="url" content="&mvt:cats:link;" />
<meta itemprop="position" content="&mvt:breadcrumb:position;" />
</li>
<mvt:else>
<li class="o-list-inline__item" data-hook="collapsing-breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a class="u-color-gray-50 u-inline-block" href="&mvt:cats:link;" title="&mvt:cats:name;" itemprop="item">
<span itemprop="name">&mvt:cats:name;</span>
</a>
<meta itemprop="position" content="&mvt:breadcrumb:position;" />
</li>
</mvt:if>
</mvt:foreach>
</ul>
</nav>
<!-- end .x-collapsing-breadcrumbs -->
</section>

I had actually described my solution. Here is a more direct answer from the benefit of hindsight.

I actually did find the answer. It wasn't straight forward or obvious. The Google Search Console error message wasn't an accurate message. Jumping to it, the error message complains about an invalid link. Don't understand why an ID is a label for a URL issue. The gotchya is that there actually isn't a link. But, Google knows the code is for a Breadcrumb and it's expecting a link/URL.

my resulting solution is to turn the last list item in the Smart Breadcrumb template into a link where the default is simple text.

I don't know if that's the only solution but it works for now. In the future, I might need to address this because if I have to start counting links on a page, that is a link that should be a candidate for removal.

Scott

Announcement

Leave a comment: