この記事では、Next.jsを使用してライブラリを使わずにXMLサイトマップを生成する方法と、サイトマップの各要素がSEOにどのような役割を果たすのかについてアウトプットする。

開発環境

"next": "14.1.0",
"react": "^18"

参考にしたNext.js公式ドキュメント

sitemap.xml

前提知識

XMLサイトマップの役割

XMLサイトマップは、ウェブサイトの構造を検索エンジンに伝えるXMLファイル。サイトマップにはウェブサイトの各ページのURLがリストされており、検索エンジンのクローラー(例えば、Googlebot)がサイトのすべてのページを発見し、理解するのを助ける。特に新しいウェブサイトや、リンクが少ないページ、リッチメディアコンテンツを多く含むサイトでは、サイトマップが検索エンジンにとって特に重要になる。

サイトマップのデータ項目とSEOの役割

サイトマップ内の各エントリには、以下の情報を含める。

  • url: サイトマップに含めるウェブページのURL。
  • lastModified: ページの最終更新日。検索エンジンがページを再クロールするタイミングの決定に役立つ。
  • changeFrequency: ページのコンテンツがどれくらいの頻度で更新されるか。値にはalwayshourlydailyweeklymonthlyyearlyneverがある。
  • priority: サイト内の他のページと比較した、このページの優先度。0.0から1.0の範囲で設定する。例えば、サイトのトップページのpriorityは1で、記事のpriorityは0.8などにする。

これにより、サイトのコンテンツ変更が迅速に検索結果に反映される可能性が高まる。

Next.jsでのサイトマップ生成方法

Next.jsプロジェクトでライブラリを使用せずにサイトマップを生成するには、サーバーサイドのスクリプトを作成する。このスクリプトは、ビルド時に実行され、サイトの構造に基づいてサイトマップを動的に生成し、publicディレクトリ内にXMLファイルとして出力する。

https://example.com/sitemap.xmlでアクセス可能になる。

以下、Next.jsプロジェクトでのサイトマップ生成スクリプトの例(実際に運用しているサイトで実装)

src/app/sitemap.ts

import { MetadataRoute } from 'next';
// 記事データを取得する外部関数
import { getList } from '@/libs/articles';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  // ブログ記事データの取得
  const posts = await getList();

  // 基本的なサイト情報
  const urls: MetadataRoute.Sitemap = [
    { url: 'https://example.com', changeFrequency: 'weekly', priority: 1 },
  ];

  // 各ブログ記事のURLを追加
  posts.contents.forEach((post) => {
    urls.push({
      url: `https://example.com/articles/${post.id}`,
      lastModified: post.updatedAt,
      changeFrequency: 'weekly',
      priority: 0.6,
    });
  });

  return urls;
}

このスクリプトは、記事データを取得し、それぞれの記事に対してサイトマップのエントリを生成した後、完成したサイトマップをpublic/sitemap.xmlとして出力する。

出力結果

上記の実装により、以下のようにxmlファイルとしてサイトマップが出力される。

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com</loc>
    <changefreq>yearly</changefreq>
    <priority>1</priority>
    </url>
  <url>
    <loc>https://example.com/articles/gr18xnl8f</loc>
    <lastmod>2024-02-14T09:06:35.130Z</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.6</priority>
  </url>
  <url>
    <loc>https://example.com/articles/lut1yqrn1</loc>
    <lastmod>2024-02-14T08:57:40.564Z</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.6</priority>
  </url>
  <url>
    <loc>https://example.com/articles/3zqx34ys8</loc>
    <lastmod>2024-02-12T00:11:30.872Z</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.6</priority>
  </url>
</urlset>

サイトマップを複数に分割する方法もある

Generating multiple sitemaps

Googleを含む多くの検索エンジンは、1つのサイトマップファイルに含めることができるURLの数に上限(通常は50,000URL)を設けている。また、サイトマップファイルのサイズにも制限がある。

サイトマップのサイズに関する制限: どの形式についても、1 つのサイトマップに対してサイズに関する上限(圧縮していない状態で 50 MB)と URL の件数に関する上限(50,000 件)が設けられています。ファイルサイズがこれより大きい場合、または URL の件数がこれより多い場合は、サイトマップを複数に分割する必要があります。または、サイトマップ インデックス ファイルを作成して、そのインデックス ファイルのみを Google に送信することもできます。サイトマップやサイトマップ インデックス ファイルは、Google に複数送信できます。複数に分けると、Search Console で個々のサイトマップの検索パフォーマンスをトラッキングする場合に便利です。

https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap?hl=ja

そこで、generateSitemapsを使用して、ディレクトリ(記事カテゴリーやECサイトの商品群)ごとにサイトマップを生成することができる。

実装方法は割愛。

カテゴリー: Next.jsUncategorized