Nuxt.js生产环境Open Graph标签在LinkedIn/Twitter预览失效问题

AI 小北

2026-10-4

问题排查与解决方案

修正OG标签属性规范
OpenGraph协议明确要求所有og:开头的meta标签必须使用property属性，你当前代码中og:title配置的是name: 'og:title'，不符合协议标准，Twitter、LinkedIn的爬虫对协议校验比较严格，会直接忽略属性错误的标签。修改对应配置即可：

// 错误写法
{
  hid: 'og:title',
  name: 'og:title',
  content: this.title.replace(' - M.academy', ''),
}
// 正确写法
{
  hid: 'og:title',
  property: 'og:title',
  content: this.title.replace(' - M.academy', ''),
}

其余所有og:前缀的标签都要统一使用property属性，twitter:前缀的标签保留name属性即可。

校验爬虫请求的响应内容
大部分生产环境的CDN、Web应用防火墙会对非常规User-Agent的请求做拦截，或者返回简化的缓存内容。你可以用curl命令模拟社交平台爬虫请求你的页面，确认返回的源码中是否包含完整的OG标签：
模拟Twitter爬虫请求：
curl -A "Twitterbot/1.0" https://m.academy/courses/build-12-factor-nodejs-app-docker/
模拟LinkedIn爬虫请求：
curl -A "LinkedInBot/1.0" https://m.academy/courses/build-12-factor-nodejs-app-docker/
如果返回的内容没有OG标签，将Twitterbot、LinkedInBot两个UA加入服务器/CDN的白名单即可。
清除社交平台缓存
Twitter、LinkedIn的预览工具缓存周期极长，如果你在部署OG标签之前就用这些工具测试过页面，工具会一直读取旧的无OG标签的缓存内容。在对应工具页面手动触发重新抓取，重复请求2-3次即可拉取最新的页面内容。
确认静态资源有效性
检查生产环境process.env.baseUrl配置是否正确，确保生成的og:image、og:url地址公网可正常访问，不存在404、跨域等问题，部分爬虫遇到无效的OG资源地址会直接判定所有OG标签无效。