Nuxt2 SSR动态meta标签爬虫仅抓取nuxt.config默认值问题

排查步骤&修复方案 #

• 校验asyncData接口请求在爬虫场景下的可用性
  社交平台、OG检测工具的爬虫请求有专属UA，很多站点的接口风控、WAF会拦截这类非常规UA，或者给爬虫请求做了特殊降级，导致asyncData在服务端处理爬虫请求时拿不到动态数据，直接触发fallback逻辑返回nuxt.config.js里的默认标签。
  排查方式：在服务端对应页面的asyncData逻辑里加请求日志，模拟主流爬虫UA发起服务端请求，查看接口是否能正常返回动态meta所需数据；同时给asyncData补全try/catch逻辑，避免接口异常时直接返回无数据的错误状态。
• 校验head方法的hid匹配规则
  Nuxt2的head标签合并逻辑以hid字段为唯一标识：如果nuxt.config.js中配置的默认OG标签设置了专属hid，但是页面内动态生成的OG标签没有使用完全一致的hid值，服务端渲染时会同时输出默认标签、动态标签两组OG标签，绝大多数爬虫会优先读取HTML中最先出现的标签，也就是默认配置的内容。
  排查方式：直接用curl命令拉取对应页面的原始HTML源码，检索meta标签段，如果同时存在两组同属性的OG标签，就是hid不匹配导致的问题。
  正确写法参考：

  // 页面内head方法的hid必须和nuxt.config.js内默认配置的hid完全一致
  head() {
    return {
      title: this.dynamicTitle,
      meta: [
        { hid: 'og:title', property: 'og:title', content: this.dynamicTitle },
        { hid: 'og:description', property: 'og:description', content: this.dynamicDesc },
        { hid: 'og:image', property: 'og:image', content: this.dynamicCover }
      ]
    }
  }
  

• 校验全链路缓存规则
  即便等待缓存过期，如果Nginx、CDN、Nuxt服务端渲染缓存配置了整页HTML缓存，且首次生成缓存的请求未拿到动态数据（比如首次触发缓存的请求遇到接口报错、开发环境访问触发了缓存），后续所有请求拿到的都是缓存内带默认标签的HTML版本。
  排查方式：绕过CDN直接访问源站服务端口，用curl拉取源码查看OG标签是否正确：如果源站返回正确、走CDN返回错误，直接刷新对应URL的CDN缓存即可；如果源站也返回默认标签，检查Nuxt配置中的render.cache项、是否启用了PWA模块的服务端HTML缓存策略，清空对应缓存即可。
• 校验是否触发SSR降级
  如果页面根级内容使用了<client-only>（或旧版<no-ssr>）包裹、页面存在服务端渲染报错被Nuxt自动捕获降级，服务端返回的初始HTML只会包含默认标签，动态OG标签需要客户端执行JS才会插入——而所有OG爬虫都不会执行页面JS，只会抓取初始HTML内容，自然只能拿到默认标签。
  排查方式：查看curl拉取的原始HTML源码，如果找不到动态渲染的业务文本内容，只有空的Nuxt挂载节点，就是触发了SSR降级，去服务端日志定位对应页面的渲染报错，修复导致服务端执行失败的代码即可。

验证修复效果不要依赖第三方OG检测工具，先通过curl确认原始HTML中已经正确输出动态OG标签，再清空全链路缓存等待爬虫重抓即可。

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