next-sitemap でブログにサイトマップを生成する

概要

を参考にサイトマップを生成する

作業メモ

next-sitemapの導入

yarn add --dev next-sitemap

設定ファイルの作成

公式の手順 通り、設定ファイルを作る

touch next-sitemap.js

next-sitemap.js は以下のように設定する

/** @type {import('next-sitemap').IConfig} */

module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
}

SITE_URLで自分のサイトのURLを使うように設定しておく

.gitignore に生成されたサイトマップを登録しておいて、gitで管理しないようにする

public/robots.txt  
public/sitemap.xml  
public/sitemap-0.xml

build の設定

package.json のScriptを以下のように修正する これで、buildの後に自動的にサイトマップが生成されるようになる

{
  "build": "next build",
  "postbuild": "next-sitemap"
}

Google Search Console へ登録

デプロイしてサイトマップへアクセスできることを確認したら、Google Search Console へ登録しておくことで、 Google 検索からの流入をスムーズにすることができます。