今回はNuxtでサイトマップを生成する方法です。
プロジェクトにmicroCMSを使用しており、お知らせ詳細ページが動的ルーティングで生成されていますが、この詳細ページもサイトマップに追加させるようにします。

@nuxtjs/sitemapモジュールを使用すると簡単にできるようなのでこちらを使用します。axiosも使用しますが、インストール済の前提で進みます。

サイトマップとは？

サイトマップとは、サイト上のページや動画などのファイルについての情報や、各ファイルの関係を伝えるファイルです。Google などの検索エンジンは、このファイルを読み込んで、より高度なクロールを行います。

サイトマップについて

公式ではこんな感じです（ざっくりw）

基本的に適切にリンクがされていれば問題ないので小規模なサイトであればそこまで必要ないかもしれませんが、大規模なサイトになれば作成しておくのが良いとされています。

下記の記事はとてもわかりやすくまとまっていたのでおすすめです。

サイトマップって何？SEO効果から作成方法まで徹底解説

環境

• nuxt 2.14.0
• @nuxtjs/axios 5.12.0

モジュールをインストール

それでは早速@nuxtjs/sitemapをインストールしていきます。

// yarn の場合
$ yarn add @nuxtjs/sitemap

// npm の場合
$ npm install @nuxtjs/sitemap

設定ファイルにモジュールを追加

nuxt.config.jsに先程追加したモジュールを追加します。

export default {
  ...,
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/sitemap', // 追加
  ],
}

サイトマップ生成の設定

同じくnuxt.config.jsにどのようにサイトマップを生成するのか等の設定をしていきます。

microCMSを使用して動的ルーティングをしていたので最終的にはこんな感じになりました。
動的ルーティングなしの場合はroutesのブロック丸ごと削除したら使えます。

import axios from 'axios' // 追加

export default {
  ...,
  sitemap: {
    path: '/sitemap.xml',
    hostname: 'https://mysite.com/',
    routes(callback) {
      axios.get(`https://mysite.microcms.io/api/v1/news?limit=100`,
        {
          headers: { 'X-API-KEY': 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX' }
        }
      )
        .then((res) => {
          const routes = res.data.contents.map((news) => {
            return '/news/' + news.id
          })
          callback(null, routes)
        })
        .catch(callback)
    }
  },
  ...
}

axios.getのURLが間違っていると404エラーになります。
私の場合は上記のURLを環境変数に置き換えていてスラッシュが重複していたために404になってました😂

headersを追加しないと401エラーになりますので忘れずに入れましょう。（忘れた人がここに）
ちなみにAPI-KEYが間違っていても401エラーになります。

それ以外の今回使用したオプションは下記となります。

path

サイトマップを生成する場所と名前の設定ができる

hostname

サイトマップを置くサイトのルートドメインを設置する

生成されたサイトマップを確認する

ローカル環境の場合、下記にアクセスすれば生成されたサイトマップを確認することができます。

http://localhost:3000/sitemap.xml

ポート番号は環境に合わせて変更してください。

本番URLでも同様に確認することができます。

参考

• Nuxt.jsで静的ファイル生成時にサイトマップも自動生成する方法
• @nuxtjs/sitemapモジュールを使ってsitemapを作成する
• Nuxt.jsでサイトマップを動的に設定する方法