如何在构建时为Nuxt3动态路由添加Meta标签？

1. 静态预生成（SSG）—— 适用于构建前已知所有路由的场景 #

如果你的动态路由路径在构建阶段就能确定（比如从CMS、本地JSON文件或数据库提前获取所有可能的路由），可以用Nuxt 3的静态站点生成功能，构建时直接把元标签写入静态HTML，爬虫能直接读取。

步骤：

• 在nuxt.config.ts中配置预渲染路由：

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: async () => {
        // 从数据源获取所有动态路由，比如返回['/post/1', '/post/2']
        const posts = await fetchPosts()
        return posts.map(post => `/post/${post.id}`)
      }
    }
  }
})

• 页面中用useHead动态绑定元标签（构建时会被注入到静态HTML）：

<script setup>
const route = useRoute()
// 假设post是当前路由对应的内容数据
const post = await fetchPost(route.params.id)

useHead({
  meta: [
    {
      hid: 'og:url',
      property: 'og:url',
      content: `https://my-site.com${route.path}`
    },
    {
      hid: 'og:title',
      property: 'og:title',
      content: post.title
    }
  ]
})
</script>

运行npx nuxt generate后，每个动态路由都会生成独立的静态HTML文件，里面的OG标签是预渲染好的，爬虫请求时直接读取，不需要执行JS。

2. 边缘渲染/增量静态再生（ESR/ISR）—— 适用于路由过多或内容动态更新的场景 #

如果路由数量太多没法全量预生成，或者内容会不定期更新，用ESR或ISR可以在边缘节点按需渲染页面并缓存，既不用全量SSR，又能让爬虫拿到带元标签的HTML。

以Vercel为例，配置方式：

export default defineNuxtConfig({
  nitro: {
    preset: 'vercel',
    routeRules: {
      // 对所有动态路由开启ISR，缓存1小时
      '/dynamic/**': { isr: 3600 }
    }
  }
})

当第一个请求（无论是用户还是爬虫）到达时，边缘节点会渲染页面并生成缓存，后续请求直接返回缓存的HTML。缓存过期后，会自动重新渲染更新内容，兼顾动态性和爬虫友好性。

3. 爬虫UA检测（需服务器控制权） #

如果有自己的服务器，可以通过检测请求的User-Agent识别OG爬虫，针对爬虫请求返回渲染好的HTML，普通用户仍走客户端渲染。

在服务器中间件中实现：

// server/middleware/crawler.ts
export default defineEventHandler(async (event) => {
  const userAgent = getRequestHeader(event, 'user-agent') || ''
  // 常见OG爬虫的UA关键词
  const crawlerKeywords = ['facebookexternalhit', 'twitterbot', 'googlebot', 'bingbot']
  
  if (crawlerKeywords.some(keyword => userAgent.toLowerCase().includes(keyword))) {
    // 渲染当前页面为HTML并返回
    const html = await useRender(event, event.node.req.url)
    event.node.res.end(html)
  }
})

这种方式需要维护爬虫UA列表，且依赖服务器环境，适合无法用SSG/ISR的场景。

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