YuTa Extend

オリジナル楽曲とIT系個人開発紹介のブログ

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

  2023-02-22

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

サイトマップとは

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

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

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

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

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

Copied!!
> npm i next-sitemap

next-sitemap の設定を記述する

sitemap.config.js

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

sitemap.config.js
Copied!!
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
Copied!!
{
  "extends": "next/core-web-vitals",
  "ignorePatterns": ["*.config.js"]
}

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

package.json

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

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

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

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

Copied!!
> npm run build

Cloudflare Pages 側も設定する

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

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

build_command

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

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

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

まとめ

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