Next.js页面Meta标签显示异常，社交分享仅加载_app元数据？

我在Next.js中使用Head组件添加Meta标签，在_app及其他页面中均有使用，并为每个标签设置了key属性。但发现仅_app中的元数据生效，将其他页面链接分享到Facebook时，仅显示_app的元数据，尽管在开发者工具中能看到其他页面的Meta标签。请问这一差异的原因是什么？

代码示例 #

<Head>
    <title key='title'>{metaTag.title}</title>
    <meta name='viewport' content='width=device-width, user-scalable=no' />
    <meta property='og:image' content={metaTag.thumbnail} key='thumbnail' />
    <meta
      name='description'
      content={metaTag.description}
      key='description'
    />
    <meta property='og:type' content='website' key='og:type' />
    <meta property='og:title' content={metaTag.title} key='og:title' />
    <meta
      property='og:description'
      content={metaTag.description}
      key='og:description'
    />
    <meta
      property='og:site_name'
      content={metaTag.title}
      key='og:site_name'
    />
  </Head>

核心原因：社交平台爬虫不执行前端JavaScript #

你在开发者工具Elements面板能看到其他页面的Meta标签，是因为浏览器运行了Next.js的客户端代码，动态更新了Head内容。但Facebook这类平台的分享爬虫只会抓取服务器第一次返回的静态HTML，不会加载和执行任何JS——这意味着它们只能拿到_app.js里默认渲染的Meta标签，根本看不到客户端后续动态插入的内容。

辅助原因：渲染时机与key匹配问题 #

1. 如果你的页面没有使用getServerSideProps或getStaticProps，页面的Meta标签只会在客户端组件挂载后才插入到Head中，爬虫完全无法获取到这些动态内容。
2. 若_app.js和页面中对应Meta标签的key值不严格一致，Next.js的Head组件无法正确替换_app里的默认标签，导致服务器返回的HTML中仍然保留着_app的元数据。

解决措施 #

1. 让页面Meta在服务器端渲染：给需要自定义Meta的页面添加getServerSideProps（服务端实时渲染）或getStaticProps（静态预生成），确保页面的Meta标签在服务器生成HTML时就被注入进去，这样爬虫能直接抓取到正确的内容。
2. 严格统一key值：_app.js和页面中的对应Meta标签必须使用完全相同的key，比如_app里的og:title用key='og:title'，页面里的og:title也要用同一个key，这样Next.js才能正确替换掉_app中的默认标签。
3. 验证服务器返回的原始HTML：右键页面选择“查看页面源代码”，这里显示的内容才是爬虫能拿到的。如果页面的Meta标签不在源代码里，说明是客户端动态渲染的，需要调整页面的渲染方式。

内容的提问来源于stack exchange，提问作者React-beginner