Nuxt 3单页面自定义Meta描述未被检测，如何让分析工具识别？

问题原因 #

Nuxt3默认会保留全局和页面中所有同名的meta标签，导致页面渲染时同时存在全局fallback的description和页面专属的description，在线检测工具通常会读取第一个出现的标签，因此显示全局内容。

解决方案 #

通过给meta标签添加唯一标识（hid或key属性），让页面级的meta覆盖全局的对应标签。

1. 修改全局配置（nuxt.config.js） #

给全局的description meta添加hid属性：

export default defineNuxtConfig ({
  app: {
    head: {
      meta: [
        { 
          name: 'description', 
          content: 'This is the fallback meta description',
          hid: 'description' // 添加唯一标识
        }
      ]
    }
  }
})

2. 修改页面级配置 #

在首页和关于页的useHead中，给对应的description meta添加相同的hid属性：

首页：

<script setup>
  useHead({
    meta: [
      { 
        name: 'description', 
        content: 'This is my Home page meta description',
        hid: 'description' // 匹配全局标识，实现替换
      }
    ]
  });
</script>

关于页：

<script setup>
  useHead({
    meta: [
      { 
        name: 'description', 
        content: 'This is my About page meta description',
        hid: 'description'
      }
    ]
  });
</script>

3. 静态站点额外检查 #

如果你的站点是静态生成的，需要重新运行nuxt generate命令生成最新的静态文件，确保检测工具读取到的是更新后的页面内容。

原理说明 #

在Nuxt3中，当meta标签拥有相同的hid（或key）属性时，后声明的页面级配置会覆盖全局的配置，最终页面只会渲染出页面专属的description标签，在线检测工具就能正确识别到对应页面的Meta描述了。

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