Breadcrumblist last item error from Structured Data Testing Tool: "A value for the item field is required."

Question

We are using RDFa format to display the breadcrumb using the examples provided by BreadcrumbList. When we insert the following example into Google's Structured Data Testing Tool, we get the following errors.

Setup:

1. Display all items in the BreadcrumbList.
2. Last item in the breadcrumb is displayed in plain text.

What is the correct format for the last item when using RDFa format?

Sample code

<ol vocab="http://schema.org/" typeof="BreadcrumbList">
  <li property="itemListElement" typeof="ListItem">
    <a property="item" typeof="WebPage" href="https://example.com/dresses">
     <span property="name">Dresses</span></a>
     <meta property="position" content="1">
  </li>
  <li property="itemListElement" typeof="ListItem">
    <a property="item" typeof="WebPage" href="https://example.com/foo-bar">
     <span property="name">foo-bar</span></a>
     <meta property="position" content="2">
  </li>
  <li property="itemListElement" typeof="ListItem">
    <span property="name">Real Dresses</span>
    <meta property="position" content="3">
  </li>
</ol>

Error Message for the last item using code from above:

A value for the item field is required.

What we tried but did not validate

<ol vocab="http://schema.org/" typeof="BreadcrumbList">
  <li property="itemListElement" typeof="ListItem">
    <a property="item" typeof="WebPage" href="https://example.com/dresses">
      <span property="name">Dresses</span></a>
    <meta property="position" content="1">
  </li>
  <li property="itemListElement" typeof="ListItem">
    <a property="item" typeof="WebPage" href="https://example.com/foo-bar">
      <span property="name">foo-bar</span></a>
    <meta property="position" content="2">
  </li>
  <li property="itemListElement" typeof="ListItem">
    <div property="item">
      <span property="name">Real Dresses</span>
    </div>
    <meta property="position" content="3">
  </li>
</ol>

Error Message when using <div property="item"> from above:

The value provided for item.id must be a valid URL.

Answer 1

The last item (for the current page) still represents a web page, even if you don’t want to show a hyperlink.

So, simply add typeof="WebPage" to the div of the last item:

<div property="item" typeof="WebPage">

You could still provide the last item’s URI (without showing it) by using the resource attribute:

<div property="item" typeof="WebPage" resource="https://example.com/real-dresses">

This results in:

    <ol vocab="http://schema.org/" typeof="BreadcrumbList">

      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage" href="https://example.com/dresses">
          <span property="name">Dresses</span></a>
        <meta property="position" content="1">
      </li>

      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage" href="https://example.com/foo-bar">
          <span property="name">foo-bar</span></a>
        <meta property="position" content="2">
      </li>

      <li property="itemListElement" typeof="ListItem">
        <div property="item" typeof="WebPage" resource="https://example.com/real-dresses">
          <span property="name">Real Dresses</span>
        </div>
        <meta property="position" content="3">
      </li>

    </ol>

Answer 2

The problem appears when you don't want to make last element of the breadcrumbs a hyperlink, which in most of cases is just a link to the page itself. In this case to avoid errors from Google's Structured Data Testing Tool you are free to use json-ld as well.

HTML

<ol>
  <li>
    <a href="https://example.com/dresses">
      <span>Dresses</span></a>      
  </li>
  <li>
    <a href="https://example.com/foo-bar">
      <span>foo-bar</span></a>      
  </li>
  <li>
    <div>
      <span>Real Dresses</span>
    </div>      
  </li>
</ol>

JSON+LD

<script type="application/ld+json">
{
  "@context": "https://schema.org/", 
  "@type": "BreadcrumbList", 
  "itemListElement": [{
    "@type": "ListItem", 
    "position": 1, 
    "name": "Dresses",
    "item": "https://example.com/dresses"  
  },{
    "@type": "ListItem", 
    "position": 2, 
    "name": "foo-bar",
    "item": "https://example.com/foo-bar"  
  },{
    "@type": "ListItem", 
    "position": 3, 
    "name": "Real Dresses",
    "item": "https://example.com/real-dresses"  
  }]
}
</script>

Answer 3

I was having the same issue on my local project:

<a href="http://localhost:4356/dresses" itemprop="item">
<span itemprop="name">dresses</span>
<meta itemprop="position" content="2">
</a>

was throwing error: A value for the item field is required.

for me, it is resolved by providing a valid URL for itemprop :

<a href="https://example.com/dresses" itemprop="item">
<span itemprop="name">dresses</span>
<meta itemprop="position" content="2">
</a>