Nuxt Open Graph元标签在Netlify部署后不生效求助

1. 检查 Netlify 构建与部署配置 #

• 确认构建命令为 nuxt generate（静态站点模式）或 nuxt build && nuxt start（SSR 模式），避免使用旧的预渲染脚本导致页面元标签未正确生成
• 验证发布目录设置为 dist（Nuxt 默认静态生成目录），路径错误会导致部署旧的静态文件

2. 修正页面元标签写法 #

确保页面通过 head() 方法动态生成元标签，并使用 hid 属性作为唯一标识覆盖全局配置，示例代码：

// 博客文章页面代码示例
export default {
  async asyncData({ params }) {
    const post = await fetch(`/api/posts/${params.slug}`).then(res => res.json())
    return { post }
  },
  head() {
    return {
      title: this.post.title,
      meta: [
        { hid: 'description', name: 'description', content: this.post.excerpt },
        { hid: 'og:title', property: 'og:title', content: this.post.title },
        { hid: 'og:description', property: 'og:description', content: this.post.excerpt },
        { hid: 'og:image', property: 'og:image', content: this.post.cover }
      ]
    }
  }
}

3. 清除 Netlify 缓存 #

• 在 Netlify 后台「Deploys」页面找到最新部署，点击「Clear cache and deploy site」彻底清除旧缓存
• 使用隐私模式打开元标签检测工具，避免本地缓存干扰结果

4. 验证 Nuxt 核心配置 #

静态生成模式下，确保 nuxt.config.js 配置正确：

export default {
  ssr: true,
  target: 'static',
  generate: {
    crawler: true, // 自动爬取动态路由生成静态文件
    fallback: '404.html'
  }
}

如果是手动配置动态路由，需在 generate.routes 中添加所有博客文章的 slug：

generate: {
  routes: async () => {
    const posts = await fetch('/api/posts').then(res => res.json())
    return posts.map(post => `/blog/${post.slug}`)
  }
}

5. 检查预渲染后的静态文件 #

部署后下载 Netlify 上的静态文件（Deploys 页面点击「Download deploy」），查看对应博客页面的 HTML 源码，确认 <head> 区域的元标签是否为页面独有内容。若源码仍显示全局标签，说明 Nuxt 生成阶段存在问题，需排查页面 head() 方法的执行逻辑

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