Next.js アプリのサイトマップを Vercel で自動生成！SEO対策もバッチリ【初心者向け】

1. サイトマップって何？なぜ必要なの？

サイトマップとは、Webサイトの全ページのURLをリスト化したものです。検索エンジンのクローラー（Webサイトを巡回するロボット）は、このサイトマップを参考にWebサイトを効率的にクロールし、インデックス（検索エンジンのデータベースに登録）します。

サイトマップの重要性

SEO (Search Engine Optimization: 検索エンジン最適化) の向上: 検索エンジンがWebサイトの構造を理解しやすくなり、検索結果で上位表示されやすくなります。
クロールの効率化: 特に大規模なWebサイトや、内部リンクが少ないWebサイトでは、サイトマップがあることでクローラーがすべてのページを見つけやすくなります。
新規ページの迅速なインデックス: 新しく作成したページをサイトマップに追加することで、検索エンジンに素早く認識してもらうことができます。

2. Next.js でサイトマップを生成する方法

Next.js でサイトマップを生成する方法はいくつかありますが、ここでは Vercel の Serverless Functions (サーバーレス関数) を利用して自動生成する方法を紹介します。

2.1. 必要なパッケージのインストール

まず、必要なパッケージをインストールします。ターミナルで以下のコマンドを実行してください。

npm install next-sitemap gray-matter glob
# next-sitemap: サイトマップを生成するためのライブラリ
# gray-matter: Markdownファイルのフロントマターを解析するためのライブラリ
# glob: ファイルパスのパターンマッチングを行うためのライブラリ

2.2. サイトマップ生成スクリプトの作成

次に、サイトマップを生成するスクリプトを作成します。scripts ディレクトリを作成し、その中に generate-sitemap.js というファイルを作成してください。

// scripts/generate-sitemap.js
const fs = require('fs');
const globby = require('globby');
const matter = require('gray-matter');

async function generateSitemap() {
  const baseUrl = 'https://your-domain.com'; // あなたのWebサイトのURLに置き換えてください
  const pages = await globby([
    'pages/**/*{.js,.mdx}', // pagesディレクトリ以下の.jsと.mdxファイルを対象にする
    '!pages/_*.js', // _app.jsや_document.jsなどのファイルを対象外にする
    '!pages/api', // apiディレクトリを対象外にする
  ]);

  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      ${pages
        .map((page) => {
          const path = page
            .replace('pages', '')
            .replace('.js', '')
            .replace('.mdx', '')
            .replace('/index', '');
          const route = path === '/index' ? '' : path;
          return `
            <url>
              <loc>${baseUrl}${route}</loc>
            </url>
          `;
        })
        .join('')}
    </urlset>
  `;

  fs.writeFileSync('public/sitemap.xml', sitemap); // publicディレクトリにsitemap.xmlを生成
}

generateSitemap();

2.3. Vercel の Serverless Function の設定

api ディレクトリに sitemap.js というファイルを作成します。

// pages/api/sitemap.js
import { SitemapStream, streamToPromise } from 'sitemap';
import { Readable } from 'stream';
import globby from 'globby';
import matter from 'gray-matter';

export default async function handler(req, res) {
  try {
    const baseUrl = 'https://your-domain.com'; // あなたのWebサイトのURLに置き換えてください

    const pages = await globby([
      'pages/**/*{.js,.mdx}',
      '!pages/_*.js',
      '!pages/api',
    ]);

    const links = pages.map((page) => {
      const path = page
        .replace('pages', '')
        .replace('.js', '')
        .replace('.mdx', '')
        .replace('/index', '');
      const route = path === '/index' ? '' : path;
      return { url: `${route}`, changefreq: 'daily', priority: 0.7 };
    });

    // ストリームを作成
    const stream = new SitemapStream({ hostname: baseUrl });

    // URLを追加
    links.forEach((link) => stream.write(link));

    // ストリームを終了
    stream.end();

    // ストリームをPromiseに変換
    const sitemap = await streamToPromise(stream).then((data) =>
      data.toString()
    );

    // レスポンスを設定
    res.writeHead(200, {
      'Content-Type': 'application/xml',
    });
    res.end(sitemap);
  } catch (e) {
    console.log(e);
    res.status(500).end();
  }
}

2.4. Vercel デプロイ時にサイトマップを生成する設定

vercel.json ファイルに、デプロイ時にサイトマップを生成する設定を追加します。

{
  "version": 2,
  "builds": [
    {
      "src": "pages/api/sitemap.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/sitemap.xml",
      "dest": "/api/sitemap"
    }
  ]
}

2.5. Vercel にデプロイ

これで設定は完了です。Vercel にデプロイすると、自動的にサイトマップが生成され、https://your-domain.com/sitemap.xml でアクセスできるようになります。

3. サイトマップの確認と送信

生成されたサイトマップが正しいことを確認しましょう。ブラウザで https://your-domain.com/sitemap.xml にアクセスし、XML形式でサイトマップが表示されることを確認してください。

次に、Google Search Console (グーグルサーチコンソール) にサイトマップを送信します。Google Search Console にログインし、Webサイトを登録後、「サイトマップ」の項目からサイトマップのURL (https://your-domain.com/sitemap.xml) を送信してください。

4. まとめ

この記事では、Next.js アプリのサイトマップを Vercel で自動生成する方法を解説しました。

サイトマップは SEO 対策に非常に重要
Vercel の Serverless Functions を利用することで、サイトマップを自動生成できる
生成されたサイトマップは Google Search Console に送信する

サイトマップを正しく設定することで、あなたのWebサイトがより多くの人に届くようになります。ぜひ試してみてください！

次のステップ

Google Search Console でWebサイトのパフォーマンスを分析する
robots.txt ファイルを設定して、クローラーのアクセスを制御する
Webサイトのコンテンツを充実させて、SEO をさらに強化する