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', // <==== 動的なサイトマップを追加
    ],
  },
}

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

最新記事

Googleおみくじ神社を建立しよう！

calendar_month公開日 : 2024年12月26日

そろそろ新年も近づいて来ました。この記事では、Google Apps ScriptとGoogle Spreadsheet を用いて、おみくじを引くことのできる神社を建立しようと思います。

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

calendar_month公開日 : 2024年12月25日

Next.jsで、ビルド時にsitemap.xmlやrobots.txtを自動生成してくれると嬉しいですよね。今回はその夢を叶えてくれるnext-sitemapというライブラリの紹介です。このライブラリについて書いてくれている記事は既にいくつかあるのですが、robots.txtについて書いている記事は少なかったので、主にrobots.txtに焦点を当てて書いてみようと思います。

ドメイン移行に伴ってつまったこと

calendar_month公開日 : 2024年12月23日

峡緑プレイは、この度ドメインの移行を実施しました。その際、Next.jsでの301リダイレクトのやり方や、おなまえドットコムでDNSレコードが反映されないなど様々な点で詰まったので解決策を含めて紹介しようと思います。

アカウント機能のヘルプ

calendar_month公開日 : 2024年11月8日

峡緑プレイには、アカウント機能があります。アカウント機能はどうやって使うのか、どのようなメリットがあるのか、ランクとは何なのかという疑問をこの記事では解決していきたいと思います。