Skip to content

Next.js + Vercel でサイトマップsitemap.xml を生成する

January 2

・nextjs

Vercel にデプロイしている Next.js 製のサイトやブログにサイトマップ（ sitemap.xml ）を追加する方法です。

https://chocolat5.com/ のサイトマップ

実現したいこと

  • Next.js 製のサイトで sitemap.xml を生成する

next-sitemap のインストール

sitemap.xml の生成に next-sitemap を使用します。 サイトマップと robot.txt が生成され、Next.js の static/pre-rendered/dynamic/server-side 全てのレンダリング方法に対応しています。

npm i --save next-sitemap

config ファイルの作成

プロジェクトの root に next-sitemap.config.js を作成します。

以下は大規模なサイトマップを分割するための最小限の構成になります。

siteUrl はサイトのベースURLです。

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

sitemapSize: 7000 は、サイトマップ内のURLが7,000を超える場合に、インデックス（sitemap.xml）とサイトマップファイル（sitemap-0.xml など）が生成されます。

package.json の編集

build 後のスクリプトとして next-sitemap を追加します。 カスタム config ファイルを使用する場合は postbuild の最後のファイル名を変更します。

{
...

  "build": "next build",
  "postbuild": "next-sitemap --config next-sitemap.config.js"

...
}

npm run build を実行するたびにサイトマップが生成され、以下のメッセージが表示されます。 sitemap.xml や robot.txt などのファイルは public フォルダに生成されます。

Google Search Console に登録

Google Search Console にアクセス・ログインし、インデックス作成 > サイトマップ に移動します。

「新しいサイトマップの追加」からサイトマップのURLを登録します。
このとき登録するのは /sitemap.xml のみでOKです。

無事に登録されるとステータスが Success になります。

参照

Tags

web-developer javascript how-to