Nuxt3 SEO配置站点地图sitemap.xml和robots.txt

前言

配置站点地图 sitemap.xml和robots.txt有利于SEO的快速抓取，对于一些站点工具来讲，站点地图可以帮助快速分析整个站点的内容，robots则更好的控制爬虫的抓取。

准备工作

安装nuxt的seo整合模块：@nuxtjs/seo

pnpm i @nuxtjs/seo -D

nuxt.config.ts中加入该模块：

export default defineNuxtConfig({
  modules: ['@nuxtjs/seo']
})

配置站点链接

事实上我们还应该配置一下站点的链接，站点链接用于在站点地图中拼接出完整的访问链接，但是在开发模式下站点地图的链接只能通过右侧提示查看，只有在打包后才会真实生效。

我们有两种配置方式：

// nuxt.config.ts
export default defineNuxtConfig({
  site: {
    url: 'https://example.com',
  },
})

或者在环境变量中配置：

# 网站 URL
NUXT_PUBLIC_SITE_URL="http://localhost:3000"

我自己是使用的环境变量，这样方便切换不同的环境，不用去改动nuxt.config.ts配置文件。

先看一下效果：

左侧的实际内容显示的是项目启动的url拼接的完整链接，右侧表示我们实际配置的站点链接，打包后左侧的就会变成正确的配置内容，暂时不清楚nuxt为什么这么设计。

配置 sitemap.xml

在nuxt配置文件中添加以下内容：

// nuxt.config.ts
export default defineNuxtConfig({
  /** sitemap */
  sitemap: {
      cacheMaxAgeSeconds: 6 * 60 * 60, //6小时缓存
      autoLastmod: true // 用于爬虫抓取
  }
})

此时我们启动项目，可以通过访问项目域名/sitemap.xml的形式访问到站点地图文件。

但是有的链接地址是动态的，比如我们会有[id].vue这种形式的页面，id是动态参数，这个时候自动生成的站点文件是不会有这部分链接内容的，我们需要自己手动去生成。

黑白名单过滤

export default defineNuxtConfig({
  sitemap: {
    // exclude all URLs that start with /secret
    exclude: ['/secret/**'],
    // include all URLs that start with /public
    include: ['/public/**'],
  }
})

需要注意，黑白名单其实会和下面robots的disallow配置合并，如果站点地图没有设置过滤，但是robots中设置disallow，那么站点地图中也不会有对应的url，哪怕你没有设置exclude。

动态url

比较省事的操作就是去自己创建一个server api，可以参考下文档：Server

在项目根目录创建：/server/api/sitemap.ts

import type { PageListResult } from "@/api/bookmark";
import type { RequestResult } from "@/composables/useRequest/types";

export default defineSitemapEventHandler(async () => {
    try {
        const config = useRuntimeConfig();
        const res: RequestResult<PageListResult> = await $fetch("/page/list", {
            baseURL: config.public.apiUrl,
            method: "GET"
        });

        const routeList = res.data.map(({ id }) => {
            return { loc: `/bookmark-page/${id}` };
        });

        return routeList ?? [];
    } catch (error) {
        console.error("获取sitemap失败", error);
        return [];
    }
});

可以看到我们默认导出了一个defineSitemapEventHandler函数，在函数中我们可以通过useRuntimeConfig来获取环境变量配置，这点在之前的文章有讲过。

通过环境变量配置我们可以获取到api的url地址，然后自己去拼接一个请求，这个请求就是用于获取动态id的，这个地方就看大家自己项目中的实现，最后需要返回一个数组，这个数组有两种格式：

// 格式1
[ { loc: "/xxx" }, { loc: "/xxx" } ]

// 格式2
[ "/xxx", "/xxx" ]

这个就看自己喜好了。

写好后再去配置文件中使用这个server api

// nuxt.config.ts
export default defineNuxtConfig({
  /** sitemap */
  sitemap: {
    sources: ["/api/sitemap"],
      cacheMaxAgeSeconds: 6 * 60 * 60, //6小时缓存
      autoLastmod: true // 用于爬虫抓取
  }
})

如果你有多个，就可以配置多个，毕竟这是一个数组。

robots.txt 生成

在查看官方文档时被内容给误导了，官方说我们可以自己直接在项目中创建robots.txt，然后nuxt会自动将多个robots文件合并，实际上并不会，正确的操作是在nuxt.config.ts就配置好，让它自己去生成。

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ["/robots.txt"]
    }
  },
  /** robots */
  robots: {
    disallow: ["/admin", "/bind-google"]
  }
})

nitro用于表示预渲染一个路由，通过prerender去配置具体的路由。

因为robots.txt本身没有什么需要动态控制的，所以在打包时生成一个预渲染文件，可以节省不少性能和时间。

robots就是具体的配置，我这里表示我这个站点，disallow禁止抓取/admin和/bind-google相关的路由，这样爬虫就不会去抓取跟后台管理相关的页面了。

以/admin为例，/admin/xxx这一系列的路由，都不会去爬取了。

生成的robots.txt内容如下：

# START nuxt-simple-robots (indexable)
User-agent: *
Disallow: /admin
Disallow: /bind-google

Sitemap: https://www.xxx.com/sitemap.xml
# END nuxt-simple-robots

可以看到这里居然还有Sitemap的访问地址，其中前缀链接就是我们之前配置的站点链接。

如果你需要针对不同的爬虫来定义，可以通过分组的形式去配置：

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ["/robots.txt"]
    }
  },
  /** robots */
  robots: {
    groups: [
      {
        userAgent: ['AdsBot-Google-Mobile', 'AdsBot-Google-Mobile-Apps'],
        disallow: ['/admin'],
        allow: ['/admin/login']
      },
      {
        userAgent: ['*'],
        disallow: ['/secret']
      }
    ]
  }
})

生成内容：

# START nuxt-simple-robots (indexable)
User-agent: AdsBot-Google-Mobile
User-agent: AdsBot-Google-Mobile-Apps
Allow: /admin/login
Disallow: /admin

User-agent: *
Disallow: /secret

Sitemap: https://www.xxx.com/sitemap.xml
# END nuxt-simple-robots

知识补充：

当我们配置了disallow后，除了在robots.txt上会生成对于的内容，nuxt还会在对应的页面生成meta标签：

<meta name="robots" content="noindex">

这个生成的内容前提是服务端生成的html内容，也就是首次加载时可以看到，你不能说已经交给浏览器来实现渲染了，你来看meta信息，那你查看的内容就不准确了。

除了meta标签，在头信息中也会携带禁止爬取的配置：x-robots-tag: noindex, nofollow

除了nuxt会自动配置，我们也可以通过useHead自己手动生成meta标签：

useHead({
  meta: [{ name: 'robots', content: 'noindex' }]
})

如果你还想生成x-robots-tag头信息，可以自己去配置路由规则：

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/secret': { robots: 'noindex' },
  }
})

当然我们使用自动的就已经足够了。

事实上 robots.txt 更像是一种通用的规则，这种规则对于愿意遵守这个规则的爬虫是有效的，对于不遵守规则的，这种方式的控制其实并没有用，大家不要过度依赖。