Nuxt 3 i18n动态Meta标题与描述配置问题求助

你的问题核心在于服务端渲染阶段Meta数据未正确填充，导致爬虫抓取到的是初始空值对应的默认域名（localhost），而非正确的页面标题。下面是修正后的实现方式：

核心思路 #

必须确保服务端预取数据完成后，再生成SEO Meta标签，这样服务端输出的HTML里就会包含正确的Meta内容，爬虫直接抓取完整的服务端渲染结果，不会看到临时的localhost标题。

修正后的代码实现 #

<script setup>
const route = useRoute()
const { t } = useI18n()

// 1. 优先在服务端预取文章数据，确保Meta生成前已有数据
const { data: article } = await useFetch(`https://test.com/api/de/article/${route.params.id}`, {
  server: true // 强制服务端获取，避免客户端先渲染空Meta
})

// 2. 基于已获取的文章数据配置SEO Meta，增加默认值避免空值
const seoMeta = {
  title: article.value?.title || t('default_page_title'),
  ogTitle: article.value?.title || t('default_page_title'),
  description: article.value?.title 
    ? t('page_meta_description', { title: article.value.title }) 
    : t('default_page_description'),
  ogDescription: article.value?.title 
    ? t('page_meta_description', { title: article.value.title }) 
    : t('default_page_description'),
  ogImage: 'http://localhost:3000/logo_4x.png',
  twitterCard: 'summary_large_image'
}

// 3. 仅需调用useServerSeoMeta，Nuxt会自动同步客户端Meta状态
useServerSeoMeta(seoMeta)
</script>

关键优化点说明 #

• 数据预取优先级：将useFetch放在最前面并使用await，确保服务端渲染时已经拿到文章数据，Meta标签生成时直接使用已有数据，而非后续客户端更新。
• 移除冗余调用：不需要同时调用useServerSeoMeta和useSeoMeta，前者会自动处理服务端渲染和客户端 hydration 同步。
• 避免无用解析：useFetch默认会自动解析JSON响应，无需额外调用JSON.parse(data.value)。
• 增加降级默认值：为Meta字段设置默认翻译值，避免数据加载失败时Meta为空。

额外注意事项 #

• 确保Nuxt i18n的服务端locale配置正确，保证t函数在服务端能输出对应语言的翻译内容。
• 生产环境需将ogImage的localhost地址替换为线上域名。

内容的提问来源于stack exchange，提问作者Angelo van Cleef