Next.js 13 Pages路由：特定页面Head组件元标签不生效问题

你遇到的问题是：全局_document.js里的OG元标签没有被/one页面的专属标签替换，导致爬虫和社交平台（比如Discord）读取到的还是全局信息，仅页面标题生效。

问题原因 #

Next.js的Head组件依赖key属性识别重复元标签并完成替换。你仅给description标签设置了key="desc"，所以该标签能被页面内容覆盖，但所有OG标签（og:title、og:description等）未配置唯一key，导致全局与页面的OG标签同时存在于HTML中，爬虫会优先读取全局的那一组。

解决步骤 #

1. 给全局_document.js的所有OG元标签添加唯一key #

修改_document.js中的Head部分，为每个OG标签添加对应key：

<Head>
  <meta
    name="description"
    content="General description."
    key="desc"
  />
  <meta property="og:title" content="Page.com - The Best Source for some stuff" key="og-title" />
  <meta
    property="og:description"
    content="General description."
    key="og-desc"
  />
  <meta
    property="og:image"
    content="/images/page.webp"
    key="og-image"
  />
  <meta property="og:url" content="https://page.com/" key="og-url" /> 
</Head>

2. 在/one页面的Head组件中，给对应OG标签添加相同key #

通过相同key让Next.js用页面标签替换全局标签：

<Head>
  <title>Page one</title>
  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  <meta name="description" content="Specific description for page one." key="desc"/>

  <meta property="og:title" content="Specific page title" key="og-title" />
  <meta
    property="og:description"
    content="Specific description for page one."
    key="og-desc"
  />
  <meta
    property="og:image"
    content="/images/page.webp"
    key="og-image"
  />
  <meta property="og:url" content="https://page.com/one" key="og-url" /> 
</Head>

3. 验证效果 #

部署修改后的代码，访问/one页面并右键查看源代码，确认全局OG标签已被页面专属标签替换，无重复内容。

额外注意 #

• 若页面为静态生成（SSG），需重新构建项目，确保新元标签正确生成到静态HTML中；
• 若为服务端渲染（SSR），需确保服务端能正确渲染页面的Head内容。

内容的提问来源于stack exchange，提问作者Luis