KyouRyoku

峡緑

©2023 峡緑

next-sitemapでrobots.txtとサイトマップを自動生成！

Next.jsで、ビルド時にsitemap.xmlやrobots.txtを自動生成してくれると嬉しいですよね。

今回はその夢を叶えてくれるnext-sitemapというライブラリの紹介です。

このライブラリについて書いてくれている記事は既にいくつかあるのですが、robots.txtについて書いている記事は少なかったので、主にrobots.txtに焦点を当てて書いてみようと思います。

一応、next-sitemapの使い方

robots.txtに焦点を当てて書くと言いましたが、一応、基礎的な使い方も書いておきます。分かりにくい場合は既存の記事がいくつもあるので、調べてください。おすすめはこの記事です。

インストールは以下のコマンドで行います。

npm install next-sitemap

package.json と同じディレクトリにnext-sitemap.config.js というファイルを作ります。このファイルを編集することで設定を変更できます。

例えば以下のように記述して、（siteurlは適宜変更してください）

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: "ここにあなたのサイトのURLを入力",
  generateRobotsTxt: true,
  sitemapSize: 7000,
};

以下のようなコードをpackage.jsonのscriptsに追加して、

{
	// ...
  "scripts": {
	  // ...
    "postbuild": "next-sitemap", // <== この行を追加
    // ...
  },
  // ...
}

以下のコマンドを実行すると…

npm run build

Next.jsのビルド後に自動でnext-sitemapが実行され、sitemap.xml、sitemap-0.xml、robots.txtの三つのファイルが生成されました！！

ちなみに、サイトマップのファイルがsitemap.xml、sitemap-0.xml と、複数ファイルに分割されている理由は、サイトマップサイズが大きい場合は分割するようにGoogleから推奨されているためです。

「個人サイトだから、そこまでしてくれなくてもいいのに〜〜！！」という人は以下のようにルールを記述しましょう。一つしかサイトマップのファイルが生成されなくなります。

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: "ここにあなたのサイトのURLを入力",
  generateRobotsTxt: true,
  autoLastmod: false,
  generateIndexSitemap: false,
};

本題、robots.txtの設定のいじり方

では、ここから本題に入ろうと思います。

ちなみに、現状、自動生成されたrobots.txtは、以下のように全てのクロールを許可する設定になっています。

# *
User-agent: *
Allow: /

# Host
Host: https://kyouryoku.net/

# Sitemaps
Sitemap: https://kyouryoku.net/sitemap.xml

ここで、例えばapi以下のファイルを一切クロールさせたくない場合、設定を以下のように書き直します。

/** @type {import('next-sitemap').IConfig} */
module.exports = {
	// 省略...
  robotsTxtOptions: {
    policies: [
      {
        userAgent: "*",
        disallow: "/api/", // <== 配列を指定することもできます。
      },
    ],
  },
};

このように、policies配列にいくつもポリシーを追加していくことができます。

一つ一つのポリシーを見ていくとusaAgentとdisallowの2つのプロパティで構成されています。

userAgentには現在”*” のように書くことで、全てのクローラーを対象にしていますが、例えば"Googlebot" のように書くことでGoogleのクローラーのみを対象にすることができます。

主要なクローラーのユーザーエージェント一覧はこちらです。

また、disallowだけではなく、allowプロパティを書くことでクロールを許可することができます。

ただし、基本的にクローラーはサイト内全てのページをクロールするように作成されているため、disallow配下のページをクロールさせたいときにしかallowは使いません。

最後に自動生成されたrobots.txtが問題ないかどうか、Google Search Consoleのrobots.txtテスターで確認しましょう。

いい感じですね！！

おまけ、dynamic routingのページを認識させる

おまけで、動的に生成されるページをサイトマップに載せる方法を2つ紹介します。

1つ目の方法（additionalPathsを使用）

/** @type {import('next-sitemap').IConfig} */
module.exports = {
	// ...省略
  additionalPaths: async (config) => {
  
	  // このlikeFetch関数は、3秒後にページのリストを返す関数です。
	  // データーベースとかapiにアクセスして3秒後に値が返ってくるイメージで書きました。
    const likeFetch = async () => {
      return await new Promise((resolve) => {
        setTimeout(() => {
          resolve([
	          { loc: "/test-1" },
	          { loc: "/test-2" },
	          { loc: "/test-3" }
	        ]);
        }, 3000);
      });
    };
    
    const result = await likeFetch();

    return result;
  },
};

上の例のように、additionalPaths に追加したいパスを返す関数を設定することができます。

この関数内で、動的に生成されるページのソースとなっているデータベースなどにアクセスして、結果を配列として返すことで、サイトマップに追加することができます。

ただし、ビルド時にサイトマップが生成されてしまうので、ビルド後にデータベースに追加したものなどは反映されません。

2つ目の方法（getServerSideSitemapIndexを使用）

これ以下に書いている内容は試したことがないので本当に動くのかはわかりません。動かない場合、おとなしく公式ドキュメント（英語）を読んでください。該当の内容は一番下に書かれています。

アクセスするたびに動的に生成されるサイトマップを用意し、そのURLをrobots.txtに書くことで認識してもらう方法です。

先程の方法ではビルド時にサイトマップが固定されていましたが、このやり方でビルド後も更新されます。

import { getServerSideSitemap } from 'next-sitemap'

export async function GET(request: Request) {
	// ここでapiにアクセスするなどして、ページ一覧を取得

  return getServerSideSitemap([
    {
      loc: 'https://example.com',
      lastmod: new Date().toISOString(),
    },
    {
      loc: 'https://example.com/dynamic-path-2',
      lastmod: new Date().toISOString(),
    },
  ])
}

上のコードのようにGET関数で、パスの配列を引数に渡したgetServerSideSitemap 関数の実行結果を返すことで動的なサイトマップを作成することができます。

動的なサイトマップを作成した後に、next-sitemap.config.js に以下のように書くことで、ボットに認識してもらえるようにします。

/** @type {import('next-sitemap').IConfig} */
module.exports = {
	// 省略...
  exclude: ['/server-sitemap.xml'], // <= 静的なサイトマップを除外
  robotsTxtOptions: {
    additionalSitemaps: [
      'https://example.com/server-sitemap.xml', // <==== 動的なサイトマップを追加
    ],
  },
}

詳しくは、公式ドキュメント（英語）を参照してください。一番下に書いてあります。

最新記事

その他のヘルプ - 2(MhYg)

calendar_month公開日 : 2025年2月8日

このページでは、2(MhYg)に関するアカウントに関するヘルプ、投稿に関するヘルプ以外のヘルプを表示しています。

アカウントに関するヘルプ - 2(MhYg)

calendar_month公開日 : 2025年2月8日

この記事では2(MhYg)のアカウントに関するヘルプを掲載しています。

投稿に関するヘルプ - 2(MhYg)

calendar_month公開日 : 2025年2月8日

この記事では2(MhYg)の投稿機能に関するヘルプを集めています。

2(MhYg)ヘルプ

calendar_month公開日 : 2025年2月6日

このページでは2(MhYg)に関してのヘルプの記事を集めています。