「代码分享」配置 Nuxt3 SEO | 站点地图 sitemap.xml 和 robots.txt插图

在进行网站的 SEO 优化过程中，配置站点地图 sitemap.xml 和 robots.txt 是非常关键的一步。这些配置可以帮助搜索引擎快速抓取您网站的内容，同时也能更好地控制爬虫的行为。

「代码分享」配置 Nuxt3 SEO | 站点地图 sitemap.xml 和 robots.txt插图1
站点改造

准备工作

首先，确保您已安装了 Nuxt 的 SEO 整合模块 @nuxtjs/seo：

pnpm i @nuxtjs/seo -D

然后，在 nuxt.config.ts 文件中添加该模块：

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

配置站点链接

除了安装模块，我们还需要配置站点链接，这样在站点地图中才能正确拼接出完整的访问链接。您可以在 nuxt.config.ts 中配置站点的 URL：

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

或者，您可以使用环境变量配置：

NUXT_PUBLIC_SITE_URL="http://localhost:3000"

我个人更喜欢使用环境变量进行配置，这样可以方便地在不同的环境之间切换，而不必修改 nuxt.config.ts 文件。

配置 sitemap.xml

在 nuxt.config.ts 中添加以下内容来配置站点地图：

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

启动项目后，您可以通过访问项目域名加 /sitemap.xml 的方式来查看站点地图文件。

对于动态链接（例如带有动态参数的页面），自动生成的站点地图文件可能不会包含这部分链接内容，您需要手动生成这些内容。

处理动态 URL

为了处理动态 URL，您可以创建一个 server API。首先，在项目根目录创建 /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 [];
  }
});

然后，在配置文件中使用这个 server API：

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

如果有多个 server API，您可以配置多个源。这里需要根据您的项目实际情况进行调整和定制。

生成 robots.txt

在 nuxt.config.ts 中配置 robots.txt 的生成：

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

这里使用 nitro 来预渲染路由，并配置了具体的 robots 规则，例如禁止抓取 /admin 和 /bind-google 相关的页面。

生成的 robots.txt 内容会包含所配置的规则，同时也会包含之前配置的站点地图链接。

以上是配置 Nuxt3 中站点地图和 robots.txt 的基本步骤。通过这些配置，您可以更好地控制搜索引擎爬虫的行为，提升网站的 SEO 效果。