前言

配置站点地图 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 更像是一种通用的规则,这种规则对于愿意遵守这个规则的爬虫是有效的,对于不遵守规则的,这种方式的控制其实并没有用,大家不要过度依赖。

分类: nuxt 标签: 爬虫Nuxt3SEO站点地图sitemap.xmlrobots.txt

评论

全部评论 2

  1. 血狼
    血狼
    Google Chrome Windows 10
    第一眼以为是掘金,后来发现不对劲,掘金怎么会有留言时候输入邮箱。主题不错,很像掘金
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @血狼高保真,HD[胜利]

目录