Nuxt 4 SEO 配置备忘录

Nuxt 4 SEO 配置备忘录

SSR（服务端渲染）​ 是独立站的首选模式。Google 爬虫拿到的是已经渲染好的完整 HTML，不需要执行 JavaScript 就能读取内容，收录最稳定、最快。

SSG（静态站点生成）​ 适合内容相对固定的页面，比如博客、落地页。构建时预渲染成静态 HTML，性能极佳，CDN 直接分发，Core Web Vitals 表现优秀。

SPA（纯客户端渲染）​ 对 SEO 最不友好，Google 虽然能执行 JS，但爬取延迟高、不稳定，独立站应当避免将核心页面设置为纯 SPA 模式。

一、渲染模式配置

在 nuxt.config.ts 中用 routeRules 为不同路由设置渲染策略：

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },        // 首页静态预渲染
    '/blog/**': { ssr: true },       // 博客页 SSR
    '/product/**': { ssr: true },    // 产品页 SSR
    '/dashboard/**': { ssr: false }  // 后台页面 SPA
  }
})

二、每个页面的 Meta 管理

使用 useSeoMeta composable，每个页面单独配置：

useSeoMeta({
  title: '页面标题 | 品牌名',
  description: '页面描述，控制在150字符以内',
  ogTitle: '社交分享标题',
  ogDescription: '社交分享描述',
  ogImage: 'https://yoursite.com/og-image.jpg', // 必须是绝对路径，尺寸 1200×630px
  twitterCard: 'summary_large_image'
})

三、Canonical 标签

useHead({
  link: [{ rel: 'canonical', href: 'https://yoursite.com/your-page' }]
})

四、JSON-LD 结构化数据

useHead({
  script: [
    {
      type: 'application/ld+json',
      innerHTML: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'Product',
        name: '产品名称',
        description: '产品描述'
      })
    }
  ]
})

五、推荐模块

模块	用途
@nuxtjs/sitemap	自动生成 sitemap.xml
@nuxt/image	图片优化，自动 WebP、懒加载
@nuxtjs/i18n	多语言支持
nuxt-schema-org	结构化数据管理

六、图片组件

用 <NuxtImg> 替代原生 <img>：

<NuxtImg
  src="/images/hero.jpg"
  alt="描述性文字"
  width="1200"
  height="630"
  format="webp"
  loading="lazy"
/>

七、客户端专属逻辑处理

避免水合错误，将依赖 window / localStorage 的组件包裹：

<ClientOnly>
  <ComponentThatUsesWindow />
</ClientOnly>

八、重定向配置

routeRules: {
  '/old-page': { redirect: '/new-page' } // 301 重定向
}

九、多语言 hreflang 配置

使用 @nuxtjs/i18n 模块后，在配置中启用 hreflang 自动生成：

i18n: {
  locales: ['en', 'zh'],
  defaultLocale: 'en',
  strategy: 'prefix_except_default'
}

十、Sitemap 自动生成

手动维护 Sitemap 在动态站点中几乎不现实。推荐使用官方模块 ​@nuxtjs/sitemap​，它能自动根据你的路由生成 sitemap.xml，并支持动态路由（如博客文章、产品页）的自定义配置：

export default defineNuxtConfig({
  modules: ['@nuxtjs/sitemap'],
  sitemap: {
    hostname: 'https://yoursite.com',
    // 动态路由需要手动提供 URL 列表或通过 API 获取
  }
})