2020/05/26

@nuxtjs/sitemapモジュールを使ってsitemapを作成する

概要

@nuxtjs/sitemapモジュールを使って、本サイトのsitemapの自動生成ができるように対応しました。

こちらの記事では、コマンドラインで、sitemapを生成していたのですが
どうやら@nuxtjs/sitemapモジュールは生成したsitemapのキャッシュやgzip対応なども含まれていて
大変便利なことがわかったので、以前の方式をやめて、こちらのmoduleを使うように移行しました。

実施事項

moduleのインストール

% yarn add @nuxtjs/sitemap

nuxt.config.jsの修正

（少しデフォルメはしてますが）以下のように修正しました。

  // modulesに@nuxtjs/sitemapを追加
  modules: [
    '@nuxtjs/sitemap'
  ],

  // 以下をごっそり追加
  sitemap: {
    hostname: 'https://this-site.com',
    gzip: true,
    path: '/sitemap.xml',
    cacheTime: 1000 * 60 * 60 * 24, // 1 day
    routes: async () => {
      const apiBaseUrl = 'https://api-host/api/v1'
      const results = [
        {
          url: '/',
          changefreq: 'daily'
        },
        {
          url: '/about',
          changefreq: 'monthly'
        }
      ]
      const { data } = await axios.get(`${apiBaseUrl}/entities/`)
      if (data) {
        data.forEach((entity) => {
          results.push({
            url: `/entities/${entity.slug}`,
            lastmod: entity.updated_at,
            changefreq: 'weekly'
          })
        })
      }
      return results
    }
  },

以上の対応で、以下のrouteが追加されて、sitemapの生成を確認できました。

@nuxtjs/sitemapモジュールを使ってsitemapを作成する

概要

実施事項

関連する記事

Table of Contents