next-sitemapで簡単にサイトマップを作成する方法【Next.js対応】

サイトマップとは

そもそもサイトマップには 2 種類あります。

1. HTML サイトマップ: ユーザー向けのページで、サイト内のリンクを一覧表示します。ユーザーがサイト内をナビゲートしやすくするために使用されます。
2. XML サイトマップ: 検索エンジン向けのページで、サイト内の URL をリスト化したものです。検索エンジンがサイトをクロールしやすくするために使用されます。

必要な理由

では、なぜサイトマップが必要なのでしょうか？ Web サイトを作成した場合、できるだけ多くの人に見てもらいたいものだと思います。 そのために欠かせないのが、検索エンジン(Google など)にちゃんとサイトの情報を伝えることです。 ここで必要なのがサイトマップです。

特に以下のような場合には、検索エンジンがページを見逃すことがあります。

• 内部リンクが少ないページ(孤立ページ)
• 動的に生成されるページ
• サイト構造が複雑な場合

メリット

サイトマップを作成することで得られるメリットととして、ページのインデックス登録を助けることが挙げられます。 サイトマップを送信することで、Google により早く・正確にページをインデックス登録してもらえる可能性が高まります。

デメリット

サイトマップを作成すること自体にデメリットはありませんが、強いていうなら作成する上で多少の工数がかかることくらいです。 しかし、この先で紹介する next-sitemap やその他ルールを使えば、ほとんど手間なくサイトマップを作成できます。

next-sitemap とは

今回使用したのは、next-sitemap というライブラリです。 next-sitemap は、Next.js アプリケーションのためのサイトマップを自動生成するためのライブラリです。 このライブラリを使用することで、手動でサイトマップを作成する手間を省き、SEO 対策を簡単に行うことができます。 next-sitemap は、以下のような機能を提供しています。

• 自動生成: Next.js アプリケーションのルーティング情報を元に、XML サイトマップを自動生成します。
• 動的サイトマップ: 動的に生成されるページの URL を自動的に追加します。
• カスタマイズ: サイトマップの生成に関する設定を柔軟にカスタマイズできます。
• 多言語対応: 多言語サイトのサイトマップを生成することができます。
• robots.txt: サイトマップを含む robots.txt ファイルを自動生成します。

設定手順

ライブラリのインストール

まず、next-sitemap をインストールします。

npm install next-sitemap

設定ファイルを作成する

プロジェクトのディレクトリに next-sitemap.config.js というファイルを作成します。

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: "https://www.shirashun.com/",
  generateRobotsTxt: true,
};

package.json にスクリプトを追加する

次に、package.json に次のスクリプトを追加します。

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

ビルドしてサイトマップを生成する

最後に以下のコマンドを実行して、サイトマップを生成します。 実行すると、sitemap.xml と robots.txt が自動的に生成されます。

npm run build

search console への登録

前提条件

前提として、サイトをインターネット上に公開しており、https://〇〇.com/sitemap.xml にアクセスできる状態である必要があります。

登録手順

1. Google Search Console にログインします。
2. 左側のメニューから「サイトマップ」を選択します。
3. 入力欄に、/sitemap.xml を入力して「送信」ボタンをクリックします。
4. 正常に送信された場合、ステータスが「成功」と表示されます(反映に数時間かかることもあるそうです)。

まとめ

next-sitemap を使用することで、Next.js アプリケーションのサイトマップを簡単に生成することができました。 今後も、SEO 対策を意識したサイト制作を行っていきたいと思います。