参考资料

准备工作

安装@nuxtjs/sitemap及nuxt-simple-robots依赖

npx nuxi@latest module add sitemap
npx nuxi@latest module add simple-robots

设置站点配置

此处可使用环境变量

NUXT_PUBLIC_SITE_URL = http://localhost:3000

NUXT_PUBLIC_SITE_URL = https://example.com

export default defineNuxtConfig({
  site: {
    url: process.env.NUXT_PUBLIC_SITE_URL,
  },
})

创建动态URL端点

1.当页面的内容需要依赖后台的增删改查时需要创建动态URL端点生成新的网站地图，此处创建自己的API端点

// server/api/__sitemap__/urls.ts
import http from '~/apis/index'
export default defineSitemapEventHandler(async () => {
    try {
        const [res1, res2, res3] = await Promise.all([
            http.get(`/api/getProductList`),
            http.get(`/api/getBlogList`),
            http.get(`/api/getProjectList`)])
        const Product = res1.data.length ? res1.data.map((item: any) => { return { loc: `/Product/${item.title}` } }) : []
        const Blog = res2.data.length ? res2.data.map((item: any) => { return { loc: `/Blog/${item.title}` } }) : []
        const Project = res3.data.length ? res3.data.map((item: any) => { return { loc: `/Project/${item.title}` } }) : []
        return [...Product, ...Blog, ...Project]
    } catch (error) {
        console.log(error)
        return []
    }
})

2.将端点添加到nuxt.config.ts

export default defineNuxtConfig({
  sitemap: {
    sources: [
      '/api/__sitemap__/urls',
    ]
  }
})

开发环境运行后查看效果

网站地图缓存

缓存站点地图可以帮助减少服务器的负载并提高性能。

默认情况下，生产环境中启用 SWR 缓存，站点地图将缓存 10 分钟。

这是通过覆盖路由规则和利用本机 Nuxt 缓存来配置的。

export default defineNuxtConfig({
  sitemap: {
    cacheMaxAgeSeconds: 3600 // 1 hour
  }
})

自动生成robot.txt

在安装了nuxt-simple-robots的前提下，直接在nuxt.config.ts配置即可

export default defineNuxtConfig({
   nitro: {
    prerender: {
      routes: ["/robots.txt"]
    }
  }
})

打包后查看效果

Nuxt3 SEO优化之动态站点地图