next-sitemapというライブラリを使ってNext.jsで実装したアプケーションのサイトマップを作った時の作業メモ。
next-sitemapの設定方法
『next-sitemap』というライブラリを使うと、Next.jsで実装したアプリケーションのサイトマップを簡単に作ることができる。
next-sitemapをインストールする
next-sitemapのインストールは、以下のコマンドをターミナルで叩くだけで良い。
yarn add next-sitemap
package.jsonを更新する
package.jsonにpostbuildを追加する。
"scripts": {
"dev": "next -p 8080",
"build": "next build",
"start": "next start",
"lint": "next lint",
"postbuild": "next-sitemap"
},
configファイルを作成する
プロジェクトのルートに『next-sitemap.config.js』という名前のファイルを作成する。
ファイルを作成したら、以下のように書く。
module.exports = {
siteUrl: "https://hogehoge.com",
};
sitemapを作成する
最後に以下のコマンドをターミナルで叩いてsitemapを作成する。
yarn build
publicディレクトリに、sitemap.xmlが作られていれば成功。
Google Serch Consoleに登録する
サイトマップのURLを入力の部分に、sitemap.xmlと入力して送信する。
next-sitemapのそのほか便利な設定
最後に知っておくと便利な設定について調べたことを書いておく。
先ほど作った『next-sitemap.config.js』に追記することによって、サイトマップをカスタマイズできる。
例えば、以下のような感じ。
module.exports = {
siteUrl: "https://hogehoge.com",
generateRobotsTxt: true,
sitemapSize: 7000,
・・・・・・・・
・・・・・・・・
};
<sitemapBaseFileName>
sitemapの名前を設定する項目。
stringで設定する。
例えば、”sitemap-hogehoge”と設定すると、sitemap-hogehoge.xmlというファイルが作られる。
デフォルトだとsitemap.xmlになる。
sitemap.xmlのままだと、自分のサイトがスクレイピングされやすくなってしまうので、わかりにくい名前に設定しておくと良さそう。
<generateRobotsTxt>
robots.txtを作るかどうかを設定する項目。
booleanで設定。
robots.txtとは、検索エンジンのクローラに対して、サイトのどの URL にアクセスしてよいかを伝えるもので、SEOに良い影響を及ぼすと言われている
<sitemapSize>
サイトマップを自動で分割して作成してくれる項目。
numberで設定する。
デフォルトでは5000が設定されている。
<exclude>
特定のページのサイトマップを作りたくない場合に設定する項目。
以下のようにpathを設定すると、以下のpathのサイトマップが作られなくなる。
/*のように書くと、/piyopiyo以下のpath全てがサイトマップから除外してくれる。
exclude: ["/hogehoge", "/piyopiyo/*"],
そのほかにもいくつか設定項目があるので、興味があればチェックしてみてください。