Nuxt.jsでサイト構築した時にSEO対策で必要になるサイトマップ
サーバサイドで個別にサイトマップを生成してサイトマップファイルを生成してもいいのですが、もっと簡単に実装する方法もあるので紹介します。

@nuxtjs/sitemap

@nuxtjs/sitemapはNuxt.jsでサイトマップを生成するモジュールです。

インストール

npm install --save @nuxtjs/sitemap

設定方法

nuxt.config.js にサイトマップの設定を行います。

nuxt.config.js

module.exports = {
  modules: [
    ...,
    '@nuxtjs/sitemap'
  ],
 sitemap: {
    path: '/sitemap.xml',
    hostname: 'https://example.com',
    routes (callback) {
      const api = 'https://example.com/'
      axios.get(api)
        .then((response) => {
          const posts = response.data
          const routes = posts.map((post) => {
            return post.url
          })
          callback(null, routes)
        })
        .catch(callback)
    }
}

サイトマップオプション

項目	default	概要
routes	[]	設定する動的サイトマップ
path	/sitemap.xml	生成されたサイトマップのUR
hostname		ホストネーム
cacheTime	1000 * 60 * 15 (15 Minutes)	SSRのキャッシュ設定
exclude	[]	除外する静的ページ
filter
gzip	false	.xml.gzgzipで圧縮されたサイトマップの作成を有効にします。
trailingSlash	false	各ルートURLに末尾のスラッシュを追加します（例：/page/1=> /page/1/）

複数サイトマップを設定したい場合

nuxt.config.js

{
  sitemap: {
    path: '/sitempap/index.xml',
    hostname: 'https://example.com',
    sitemaps: [
      {
        path: '/sitemap/static.xml',
      }, 
      {
        path: '/sitemap/sitemap2.xml',
        exclude: ['/**'], // 静的ファイル除外
        routes (callback) {
           // 生成したいURL
        }
    ]
  }
}

このように設定することでSSRでも自由にサイトマップができました。
非常に便利ですので是非一度利用してみてください。