Next.js/React.js中Link标签嵌套span标签无法生成正常a标签问题（Google面包屑微数据适配）

这是个很典型的Next.js Link组件使用细节问题，我来帮你拆解清楚：

为什么嵌套span会丢失标签？ #

Next.js的Link组件有个自动渲染逻辑：

• 当直接子元素是纯文本时，Link会自动把文本包裹成<a>标签，帮你处理跳转逻辑；
• 但如果直接子元素是HTML元素（比如你用的<span>），Link会默认把这个元素作为跳转的容器，通过事件委托来实现页面跳转，不会自动生成外层的<a>标签。这就是你第一次代码里看不到<a>的原因——span直接被渲染成了可点击元素，但没有生成爬虫需要的<a>标签结构。

如何调整满足Google面包屑微数据要求？ #

要同时兼顾微数据结构（itemProp="item"需要绑定到带href的<a>标签，itemProp="name"绑定到文本容器）和Next.js的跳转功能，最稳妥的方式是手动在Link内部添加<a>标签，配合passHref属性（Pages Router需要，App Router可省略）：

Pages Router 写法 #

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

App Router（Next.js 13+）写法 #

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

最终效果 #

这样生成的HTML会完全符合预期：

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

既满足了Google面包屑微数据的结构要求（爬虫能正确识别item对应的URL和name文本），又保留了Next.js Link的客户端跳转功能。

额外提醒 #

不要依赖Link自动生成<a>的隐式逻辑，当需要自定义DOM结构或添加微数据属性时，手动嵌套<a>标签是最可靠的方式，能避免DOM结构不符合预期的问题。

内容的提问来源于stack exchange，提问作者Jack The Baker