Next.jsでsitemapを超簡単に自動で作成する[next-sitemap]

Tweet

Pocket

Next.jsでWebサイトを公開している場合もSEO的な観点からsitemapを設定したいということがあります。

ここでは、next-sitemapというライブラリを利用することで超簡単にsitemapを作成することができるので、解説していきます。

その前に最終成果物

corp.hpfull.jpのサイトでサイトマップをビルド時に生成しています。

https://corp.hpfull.jp/sitemap.xmlへアクセスしてみてください。

next-sitemapをインストール

Next.jsでsitemapを作成する方法にはいくつかのアプローチがありますが、ここではnext-sitemapというライブラリを利用する方法を解説します。

選定理由としては、next-sitemapはシンプルで使いやすく、Next.jsとの親和性が高いためです。また、高い柔軟性を持ち、プロジェクトの要件に合わせたカスタマイズが可能です。

$ npm install --save-dev next-sitemap

ルートディレクトリに設定ファイル(next-sitemap.config.js)を作成

次にルートディレクトリにnext-sitemap.config.jsを作成します。

/** @type {import('next-sitemap').IConfig} */ これするとオートコンプリートが働くようになります。

module.exports = {
  siteUrl: "https://corp.hpfull.jp",
  generateRobotsTxt: true,
  sitemapSize: 7000,
};

その他にも、outDirで出力先を指定したりできます。

package.jsonの編集

次にbuild時にsitemapを作成してもらえるようにbuildコマンドも修正します。

{
前略
"scripts": {
    "dev": "next dev",
    "build": "next build && next-sitemap --config next-sitemap.config.js", ←追加。
後略
}

こうすることで、npm run buildでpublicフォルダ配下にsitemap.xmlが生成されるようになります。

Vercel側のビルドコマンドを設定

NextjsのアプリケーションをVercelでデプロイしている場合、Vercel側でビルドコマンドの修正が必要になります。

Vercelの設定画面へアクセスし、「Build & Development Settings」のBuild Commandを修正します。

これでビルドすると、

以下のようになっていたら成功です。

グーグルサーチコンソールに登録

最後に作ったsitemapをGoogle Search Consoleで登録します。

サイドバーのサイトマップ→新しいサイトマップの追加→から/sitemap.xmlのみで大丈夫なので、URLを登録しましょう。

上記のようになれば成功です！！

個人的に詰まったポイント

個人的に詰まったポイントとしては、next-sitemap.config.jsを設定する部分で、

/** @type {import('next-sitemap').IConfig} */ これするとオートコンプリートが働くようになります。

module.exports = {
  siteUrl: "https://corp.hpfull.jp",
  generateRobotsTxt: true,
  sitemapSize: 7000,
  outDir: './out',
};

というようにoutDirの設定をしていましたが、こうすると

siteUrl/sitemap.xmlにアクセスしても

This page could not be found.

となってしまっていました。

参照

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

Tweet

Pocket