Nuxt.jsで開発したWebAPPにXMLサイトマップを設定する

XMLサイトマップがいかに重要か

そもそも、XMLサイトマップとは何か？

サイトマップは、WEBサイトにどんな情報があるのかを伝える「目次」のような役割をしていると理解していただければ良いでしょう。
XMLサイトマップは、検索エンジンに対してページの情報を伝える役割があります。

XMLサイトマップを設定するメリットを解説します。

1. URLの存在をクローラーに早く検知させる
2. クローラーが検知できないページを知らせる

この2つが主なメリットで、要はSEOに関して欠かせないものです。

1. パッケージのインストール

プロジェクトのルートディレクトリにて下記コマンドを実行し、パッケージをインストールする。

# サイトマップ用パッケージ
$ npm install @nuxtjs/sitemap

2. nuxt.config.js設定を追加する

インストールができたらnuxt.config.jsの設定をしていきます。
まずはmodulesに追加

nuxt.config.js

export default {
    ,,,
    modules: [
        '@nuxtjs/sitemap'
    ]
    ,,,
}

次にsitemapの設定をしていきます。
例として、下記のように設定にしました。

nuxt.config.js

export default {
    ,,,
    sitemap: {
        hostname: 'https://www.example.com',
        path: '/sitemap.xml',
        cacheTime: 1000 * 60 * 15,
        gzip: true,
        exclude: [
          '/admin',
          '/admin/**',
          '/works/**'
        ]
    }
    ,,,
}

3. 各パラメータの説明

hostname

サイトマップを置くサイトのルートドメインを設置する
generateオプションでdirを変更していなければ、distフォルダの中に生成される。

path

サイトマップを生成する場所とファイル名を設定する

cacheTime

サイトマップの更新頻度を設定する。

gzip

gzip形式のsitemapを生成するかどうか

exclude

サイトマップから除外するディレクトリの設定
/**を付けると、そのディレクトリ下を除外することが可能
管理者ページなどがある場合に使用する。

routes

サイトマップに含めるURLの設定
動的ルーティングにて生成されるページ等。（これはまた今度！）

5. 最後に

サイトマップを作ってもロボットにクロールさせないと意味がありません。
いくら素晴らしいページでも、クローラーに見てもらい、インデックスをされなければ、検索エンジンの結果に出てこず、そのページが存在しないのと同じです。
本番でのsitemap.xmlが生成完了していれば、Googleサーチコンソールからサイトマップを送信しましょう！