Nextjs/Reactjs add span inside link tag

Question

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

Answer 1

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

Answer 2

SEO best practice is to use an anchor tag whenever you have a link. As you deduced correctly, Link is just a wrapper component and it does some magic using JS. So you can technically create a link with span too.

passHref forces href to be passed to the immediate child. If you use the passHref property like below, the href tag will be added to the span . :

<Link href={'/index'} itemProp="item" passHref>
       <span itemProp="name">
         home
       </span>
    </Link>

But this is not good for your SEO. That is why Nextjs docs suggest using an anchor tag.

Now you can wrap a inside span and vice-versa. Both are perfectly valid, but you would want your href to be on your anchor tag. And for that you should be using the below code as suggested in another solution:

<Link href={'/index'} itemProp="item">
       <a>
       <span itemProp="name">
         home
       </span>
       </a>
</Link>