Next.jsでサイトマップの実装

1 はじめに
2 Sitemapとは
3 基本的な実装方法
4 動的に生成
5 複数ファイルの生成
6 さいごに
7 おすすめ書籍

はじめに

Next.jsでサイトマップの実装を行う方法を調べたので簡単にまとめてみたいと思います。

Sitemapとは

Google などの検索エンジンが効率的にクロールを行う為に、サイト上のページや動画などのファイルについての情報や、各ファイルの関係を伝えるファイルです。

ここでは深く触れませんが、各ページのURL、ページの更新頻度、最終更新日、ページの優先度などをの情報を検索エンジンに提供してインデックス促進してSEO強化します。

基本的な実装方法

Next.jsではサイトマップ生成用の sitemap.ts ファイルでsitemap.xmlを実装します。
app直下に配置します。

export default function sitemap(): MetadataRoute.Sitemap {

return [

{

url: "https://test.com",

lastModified: new Date(),

changeFrequency: "yearly",

priority: 1,

{

url: "https://test.com/about",

lastModified: new Date(),

changeFrequency: "monthly",

priority: 0.8,

{

url: "https://test.com/blog",

lastModified: new Date(),

changeFrequency: "weekly",

priority: 0.5,

];

}

Sitemap 型オブジェクトの配列を返す sitemap() 関数を実装しています。
Sitemap 型では、主に以下のパラメーターを設定します。

url：ページのURL、必須項目
lastModified：最終更新日
changeFrequency：更新頻度
priority：ページのクローリング優先度

実装後にhttp://localhost:3000/sitemap.xmlで確認すると以下の様にサイトマップが生成される事が確認出来ます。

<url>

<loc>https://test.com</loc>

<changefreq>yearly</changefreq>

</url>

<url>

<loc>https://test.com/about</loc>

<changefreq>monthly</changefreq>

</url>

<url>

<loc>https://test.com/blog</loc>

<changefreq>weekly</changefreq>

</url>

</urlset>

動的に生成

今度は動的にURLを生成してサイトマップを生成してみたいと思います。

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {

// APIで値を取得

const url = 'http://localhost/api/player';

const players = await fetch(url, {}).then((response) => response.json() as Promise<{id: number, name: string, update_time: string}[]>);

// 取得した値を元にURLを生成

return players.map((player: { id: number, name: string, update_time: string }) => ({

url: `https://test.com/player_profile/${player.id}`,

lastModified: player.update_time,

}));

}

サイトマップ生成時にAPIで取得した値を元にして各URLを設定しています

以下の様に、それぞれのURLが生成されます

<url>

<loc>https://test.com/player_profile/13</loc>

</url>

<url>

<loc>https://test.com/player_profile/14</loc>

</url>

<url>

<loc>https://test.com/player_profile/15</loc>

</url>

<url>

<loc>https://test.com/player_profile/16</loc>

</url>

</urlset>

複数ファイルの生成

大規模サイト向けなど複数のサイトマップファイルを配置したい場合もあるかと思います。
その場合は generateSitemaps 関数を使用することが出来ます。

export async function generateSitemaps() {

// 生成したいxmlファイル数分のidプロパティを持つオブジェクトを配列で返す。

// idプロパティは生成されるxmlファイル名となる

return [{ id: 1 }, { id: 2 }, { id: 3 }];

}

export default async function sitemap({id}: { id: number }): Promise<MetadataRoute.Sitemap> {

// APIで値を取得

// idを元にクエリパラーメーターを付与。team毎のplayerを取得

const url = `http://localhost:50080/api/player?team_id=${id}`;

const playersInEachTeam = await fetch(url, {}).then((response) => response.json() as Promise<{id: number, name: string, team_id: number, update_time: string}[]>);

// 取得した値を元にURLを生成

// team毎にsitemapファイルを生成する

return playersInEachTeam.map((player: { id: number, name: string, team_id: number, update_time: string }) => ({

url: `https://test.com/player_profile/${player.team_id}/${player.id}`,

lastModified: player.update_time,

}));

}

上記例でいうと、クエリパラメーターに id の値を持たせて、 generateSitemaps 関数で生成したteamID毎にサイトマップファイルを生成して、各チームの選手のプロフィールURLを含んでいる形です。
今回はteam_idを固定値としていますが、ここの値もAPI等で動的に取得することも可能です。
generateSitemapsn の特徴は以下のようになっています。

idプロパティを持つオブジェクトの配列を返却している。
このidプロパティが生成される各xmlファイルの番号になっている。
今回なら、http://localhost:3000/sitemap/1.xml、http://localhost:3000/sitemap/2.xml、http://localhost:3000/sitemap/3.xmlの 3つのサイトマップファイルが生成されている

生成結果はそれぞれ、以下の様になります。

<url>

<loc>https://test.com/player_profile/1/13</loc>

</url>

<url>

<loc>https://test.com/player_profile/1/17</loc>

</url>

</urlset>

<url>

<loc>https://test.com/player_profile/2/14</loc>

</url>

<url>

<loc>https://test.com/player_profile/2/18</loc>

</url>

</urlset>

<url>

<loc>https://test.com/player_profile/3/15</loc>

</url>

<url>

<loc>https://test.com/player_profile/3/19</loc>

</url>

</urlset>

さいごに

Next.jsでサイトマップを実装してみました。
ファイル数が多い場合などは自分で実装するよりは楽に実装できそうです。

日	月	火	水	木	金	土
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Next.jsでサイトマップの実装

はじめに

Sitemapとは

基本的な実装方法

動的に生成

複数ファイルの生成

さいごに

おすすめ書籍

フォロー

アプリ情報