Nextjs/Reactjs add span inside link tag

August 19, 2022

Want to make breadcrumb based on microdata and I’m using nextjs with reactjs I did:

<li itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem">
    <Link href={'/index'} itemProp="item">
       <span itemProp="name">
         home
       </span>
    </Link>
<meta itemProp="position" content="1"/>
</li>

But output is:

<li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
  <span itemprop="name">
home
</span>
  <meta itemprop="position" content="1">
</li>

But when I click it going to homepage, but looks like it works with js not href. but if I remove span tag, and put like this:

<li itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem">
    <Link href={'/index'} itemProp="item">
home
    </Link>
    <meta itemProp="position" content="1"/>
</li>

Output:

<li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
  <a href="/index">home</a>
  <meta itemprop="position" content="1">
</li>

Why can not use span inside Link tag?

Google Breadcrumb structure

>Solution :

You need <a> tag inside the Next.js Link Component if the child is not a string. The <a> tag is automatically added if the child is a string

so your code should look like this:

<li itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem">
    <Link href={'/index'} itemProp="item">
      <a>
       <span itemProp="name">
         home
       </span>
      </a>
    </Link>
<meta itemProp="position" content="1"/>
</li>

Explanation of why we need a <a> is here: https://github.com/vercel/next.js/blob/canary/packages/next/client/link.tsx