Invalid URL in field "id" (in "itemListElement.item") for a Docusaurus website

Question

We have a website made with Docusaurus "2.0.0-beta.18". I'm improving its SEO by inspecting its pages in Google Search Console. For most of its page, I realize that there are 2 non-critical issues. Here is a screenshot of live test of www.10studio.tech/docs/formula-editor:

And the corresponding HTML in the tested page is

<ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList">
  <li class="breadcrumbs__item">
    <a class="breadcrumbs__link" href="/"></a>
  </li>
  <li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item">
    <span class="breadcrumbs__link" itemprop="item name">Formula Editor</span>
    <meta itemprop="position" content="1">
  </li>
  <li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active">
    <span class="breadcrumbs__link" itemprop="item name">Tool</span>
    <meta itemprop="position" content="2">
  </li>
</ul>

Does anyone know how to fix this?

Answer 1

Here are a few issues I've identified with the breadcrumb implementation:

1. The breadcrumb starts with the homepage, which is correct as it represents the starting point.
2. The link for the "Formula Editor" is missing within the breadcrumb trail.
3. The itemprop=item attribute is missing on the hyperlinks, which is necessary for structured data markup.
4. The itemprop=item should not be added to the last item in the breadcrumb as it's not a hyperlink.

Here's an example of how the corrected implementation should look:

<ul class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">
  <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a class="breadcrumbs__link" href="/" itemprop="item">
      <span itemprop="name"></span>
    </a>
    <meta itemprop="position" content="1">
  </li>
  <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a class="breadcrumbs__link" href="/formula-editor" itemprop="item">
      <span itemprop="name">Formula Editor</span>
    </a>
    <meta itemprop="position" content="2">
  </li>
  <li class="breadcrumbs__item breadcrumbs__item--active" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <span class="breadcrumbs__link">
      <span itemprop="name">Tool</span>
    </span>
    <meta itemprop="position" content="3">
  </li>
</ul>