【Next.js】サイトマップを自動生成して検索エンジンに登録させる方法

2023-02-22

サイトマップとは

サイトマップとは、検索エンジンに Web サイトにどのようなページが存在するか伝えるためのファイルのことです。 大きいサイトの場合はサイトマップを用意しておくことで、検索エンジンが効率よくサイトを巡回する（＝検索結果の一覧にそのサイトを候補として出せるようになる）ことができます。

本ブログでもサイトマップを用意していますので参考にしてください。本ブログのように小規模なサイトの場合はあまり SEO 効果は望めませんが、Next.js のサイトの場合は本記事の方法で一度設定しておけば自動更新できますので、無いよりはまし だと思ってとりあえず作成しておいて損はないと思います。

next-sitemap をインストールする

Next.js でサイトマップを扱うには、 next-sitemap というプラグインを使うのが便利です。

next-sitemap

Sitemap generator for next.js. Latest version: 3.1.52, last published: 13 days ago. Start using next-sitemap in your project by running `npm i next-sitemap`. There are 23 other projects in the npm registry using next-sitemap.

https://www.npmjs.com/package/next-sitemap

以下のコマンドで next-sitemap をインストールします。

> npm i next-sitemap

next-sitemap の設定を記述する

sitemap.config.js

まず、next-sitemap の設定ファイル sitemap.config.js を一番上のディレクトリに作成します。

sitemap.config.js

module.exports = {
  siteUrl: "https://www.yuta-extend.com",
  generateRobotsTxt: true,
  generateIndexSitemap: false,
  sitemapSize: 7000,
  outDir: "./out",
};

詳しくは公式サイトで調べていただきたいですが、siteUrlにはドメイン名を指定し、他は任意で設定します。

generateIndexSitemapはデフォルトtrueのところをfalseにしました。これはファイルを分割するかどうかを指定するもので、falseにしておくと sitemap.xml を一つだけ出力します。大きいサイトでは分割する必要があるとのことです。

.eslintrc.json

次に、ESLint の設定を記述します。.eslintrc.jsonファイルを以下のように追記します。

.eslintrc.json

{
  "extends": "next/core-web-vitals",
  "ignorePatterns": ["*.config.js"]
}

これで設定ファイルのエラーが出なくなります。

package.json

次に、package.jsonのscriptsの部分を編集します。以下のように、buildの際に next-sitemap が実行されるように記述すれば OK です。

package.json

  ・・・
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export && next-sitemap --config sitemap.config.js",
    "start": "next start",
    "lint": "next lint"
  },
  ・・・

ローカルでビルドしてみる

以下のコマンドで試しにビルドしてみます。outフォルダにsitemap.xmlが出力されれば成功です。

> npm run build

Cloudflare Pages 側も設定する

ネット上のサイトにsitemap.xmlを出力するにはホスティングサービス側も設定が必要です。 Cloudflare Pages の場合は、 「設定」タブ ⇒「ビルド&デプロイ」メニュー ⇒ ビルドの構成 ⇒ ビルドコマンド の部分で設定できます。

next build && next export && next-sitemap --config sitemap.config.js

build_command

サイトマップを Google Search Console と Bing Webmaster Tools に登録する

仕上げに、 作成したサイトマップを Google と Bing に登録しておきましょう。 サイトマップに異常がないかどうかも見てくれます。

以下のサービスにアカウントを作ることでサイトマップを登録できます。

Google Search Console

Search Console のツールやレポートを使うことで、サイトの検索トラフィックや掲載順位を測定できるほか、問題を修正し、Google 検索結果でのサイトの注目度を高めることができます

https://search.google.com/search-console/about

Bing Webmaster Tools

Bing Web マスターツールにログインまたはサインアップして、あなたのサイトの検索パフォーマンスを向上しましょう。無料のレポートやツール、リソースにアクセスできます。

https://www.bing.com/webmasters/about

まとめ

今回は Next.js でサイトマップを自動生成して検索エンジンに登録させる方法を解説しました。記事内で言ったとおり、これを設定したからといって必ず検索上位に出るというものではありませんが、一度設定すれば自動更新してくれるものなので、やっておいて特に損はないです。