Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【ITニュース解説】How to Generate sitemap.xml in Next.js for Better SEO

2025年09月21日に「Dev.to」が公開したITニュース「How to Generate sitemap.xml in Next.js for Better SEO」について初心者にもわかりやすく解説しています。

作成日: 更新日:

ITニュース概要

sitemap.xmlは、ウェブサイトの重要なページを検索エンジンに伝えるリストだ。これをNext.jsで`next-sitemap`を使い自動生成すると、検索エンジンがサイト内容を素早く理解し、新しいページも迅速にインデックスできる。結果として、サイトのSEOが強化される。

ITニュース解説

Webサイトをインターネット上に公開する際、検索エンジンに自分のサイトの内容を正しく伝え、多くの人に見つけてもらうことは非常に重要である。そのための重要なツールの一つに「sitemap.xml」というファイルがある。sitemap.xmlは、Webサイト内のすべての重要なページのURL(アドレス)を一覧にしたXML形式のファイルである。これは、検索エンジンのロボットがサイトを効率的に巡回(クロールと呼ぶ)し、新しいページや更新されたページを見落とさずにデータベースに登録(インデックスと呼ぶ)するための「地図」の役割を果たす。

sitemap.xmlが存在する主な利点はいくつかある。まず、Webサイトに新しいページが追加された際、検索エンジンがそのページを素早く発見し、インデックスできる。また、Webサイトの構造が複雑で、リンクをたどるだけでは見つけにくいような深い階層にあるコンテンツ(例えば、古いブログ記事や大量の商品ページなど)も、sitemapがあれば漏れなく検索エンジンに伝えられる。さらに、各ページの最終更新日時、更新頻度、サイト内での重要度といった追加情報(メタデータ)を提供できるため、検索エンジンはそれらを参考に、より適切なタイミングでページを巡回したり、コンテンツの重要度を判断したりできる。検索エンジンはWebサイト内のリンクをたどってページを発見するが、sitemapは検索エンジンに「ここを見てほしい」と直接伝えるための有効な手段となる。

sitemap.xmlは直接的に検索順位を向上させるわけではないが、間接的にSEO(検索エンジン最適化)に大きな影響を与える。SEOとは、検索エンジンの検索結果でWebサイトが上位に表示されるように最適化する取り組みのことである。sitemapがSEOに貢献するのは、検索エンジンがWebサイトのコンテンツをより簡単に「発見」「クロール」「インデックス」できるようになるためだ。これにより、以下のような具体的な良い影響が期待できる。第一に、新しいコンテンツが公開されたり、既存のページが更新されたりした場合、sitemapにその情報が記載されていれば、検索エンジンはすぐにそれを把握し、迅速にインデックスできる。これは、コンテンツが検索結果に表示されるまでの時間を短縮する。第二に、大規模なWebサイトや、多くのカテゴリやページネーション(ページ送り)を含む深い構造のサイトでは、リンクをたどるだけではすべてのページを検索エンジンが見つけにくい場合がある。sitemapは、すべての重要なページの場所を正確に伝えることで、検索エンジンの「カバレッジ」(サイト内のコンテンツが検索エンジンにどれだけ認識されているか)を向上させる。第三に、検索エンジンは各Webサイトに対して「クロール予算」という、巡回にかけられる時間の制限を持っている。sitemapは、検索エンジンにどのページが重要で、どのページを優先的に巡回すべきかを明確に伝えることで、この限られたクロール予算を最も効率的に使えるように手助けする。最後に、sitemapに含まれる<lastmod>(最終更新日時)、<changefreq>(更新頻度)、<priority>(相対的な重要度)といった情報は、検索エンジンがページを巡回する頻度や重要度を判断するための「ヒント」となる。これらは検索エンジンにとって参考情報であり、必ずしもその通りに動作するわけではないが、設定することでサイトの意図を伝えられる。

sitemap.xmlファイルはXMLという形式で記述されており、その中にはいくつかの主要な要素が含まれている。 <loc>タグは、ページのURLを記述する部分であり、これは必須の項目である。 <lastmod>タグは、そのページが最後に更新された日時を示す。この情報により、検索エンジンはページの鮮度を判断できる。 <changefreq>タグは、そのページのコンテンツがどれくらいの頻度で更新されるかの目安を提供する。例えば、「daily(毎日)」や「monthly(毎月)」といった値が設定できるが、これは必須ではなく任意で設定する項目である。 <priority>タグは、サイト内でのそのページの相対的な重要度を0.0から1.0の間の数値で示す。これも任意で設定する項目である。

もしWebサイトが非常に大規模で、含まれるURLの数が50,000ページを超える場合や、sitemap.xmlファイルのサイズが50MBを超える場合は、一つのsitemapファイルでは対応できない。この場合、sitemapを複数のファイルに分割する必要がある。そして、分割された個々のsitemapファイルをすべてまとめるために、「sitemapインデックスファイル」という別のXMLファイルを作成する。検索エンジンはこのsitemapインデックスファイルを読み込むことで、サイト全体を構成するすべての分割されたsitemapファイル、ひいてはすべてのURLを効率的に発見できるようになる。

Webサイトのページ数が数十や数百にもなると、手動でsitemap.xmlファイルを作成したり、新しいページが追加されるたびに更新したりするのは、非常に手間がかかり現実的ではない。このような場合に役立つのが、Next.jsというWebフレームワークにおけるsitemapの自動生成機能である。next-sitemapというnpmパッケージを利用すれば、Webサイトのビルド(公開用のファイルを作成する作業)時に、有効なsitemap.xmlファイル(必要に応じてrobots.txtファイルも)を自動的に生成できる。

このパッケージをプロジェクトに導入するには、まずコマンドラインでnpm install next-sitemapまたはyarn add next-sitemapを実行して、プロジェクトにインストールする。次に、プロジェクトのルートディレクトリにnext-sitemap.config.jsという名前のファイルを作成し、sitemapの生成に関する設定(例えば、WebサイトのベースURLなど)を記述する。最後に、package.jsonファイル内にあるbuildスクリプトを更新し、next buildコマンドの実行後にnext-sitemapコマンドが実行されるように追記する。例えば、"build": "next build && next-sitemap"のように設定する。こうすることで、npm run buildコマンドを実行するたびに、publicディレクトリ内に最新のsitemap.xmlファイルが自動的に出力される。もしサイトが大規模であれば、必要に応じて複数のsitemapファイルとsitemapインデックスファイルも自動で生成される。

最新の状態に保たれたsitemapは、検索エンジンにWebサイトの構造を正確に伝え、すべての重要なページを迅速に発見し、インデックスさせるための、最もシンプルでありながら非常に効果的な方法の一つである。next-sitemapパッケージを利用してsitemapの生成を自動化することで、手動での管理の手間を省き、新しいコンテンツが公開されるたびにsitemapを更新し忘れるといったヒューマンエラーを防ぐことができる。小規模なWebサイトであれば手動でのsitemap作成も選択肢となるが、大規模なサイトや頻繁に内容が更新されるサイトでは、next-sitemapのような自動生成ツールや、Next.jsのApp Routerに組み込まれた機能を使うことで、管理の負担を大きく軽減できる。sitemapを準備した後には、Google Search ConsoleやBing Webmaster Toolsといった検索エンジン提供のツールにsitemapを登録することが不可欠である。また、サイトのベースURLやその他のメタデータが常に正確であることを確認し、サイトがデプロイ(公開)されるたびにsitemapが再生成されるように運用することで、新しいコンテンツが常に検索エンジンの対象となり、結果として多くのユーザーにコンテンツが届きやすくなるだろう。

関連コンテンツ

関連IT用語

関連ITニュース