皆さんご機嫌よう。
今回のガチテックブログシリーズは「せっかく作ったおばあさんのサイトに人がきてくれない」という悩みを解決する手段の１つを提供する回です。全国のサイトを作成したおばあさんとその愛するお孫さん(ウォーリー読破済み)はご覧あれ。

さっそくやろうか

いつものように戯言はいいからやっていこうね。
そもそもなんでsitemapを作るとSEO的にいいのかって話ではあるけれども、それはあなたのお母さんやお父さんが作ってくれた手作りのジャムを思い出してみよう。

手作りでもいいのですが、大変簡単に導入できるパッケージがあるのでそれを使っていきましょう。

npm install --save-dev next-sitemap

ファイルに設定情報を書く

新たにルートディレクトリに next-sitemap.js を作成し、以下のように書き込んでいきましょう。

module.exports = {
  siteUrl: 'https://hpfull.jp',
  generateRobotsTxt: true,
  sitemapSize: 7000,
  outDir: './out',
};

siteUrlのところは各自ご自身の、またはウォーリーのドメインを入れましょう。Next.jsのSSGではビルド後にoutというディレクトリがデフォルトでできるのでその配下に出力します。
sitemap.xml と robots.txtファイルが出来上がります。

それではこの設定が済んだら、build時にサイトマップを更新してくれるようにコマンドを設定します。

// package.json

  "scripts": {
    "dev": "next dev",
    "build": "next build && next export && next-sitemap --config next-sitemap.js",
    ....

はい、完成です。とっても簡単ですね。
この状態でビルドを行うとサイトマップの自動生成をしてくれますよ。

おまけサイトマップをGoogle Search Consoleへ登録しよう

ついでにせっかく作ったサイトマップなのだからGoogleのクローラーに自慢しよう。
サーチコンソール(以下継承略佐知子)の登録方法自体はここでは省きます。



これで完成です。

参考

https://fwywd.com/tech/next-sitemap