Next.jsブログでsitemap.xmlを自動生成する

sitemap.xmlが未登録だった

検索エンジン最適化（SEO）の基本施策のひとつとして、sitemap.xml の設置があります。

Google Search Consoleで本ブログの状況を確認したところ、sitemap.xmlが未登録であることに気が付きました。sitemap.xmlは、検索エンジンにサイト構造を正しく伝えるために有効ですが、記事を追加するたびに手動で更新するのは効率的ではありません。

本記事では、Next.jsで構築したブログにおいて、sitemap.xmlの生成を自動化する方法について解説します。

sitemap.xmlとは

sitemap.xml は、ウェブサイトのページ構造を検索エンジンに伝えるためのXMLファイルです。

このファイルには、上の画像にあるように、URLとページの更新日時などが記載されています。sitemap.xmlの仕様は、以下のページを参照してください。

https://www.sitemaps.org/protocol.html

sitemap.xmlが登場する前は、新しくページを作成しても、それがGoogleなどの検索エンジンに登録されるかどうかをコントロールすることができませんでした。そのため、深い階層のページや、パラメータによって動的に生成されるページは検索エンジンに登録されない可能性がありました。また、ページを新しく登録しても、いつクローラがそのページを見つけてくれるかもわかりませんでした。

現在は、Googleがこのsitemap.xmlをいつロードしたかを、Google Search Consoleで確認することができます。更に、このsitemap.xmlに記載されているURLがすべて登録されているかどうかを確認することもできます。

前提条件

Next.js によるブログ構築済み
記事は Markdown / MDX などから静的ページとして生成

sitemap生成ライブラリの導入

sitemap.xml を自動生成するために、next-sitemap を利用します。

インストール

npm install next-sitemap

設定ファイル作成

プロジェクト直下にnext-sitemap.config.jsを配置します。next-sitemapはrobots.txtも生成できるようなので、generateRobotsTxtにtrueを指定し、生成してもらうことにしました。

module.exports = {
  siteUrl: 'https://nomad-dev-life.net',
  generateRobotsTxt: true,
}

package.json の修正

next buildの後に自動でsitemap.xmlが生成されるように、scriptsにpostbuildを追加します。

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

postbuildは、npm run buildやyarn buildを実行した際に、buildが終わると自動的に呼び出されます。ですので、このように記載することでsitemap.xmlが生成されるようになるわけです。

GitHub ActionsでblogをNginxにdeployする | Nomad Dev Lifeで書いたように、このブログはGithub Actionsでbuildしています。上記の対応を入れることによって、Github Actionsでnpm run build(yarn build)が実行され、sitemap.xmlとrobots.txtがrootに生成されます。

おわりに

今回は、build時に自動でsitemap.xmlを生成するようにしました。next-sitemapのおかげで、非常に簡単にsitemap.xmlを生成することができます。

sitemap.xmlに登録されているURLがGoogleにインデックスされているかチェックすることで、インデックス登録が漏れていないか確認することができます。

もしNext.jsでブログを書いているのであれば、ぜひお試しください。