Nuxt3项目页面SEO元数据无法在源码中更新的问题求助

问题核心原因 #

页面中useSeoMeta/useHead的调用时机错误（比如放在onMounted等客户端专属钩子内），导致SSR渲染页面源码时未执行页面专属配置，仅客户端运行时才替换，最终出现"页面显示变了但源码还是全局值"的情况。

解决方案步骤 #

1. 正确调用页面SEO配置
   必须在组件的setup顶层直接调用useSeoMeta或useHead，不要包裹在客户端钩子中。这样SSR渲染时会优先执行页面配置，覆盖全局值。

   示例代码（Home.vue）：

   <script setup>
   // 直接在setup顶层执行，SSR阶段会处理
   useSeoMeta({
     title: '首页专属标题',
     description: '首页专属描述',
     ogTitle: '首页OG标题',
     ogDescription: '首页OG描述'
   })
   
   // 或使用useHead写法
   // useHead({
   //   title: '首页专属标题',
   //   meta: [
   //     { name: 'description', content: '首页专属描述' },
   //     { property: 'og:title', content: '首页OG标题' }
   //   ]
   // })
   </script>
   

2. 核对全局配置格式
   确保nuxt.config.ts中使用Nuxt3正确的app.head字段配置全局元数据，而非旧版的head字段：

   export default defineNuxtConfig({
     app: {
       head: {
         title: '全局默认标题',
         meta: [
           { name: 'description', content: '全局默认描述' },
           { property: 'og:title', content: '全局OG标题' }
         ]
       }
     }
   })
   

3. 保证配置键完全匹配
   页面配置的元数据键必须和全局配置完全一致才能实现覆盖。比如全局配置了name="description"，页面也要用description（useSeoMeta）或对应格式的meta对象，不能用不同的键名。

4. 确认SSR模式开启
   Nuxt3默认ssr: true，如果手动设置为false（纯客户端渲染），源码中的元数据始终是全局配置，客户端运行时才替换。若需要源码中显示页面专属元数据，需保持ssr: true。

5. 静态站点需重新生成
   若项目是静态站点（使用nuxt generate），修改页面SEO配置后需重新执行nuxt generate，预渲染生成包含最新元数据的静态HTML文件。

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