如何动态设置Meta标签？API数据下实现源码可见的SEO元信息

核心问题在于API请求晚于SEO元数据的渲染时机，要让动态元数据出现在页面源码中，必须确保数据在服务器端渲染（SSR）/静态生成（SSG）阶段提前获取完成，再基于数据设置元数据。以下是具体实现方案：

方案1：组件内预取数据后设置服务器端SEO元数据 #

使用useFetch或useAsyncData在组件初始化时（服务器端）等待API响应完成，再调用useServerSeoMeta生成元数据：

<script setup>
// 优先在服务器端完成API请求
const { data: post } = await useFetch('/api/posts/[id]', {
  params: { id: route.params.id }
})

// 数据就绪后生成服务器端SEO元数据
useServerSeoMeta({
  title: post.value?.title || '默认标题',
  description: post.value?.excerpt || '默认描述',
  ogTitle: post.value?.title || '默认标题',
  ogDescription: post.value?.excerpt || '默认描述'
})
</script>

await useFetch会阻塞组件在服务器端的渲染流程，直到API返回数据，确保useServerSeoMeta能拿到有效数据生成元标签，最终会出现在页面源码中。

方案2：通过definePageMeta异步配置元数据 #

Nuxt 3支持在definePageMeta中使用异步函数，直接在页面元数据配置阶段获取API数据：

<script setup>
// 抽复用的API请求函数，避免重复请求
const getPost = async () => {
  const { data } = await useFetch('/api/posts/[id]', {
    params: { id: route.params.id }
  })
  return data.value
}

definePageMeta({
  // 异步设置标题
  async title() {
    const post = await getPost()
    return post?.title || '默认标题'
  },
  // 异步设置其他meta标签
  async meta() {
    const post = await getPost()
    return [
      { name: 'description', content: post?.excerpt || '默认描述' },
      { property: 'og:title', content: post?.title || '默认标题' }
    ]
  }
})

// 组件内也可复用获取到的数据
const post = await getPost()
</script>

关键注意事项 #

• 确保项目处于SSR/SSG模式：SPA模式下所有渲染在客户端完成，页面源码只会包含初始空壳，无法显示动态元数据。若使用SSG，需在nuxt.config.ts中配置动态路由预渲染，例如：

  export default defineNuxtConfig({
    nitro: {
      prerender: {
        routes: ['/posts/1', '/posts/2'] // 或通过函数动态生成路由
      }
    }
  })
  

• 避免在客户端钩子（如onMounted）中设置元数据：这类钩子仅在客户端执行，服务器端不会处理，因此元数据不会出现在页面源码中。
• 优先使用useServerSeoMeta而非普通useHead：前者专门针对服务器端渲染场景，确保元数据被注入到初始HTML中。

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