nuxt3 SEO相关优化

1. TDK（标题、描述、关键词）设置

推荐使用Nuxt的钩子useSeoMeta设置tdk

<script>
useSeoMeta({
  title: _title,
  ogTitle: _title,
  keywords: _keywords,
  description: _description,
  ogDescription: _description,
  ogImage: _img,
  twitterCard: _img,
});
</script>

2. sitemap.xml

通过nuxt-simple-sitemap实现

npm i nuxt-simple-sitemap -D

export default defineNuxtConfig({
  modules: ['nuxt-simple-sitemap'],
  sitemap: {
    sitemaps: false, // 生成多个sitemaps
    // xsl: false, // xsl样式表的引用路径，默认"/__sitemap__/style.xsl"（false禁用）
    exclude: [
      "/404",
      "/403",
    ], // 不需要搜索引擎抓seo的路径
    autoLastmod: true, // 自动检测每个URL的lastmod日期
  },
})

3.robots.txt

通过nuxt-simple-robots实现

npm i nuxt-simple-robots -D

export default defineNuxtConfig({
  modules: ['nuxt-simple-sitemap'],
  robots: {
    blockNonSeoBots: true,
    disallowNonIndexableRoutes: true, // 阻止一些不友好而且没意义的爬虫
    disallow: [
      '/sigin',
      '/admin'
    ], // 不建议爬取的链接
    // allow: ["*"], // 建议爬取的链接，不填爬虫默认全部建议爬取
  },
})

4.特殊配置-路由规则

Nuxt支持一个项目中不同的页面使用不同的渲染模式，比如一个SEO项目中，可能某些页面不需要SSR（如注册页、admin页等），可以通过配置路由规则，以混合渲染的方式实现整个项目

export default defineNuxtConfig({
  routeRules: {
    // 禁用SSR，使用客户端渲染
    '/admin/**': {
      ssr: false
    },
    // 按需生成该页面，并使其拥有一天的缓存
    "/sitemap.xml": {
      swr: 3600 * 24,
    },
    ...
  },
})

• ssr：禁用服务端渲染，改为SPA单页面应用渲染模式

• swr：stale-while-revalidate的宽限时间，swr是什么可以看这篇文章: stale-while-revalidate / swr 一看就懂，一用就会

• headers：为response添加headers

• cors：是否自动添加cors标头，可以被headers覆盖

• prerender：是否预渲染（预渲染会将渲染好的html文件当做静态资源打包）

• experimentalNoScripts：禁用JS脚本