Next.js中next/head的meta标签无法被Facebook、metatags.io识别

问题根因 #

Facebook、metatags.io等平台的爬虫抓取页面时不会执行客户端JavaScript，仅读取服务端直接返回的原始HTML内容。你在浏览器F12元素面板看到的meta标签是客户端JS执行后动态插入的，而非服务端返回的原始HTML自带，因此爬虫无法识别。
首页可以正常识别的核心原因是首页默认走了预渲染（SSG/SSR），其他页面未做预渲染配置，仅走了客户端渲染。
另外你的代码存在一处规范错误：twitter:card的content属性应该填卡片类型（如summary_large_image），而非页面描述，会额外导致Twitter卡片识别异常。

修复方案 #

• 所有需要被爬虫收录的页面必须采用预渲染模式：
  1. 静态内容页面使用getStaticProps（动态路由需搭配getStaticPaths），构建阶段就生成带完整meta标签的静态HTML
  2. 实时动态内容页面使用getServerSideProps，请求时服务端渲染完整HTML返回
     禁止仅通过客户端useEffect拉取数据后再传递meta参数给SeoHeader组件，预渲染阶段拿不到该数据会导致meta内容为空
• 全局+子页面meta优先级配置：
  如果你在_app.js中引入SeoHeader作为全局默认配置，子页面需要覆盖meta时，要在子页面的Head组件内给相同key的meta标签赋值，Next.js会自动按「子页面优先」的规则去重合并
• 修正错误的twitter:card配置：

// 错误写法
<meta name="twitter:card" content={description} key="twitter:card" />
// 正确写法，可选值还有summary、app、player等
<meta name="twitter:card" content="summary_large_image" key="twitter:card" />

验证方法 #

修改完成后，右键页面选择「查看网页源代码」，直接检查原始HTML中是否存在对应的meta标签，若存在则说明预渲染配置生效，爬虫可正常识别。

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