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 管理使用useSeoMetacomposable每个页面单独配置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/ldjson, innerHTML: JSON.stringify({ context: https://schema.org, type: Product, name: 产品名称, description: 产品描述 }) } ] })五、推荐模块模块用途nuxtjs/sitemap自动生成 sitemap.xmlnuxt/image图片优化自动 WebP、懒加载nuxtjs/i18n多语言支持nuxt-schema-org结构化数据管理六、图片组件用NuxtImg替代原生imgNuxtImg src/images/hero.jpg alt描述性文字 width1200 height630 formatwebp loadinglazy /七、客户端专属逻辑处理避免水合错误将依赖 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 获取 } })