title: Nextjs/Reactjs add span inside link tag
body: <p>Want to make breadcrumb based on microdata and I'm using nextjs with reactjs I did:</p>
  <pre><code>&lt;li itemProp=&quot;itemListElement&quot; itemScope itemType=&quot;https://schema.org/ListItem&quot;&gt;
      &lt;Link href={'/index'} itemProp=&quot;item&quot;&gt;
         &lt;span itemProp=&quot;name&quot;&gt;
           home
         &lt;/span&gt;
      &lt;/Link&gt;
  &lt;meta itemProp=&quot;position&quot; content=&quot;1&quot;/&gt;
  &lt;/li&gt;
  </code></pre>
  <p>But output is:</p>
  <pre><code>&lt;li itemprop=&quot;itemListElement&quot; itemscope=&quot;&quot; itemtype=&quot;https://schema.org/ListItem&quot;&gt;
    &lt;span itemprop=&quot;name&quot;&gt;
  home
  &lt;/span&gt;
    &lt;meta itemprop=&quot;position&quot; content=&quot;1&quot;&gt;
  &lt;/li&gt;
  </code></pre>
  <p>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:</p>
  <pre><code>&lt;li itemProp=&quot;itemListElement&quot; itemScope itemType=&quot;https://schema.org/ListItem&quot;&gt;
      &lt;Link href={'/index'} itemProp=&quot;item&quot;&gt;
  home
      &lt;/Link&gt;
      &lt;meta itemProp=&quot;position&quot; content=&quot;1&quot;/&gt;
  &lt;/li&gt;
  </code></pre>
  <p>Output:</p>
  <pre><code>&lt;li itemprop=&quot;itemListElement&quot; itemscope=&quot;&quot; itemtype=&quot;https://schema.org/ListItem&quot;&gt;
    &lt;a href=&quot;/index&quot;&gt;home&lt;/a&gt;
    &lt;meta itemprop=&quot;position&quot; content=&quot;1&quot;&gt;
  &lt;/li&gt;
  </code></pre>
  <p>Why can not use span inside Link tag?</p>
  <p><a href="https://developers.google.com/search/docs/advanced/structured-data/breadcrumb#microdata_1" rel="nofollow noreferrer">Google Breadcrumb structure</a></p>