Nuxt.js动态Open Graph标签不生效问题求助

嘿，这个问题我太熟悉了！我之前在做Nuxt博客项目的时候也踩过一模一样的坑 😅

核心原因 #

Facebook、Twitter这类平台的分享爬虫不会执行客户端JavaScript——它们只会抓取页面的初始服务器渲染HTML。你当前的代码虽然能在浏览器加载后通过JS动态更新元标签（所以元素检查能看到），但爬虫拿到的是Nuxt输出的初始静态HTML，也就是你设置的默认OG标签。

具体问题点&修复方案 #

1. 修正OG标签的属性规范

OG标签标准是使用property属性，而不是name。虽然浏览器可能兼容name，但爬虫对property的识别更可靠，所以先把所有OG/twitter标签的name改成property。

2. 避免服务器端访问window

window.location.href在服务器端渲染时会直接报错，因为服务器环境没有window对象。我们需要区分客户端和服务器环境来生成正确的页面URL：

• 客户端用window.location.href
• 服务器端用环境变量的基础URL拼接当前路由

3. 确保媒体资源是绝对路径

爬虫无法识别相对路径的图片，所以要把postDetails.image转换成完整的绝对URL（带http/https）。

4. 截断过长的描述内容

OG标签的description有长度限制（一般建议150字符以内），太长会被平台自动截断，影响展示效果。

修改后的完整代码 #

async asyncData({ app, route }) { 
  let postDetails = await app.$axios.get(`/api/v1/news/single/${route.params.id}`); 
  postDetails = postDetails.data.post; 

  // 转换图片为绝对路径（假设你的BASE_URL在环境变量中配置）
  if (postDetails.image && !postDetails.image.startsWith('http')) {
    postDetails.image = `${process.env.BASE_URL}${postDetails.image}`;
  }

  return { postDetails }; 
}, 
head() { 
  // 跨环境生成正确的页面URL
  const currentUrl = process.client 
    ? window.location.href 
    : `${process.env.BASE_URL}${this.$route.fullPath}`;

  // 截断描述，控制长度
  const truncatedDescription = this.postDetails.body.substring(0, 150);

  return { 
    meta: [ 
      { hid: 'title', name: "title", content: this.postDetails.title }, 
      { hid: "description", name: "description", content: truncatedDescription }, 
      { hid: "twitter:image", property: "twitter:image", content: this.postDetails.image }, 
      { hid: "twitter:card", property: "twitter:card", content: "summary_large_image" }, 
      { hid: "og:image", property: "og:image", content: this.postDetails.image }, 
      { hid: "og:image:secure_url", property: "og:image:secure_url", content: this.postDetails.image }, 
      { hid: "og:title", property: "og:title", content: this.postDetails.title }, 
      { hid: "og:description", property: "og:description", content: truncatedDescription }, 
      { hid: "og:url", property: "og:url", content: currentUrl }, 
      { hid: "og:type", property: "og:type", content: "article" } // 补充OG类型，更符合规范
    ] 
  }; 
}

项目模式调整 #

确保你的Nuxt项目不是纯SPA模式：

• Nuxt 2：在nuxt.config.js中设置mode: 'universal'（SSR模式），或者使用nuxt generate生成静态站点
• Nuxt 3：在nuxt.config.ts中设置ssr: true（SSR模式），或者使用nuxi generate生成静态站点

只有SSR/静态生成模式才能在服务器端/构建时把动态元标签渲染到初始HTML中，让爬虫能直接抓取到。

测试验证 #

你可以用平台官方的调试工具重新抓取链接，查看爬虫实际获取到的元标签内容——这能帮你快速验证修复是否生效。

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