Nuxt.jsでサイトマップを生成する

今回は、SEO対策では欠かすことのできない『サイトマップ』を、Nuxt.jsに導入する手順をご紹介したいと思います。
また、当サイトでも使用しているHeadlessCMSのmicroCMSのコンテンツ取得についても記載していますので、ぜひ制作の参考にしていただければ幸いです。

そもそもサイトマップとは

というところを、ザッとおさらいしてから本題に入ろうと思います。

サイトマップは、Googleのクローラーにウェブサイトの内容・構造をわかりやすく伝えるために必要な、サイトの地図に当たります。
検索エンジンは、その情報をもとにユーザーの検索内容に対して適切な回答を返してくれるようになります。

Googleでは以下のように説明されています。

サイトマップとは、サイト上のページや動画などのファイルについての情報や、各ファイルの関係を伝えるファイルです。Google などの検索エンジンは、このファイルを読み込んで、より効率的にクロールを行います。サイトマップはサイト内の重要なページとファイルを Google に伝えるだけでなく、重要なファイルについての貴重な情報（ページの最終更新日やすべての代替言語ページなど）も提供します。
引用元：サイトマップについて

ウェブサイト内のページを網羅的に伝える必要があるので、内部リンクが仕切れていない・更新頻度が高いような大規模サイトには必要であるとされています。
（内部リンクができている・小規模サイトには必要がないと言われてもいます。）

サイトマップを使用することで、
『うちのサイトにはこういうページがあります！』
『こんなページできました！』
といち早くクローラーに伝え、検索結果に反映させることができるんです。
（サイトマップを利用すれば検索順位が上がるという話ではありません。）

導入手順

では、早速Nuxtへの導入手順をご紹介します！

環境確認

nuxt : 2.15.8
@nuxtjs/axios : 5.13.6

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

下記のコマンドでサイトマップ生成モジュールをインストールします。

// npm
$ npm install @nuxtjs/sitemap

// yarn
$ yarn add @nuxtjs/sitemap

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

nuxt.config.jsに、インストールしたモジュールを追加します。

// microCMSを使用する場合は axios を使用するので、記述します。
import axios from 'axios'
// インストールしたモジュール追加
modules: [
    '@nuxtjs/sitemap'
]

サイトマップ生成オプションの設定

同じくnuxt.config.jsに、サイトマップ生成に係るオプションを設定します。
（不要なものは削除して問題ありませんが、pathとhostnameは必須項目です。）

sitemap: {
  　 // sitemap.xml の生成先とファイル名の指定
    path: '/sitemap.xml',
 　 　// サイトマップを生成するウェブサイトのルートドメイン
    hostname: 'https://example.jp',
　　　　// キャッシュ時間の設定（SSRの時のみ有効になります）
    cacheTime: 1000 * 60 * 60,
　　　　// gzipで圧縮されたサイトマップの作成を有効にするか否か
    gzip: true,
　　　　// generate時に静的なサイトマップを生成するかどうか
    generate: false,
　　　　// サイトマップ生成時に除外したいパス
    exclude: [
      '/contact/complete',
      '/register/complete',
 　　 ],
    // microCMSによる動的生成ページ用のルーティング（microCMSを利用しない場合は下記不要です。）
　　　　routes(callback) {
    　　axios.get(`https://mysite.microcms.io/api/v1/blog?limit=100`,
        {
          headers: { 'X-API-KEY': 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX' }
        }
      )
      .then((res) => {
        const routes = res.data.contents.map((blog) => {
            return '/blog/' + blog.id
        })
          callback(null, routes)
        })
        .catch(callback)
    }
}

※axios.getのURL、API-KEYが間違っているとエラーになってしまうので注意

生成確認する

generateして、問題なくサイトマップファイルが生成されていることを確認します。
http://localhost:0000/sitemap.xml
※ポート番号は、お使いのローカル環境のものに書き換えてください。

ローカルのフォルダ内に生成されたサイトマップをpush又はサーバーアップし、サーチコンソールに登録すれば完了です。
※本環境へのアップ後に本ドメインでの確認もお勧めします。

さいごに

ネットで探せばサイトマップ生成ツールみたいなものはたくさん出てきますが、いちいちそのツールを検索して入力して....というのも手間ですよね。
generate時に自動生成してくれるのであれば、せっかく用意されているモジュールを導入するのが一番手軽だと思いますので、ぜひお試しください！

参考：
https://qiita.com/sauzar18/items/2ea958043eb6758c4f83
https://qiita.com/bucchi49/items/d271c4010a3f6c900926