Rich Snippet last breadcrumb is not appearing in search result

Question

I am struggling with rich snippet for breadcrumbs and how these appear in the Google SERP

<ul class="breadcrumbs colored-links" itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="https://www.example.com/" itemid="https://www.example.com/"><span itemprop="name">Home</span></a>
    <meta itemprop="position" content="1">
</liexample
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="https://www.example.com/collections" itemid="https://www.example.com/collections"><span itemprop="name">Collections</span></a>
    <meta itemprop="position" content="2">
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><span itemscope itemtype="http://schema.org/Thing" itemprop="item" itemid="https://www.example.com/collections/item3" ><span itemprop="name">Item3</span></span>
    <meta itemprop="position" content="3">
</li>

The code passes the Google Data Structure test. In the Google Search Result Page I do see a rich snippet for my website when a breadcrumb is on that particular page

I see this https://www.example.com > Collections

I am trying to get this

but it would be https://www.example.com > Collections > Item3

I have tried adding

<span itemscope itemtype="http://schema.org/Thing" itemprop="item" itemid="https://www.example.com/collections/item3" typeof="WebPage" resource="https://www.example.com/collections/item3"><span itemprop="name">Item3</span>

Can it be avoided that the last breadcrumb is a link on the webpage? Or is the only way to make it a link with similar code as to how content="1" and content="2" are done edit: I just tried making the last breadcrumb a link and with search console updated the SERP, but it still does not show item3

the solution I am looking for should not be JSON-LD

Answer 1

If you really want to see the last member of the breadcrumb as visible part of it, consider to add a real href link to its markup, like the second member already has. Like this:

<ul class="breadcrumbs colored-links" itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="https://www.example.com/" itemid="https://www.example.com/"><span itemprop="name">Home</span></a>
    <meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="https://www.example.com/collections" itemid="https://www.example.com/collections"><span itemprop="name">Collections</span></a>
    <meta itemprop="position" content="2">
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="https://www.example.com/collections/item3" itemid="https://www.example.com/collections/item3" ><span itemprop="name">Item3</span></a>
    <meta itemprop="position" content="3">
</li>
</ul>