Facebook调试工具无法抓取Next.js项目next-seo配置的Meta标签

不少开发者都遇到过类似的棘手问题，以下为项目实际场景的详细说明：

基础环境与核心现象 #

• 项目使用依赖版本：Next.js ^10.0.9、next-seo ^4.22.0
• 核心现象：浏览器开发者工具中能够看到配置的meta标签，但Facebook、Twitter及各类meta标签校验工具都无法抓取到这些标签

通用认知：爬虫不会执行渲染动态标签所需的JavaScript逻辑，只有出现在页面「查看源码」视图中的标签，才能被网页爬虫识别

异常表现核对 #

• 按预期，页面源码本应包含OpenGraph协议对应的描述、标题、图片等各类meta标签，但实际返回的源码完全缺失这些内容，仅保留基础编码、视口配置、资源预加载、服务端渲染样式等内容
• 源码中可检测到"nextExport":true、"autoExport":true配置，说明页面属于构建时生成的静态导出场景；结合Next.js官方文档说明，默认配置下Next.js会为每个页面提前生成HTML完成预渲染，无论是SSR还是静态生成模式，都应在构建阶段将内容输出到源码中，理论上页面是构建时生成的，不应出现meta标签缺失问题

项目代码配置现状 #

• 项目自定义了_document.tsx与_app.tsx：
  • _document.tsx中保留了next/document导出的Head组件，配置了Material-UI的服务端样式收集逻辑
  • _app.tsx中仅做全局状态、主题、布局注入，手动在全局Head中添加的固定meta标签可正常出现在源码中，但按页面动态配置的标签始终无法输出
• 项目基于next-seo封装了PageHead组件，直接返回NextSeo配置，按页面传入的标题、描述、图片参数生成对应的OpenGraph、Twitter Card配置，在首页、带动态参数的详情页中均引入了该组件
• 两类页面的渲染模式：
  • 首页：采用无外部依赖的静态生成模式
  • 详情页：采用搭配getStaticPaths与getStaticProps的增量静态再生成模式
  • 两类页面均未使用getServerSideProps，但两类页面的源码中都没有出现配置的meta标签

已完成的排查尝试 #

• 改用getServerSideProps强制服务端渲染
• 移除自定义文件中的Head组件
• 在页面中直接使用原生head标签或next/head手动编写meta标签
  以上所有操作均未解决问题
• 对照Next.js关于Head组件的使用规则，已确认配置的meta标签均为Head的直接子元素，符合使用规范
• 查阅了多个同主题的社区讨论仍未定位到问题根因，希望获取相关排查方向提示

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