NotionBlogにサイトマップを導入

はじめに

Next.jsでブログを運営する際、SEO対策の重要な要素として「サイトマップ」が挙げられます。特に、next-sitemapと**ISR（Incremental Static Regeneration）**を組み合わせれば、新しい記事を追加するたびにサイトマップを自動更新する仕組みを簡単に実装できます。

本記事では、サイトマップを自動更新する方法と、新規記事にも即対応できる運用方法を解説します。これにより、検索エンジン最適化（SEO）を強化し、ブログ運営を効率化できます。

サイトマップとは？

サイトマップは、Webサイト内のページ構造を検索エンジンに伝えるためのXMLファイルです。以下のようなメリットがあります：

効率的なクロール

クローラーがサイト内の全ページを発見しやすくなります。

迅速な更新通知

新規ページや更新情報をすぐに検索エンジンへ通知できます。

サイト構造の明確化

階層が深いサイトでも構造を正しく検索エンジンに伝えられます。

next-sitemapを活用した自動更新のメリット

記事を公開した瞬間にサイトマップを自動更新

新規記事を公開するたびに、検索エンジンへ即座に情報を伝えることができます。

ISRと組み合わせて最新状態を維持

静的サイトのパフォーマンスを保ちながら、動的な更新にも対応できます。

設定がシンプル

少ない設定で運用可能で、保守性も高い仕組みを構築できます。

実装手順

1. パッケージのインストール

まずはnext-sitemapをプロジェクトに追加します。

shell

npm install next-sitemap

2. 設定ファイルの作成

プロジェクトのルートにnext-sitemap.config.jsというファイルを作成します。以下はサンプル設定の例です。

javascript

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: process.env.SITE_URL || 'https://yoursite.com',
  generateRobotsTxt: true, // robots.txtの自動生成
  sitemapSize: 5000,       // 分割するURLの上限
};

設定項目のポイント

siteUrl本番環境のサイトURLを設定します。開発と本番でURLが異なる場合はprocess.env.SITE_URLなどで柔軟に切り替えると便利です。

generateRobotsTxttrueにすると、クローラーに対する案内を行うrobots.txtファイルも自動生成されます。

sitemapSizeサイト内のURLが多い場合、1ファイルあたりの最大URL数を指定して分割が可能です。

3. ビルド後の自動生成設定

next-sitemapでサイトマップを自動生成するために、ビルド後にスクリプトが自動実行されるように設定します。package.jsonに以下のようなスクリプトを追加してください。

json

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

postbuildスクリプトはbuild完了後に自動的に実行されるため、毎回ビルドのたびに最新のサイトマップが生成されます。

ISRと連携した動的なサイトマップ更新

ISR（Incremental Static Regeneration）とは？

Next.jsのISRは、静的生成（SSG: Static Site Generation）のメリットを保ちつつ、特定のページを一定期間ごとに再生成できる仕組みです。ブログ記事を新しく公開したときや更新したタイミングで、そのページだけを自動的に再ビルドし、最新状態をサイト全体に反映できます。

ISRとサイトマップ更新の連携

ISRによるページ再生成と同時にサイトマップの更新を行うことで、検索エンジンに新しいページを素早く認識させることが可能になります。

例：APIルートでの再検証とサイトマップ再生成

記事の公開時に以下のようなAPIルートを実装しておき、ISRの再検証（revalidate）をトリガーとしながらサイトマップも再生成させることができます。

サンプルコード: APIルートでサイトマップを更新

javascript

// pages/api/revalidate.js
export default async function handler(req, res) {
  const secret = process.env.MY_SECRET_TOKEN;

  // トークンの確認
  if (req.query.secret !== secret) {
    return res.status(401).json({ message: 'Invalid token' });
  }

  try {
    // ISRで新規記事ページを再生成
    const slug = req.query.slug; // 記事のslugを取得
    if (slug) {
      await res.revalidate(`/posts/${slug}`);
    }

    // サイトマップの再生成
    await res.revalidate('/sitemap.xml');

    return res.json({ revalidated: true });
  } catch (err) {
    return res.status(500).json({ message: 'Error revalidating', error: err });
  }
}

この仕組みの流れ

ここでの再検証対象は、記事ページ/posts/[slug]とsitemap.xmlですが、サイト構成に合わせて変更してください。これにより、記事が更新されたタイミングでサイトマップも更新され、最新情報が常に検索エンジンへ届けられます。

記事公開時にリクエストを送信

記事の公開時に、このAPIルートに新しい記事のslugを送信します。

ISRで該当記事を再生成

/posts/[slug]に該当する記事が再生成されます。

サイトマップも再生成

/sitemap.xmlを再生成し、公開された新しい記事のURLが追加されます。

環境変数の設定

開発・本番環境で異なるURLを使用している場合は、.envファイルなどに以下のような変数を設定し、next-sitemap.config.js内で読み込むと便利です。

arduino

SITE_URL=https://example.com

実際に環境変数を使う例：

plain text

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000',
  generateRobotsTxt: true,
};

GitHub Actionsでの自動更新

記事が追加・更新されるたびに手動で対応するのは非効率です。そこで、GitHub Actionsを使った自動デプロイの際にサイトマップを更新するフローを構築します。

GitHub Actionsの設定例

yaml

yaml
コピーする編集する
name: Deploy and Update Sitemap

# 起動条件
on:
  workflow_dispatch:       # GithubActions上で実行ボタンを表示
  schedule:
    - cron: '*/30 * * * *' # 30分毎に実行：https://crontab.guru/#*/30_*_*_*_*
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build

      - name: Generate Sitemap
        run: npm run postbuild

      - name: Deploy to Netlify
        run: npx netlify-cli deploy

依存パッケージのインストール

必要なパッケージをインストールします。

プロジェクトのビルド

npm run buildでサイト全体をビルドします。

サイトマップの生成

npm run postbuildでサイトマップを生成します。

ホスティング先へのデプロイ

NetlifyやVercelなどのホスティングサービスにデプロイします。

生成されるファイル一覧

設定やビルドが完了すると、以下のファイルが自動生成されます。

/sitemap.xml

サイトマップのインデックスファイル。複数のサイトマップがある場合はここから分割ファイルを参照する形になります。

/sitemap-0.xml

実際のURLリストが入っているサイトマップの本体ファイル。URL数が多い場合は番号が増えます。

/robots.txt

（generateRobotsTxt: trueにした場合）クローラーのクロール可否などの設定を記述するファイルです。

動作確認方法

ローカル環境で確認

shell

npm run build && npm run postbuild

上記コマンド実行後に/publicフォルダ配下にsitemap.xmlやrobots.txtなどが生成されているか確認します。

Windows PowerShellでの手動実行

サイトマップの再生成を手動でトリガーする場合、Windows PowerShellで以下のコマンドを実行します：

powershell

Invoke-WebRequest -Method POST -Uri "http://localhost:3000/api/revalidate-sitemap" -Verbose

このコマンドにより、指定したAPIエンドポイントにPOSTリクエストを送信し、サイトマップの再生成プロセスを実行できます。-Verboseオプションを使用することで、リクエストの詳細情報を確認することが可能です。

本番環境で確認

デプロイ後に

shell

https://yoursite.com/sitemap.xml

にアクセスし、サイトマップが正しく生成・反映されているかをチェックしましょう。

Google Search Consoleへの登録

サイトマップが生成されたら、Google Search Consoleへ登録して、クローラーにサイトを正しく認識してもらいましょう。登録手順は次の通りです。

Google Search Consoleにアクセスしてサイトを登録する

「サイトマップ」メニューを開く

sitemap.xmlのURL（例: https://example.com/sitemap.xml）を入力して送信する

これでサイトマップを用いたインデックス管理がスムーズに進みます。

QA

https://blog.ec-maker.com/sitemap.xmlからhttps://blog.ec-maker.com/sitemap-0.xmlにリンクさせる理由ある？https://blog.ec-maker.com/sitemap.xmlに直ではだめ？

全URLを1ファイルに入れると、更新のたびに大きなファイルを生成することになります

サイトマップのインデックス化（sitemap.xml から sitemap-0.xml へのリンク）には、以下の理由と利点があります

1. スケーラビリティ

サイトマップの制限

サイトマップは1ファイルあたり最大50,000 URL、または50MBまでという制限があります。

大規模なサイトになると、この制限を超える可能性があるため、複数のファイルに分割する必要があります。

例：

xml

xml
コピーする編集する
<sitemapindex>
  <sitemap><loc>/sitemap-0.xml</loc></sitemap>
  <sitemap><loc>/sitemap-posts.xml</loc></sitemap>
  <sitemap><loc>/sitemap-products.xml</loc></sitemap>
</sitemapindex>

2. 管理のしやすさ

コンテンツタイプごとの分割

記事や製品ページ、カテゴリーなどの異なるコンテンツタイプごとに分けることで、整理しやすくなります。

更新頻度の異なるページの管理

頻繁に更新される記事ページと、ほとんど変更されない固定ページを別のサイトマップファイルで管理できます。

3. パフォーマンス

部分的な更新

更新が必要な部分のサイトマップだけを生成・更新できるため、大規模サイトでは効率的です。

大きなファイルの生成を回避

すべてのURLを1つのファイルにまとめると、更新のたびに大容量のファイルを生成する必要があり、パフォーマンスに影響を与える可能性があります。

結論

ブログサイトの規模が小さく、URL数が50,000未満であれば、1つのファイルにまとめても問題ありません。ただし、将来的にコンテンツが増えた場合を考慮し、インデックス形式を採用しておくと柔軟性が高まります。

まとめ

next-sitemapを導入することで、手動でサイトマップファイルを作成・更新する手間が省け、SEOの基盤強化に大いに役立ちます。さらに、ISRと組み合わせれば動的なコンテンツ更新にも強くなり、常に最新のサイトマップを検索エンジンに提供できるようになります。サイトの検索エンジン評価を高めたい方は、ぜひこの機会に導入を検討してみてください。

サイトマップの自動生成が可能

ISRと連携した動的な更新

robots.txtの自動生成対応

環境変数を用いた柔軟なURL設定

設定自体はシンプルなので、Next.js + next-sitemapの組み合わせは特におすすめです。ぜひ試してみてください。