next-sitemapを使ってサイトマップを生成する

みなさんこんにちは
今回は Next.js で xml サイトマップを生成する方法をご紹介いたします。

xml サイトマップとは

xml サイトマップとは Google のクローラーにインデックスしてほしいページを伝える役割があります。
効率よくクローリングできるようになることは、結果としてSEO対策にも繋がるのできちんと設定する必要があります。

wordpress の場合は「All in One SEO」などのプラグインを使って簡単な GUIの操作で設定できるため、そこまで意識しなくてもできてしまいます。
ただ Next.jsの場合は自分でサイトマップを生成するための記述が必要となります。

next-sitemapのインストール

まずはインストールをします

npm i next-sitemap

next-sitemap.config をテーマ直下に作成します

module.exports = {
  siteUrl: "サイトのURL",
  outDir: "./public",
  sitemapBaseFileName: "static",
  generateRobotsTxt: false,
  exclude: [
    "サイトマップから除外するページURL",
  ],
};

各項目を簡単に説明です。
siteUrl: サイトのURL
outDir: サイトマップの出力先
sitemapBaseFileName: サイトマップのファイル名
generateRobotsTxt: robots.txtに生成するかどうか
exclude: サイトマップから除外するページを記載

package.jsonの編集

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

post◯◯と設定すると、◯◯の処理の後に実行されます。
この場合は、buildの後にnext-sitemapが走るということになります。
これで毎回ビルド時に新しいサイトマップ/public直下に作成されます。

Google Search Consoleにサイトマップを登録

説明は省略しますが、作成したサイトマップを「 Google Search Console」に登録することで、サイトマップの設定は完了となります。

今回は簡単に説明となりましたがもっと詳しく知りたい方はパッケージのページからご覧ください！

https://www.npmjs.com/package/next-sitemap