はじめに
Next.jsでサイトマップの実装を行う方法を調べたので簡単にまとめてみたいと思います。
Sitemapとは
Google などの検索エンジンが効率的にクロールを行う為に、サイト上のページや動画などのファイルについての情報や、各ファイルの関係を伝えるファイルです。
ここでは深く触れませんが、各ページのURL、ページの更新頻度、最終更新日、ページの優先度などをの情報を検索エンジンに提供してインデックス促進してSEO強化します。
基本的な実装方法
Next.jsではサイトマップ生成用の
sitemap.ts
ファイルでsitemap.xmlを実装します。
app直下に配置します。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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で確認すると以下の様にサイトマップが生成される事が確認出来ます。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>https://test.com</loc> <lastmod>2025-03-14T13:54:55.425Z</lastmod> <changefreq>yearly</changefreq> <priority>1</priority> </url> <url> <loc>https://test.com/about</loc> <lastmod>2025-01-01</lastmod> <changefreq>monthly</changefreq> <priority>0.8</priority> </url> <url> <loc>https://test.com/blog</loc> <lastmod>2025-03-14T13:54:55.425Z</lastmod> <changefreq>weekly</changefreq> <priority>0.5</priority> </url> </urlset> |
動的に生成
今度は動的にURLを生成してサイトマップを生成してみたいと思います。
| 1 2 3 4 5 6 7 8 9 10 11 | 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が生成されます
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>https://test.com/player_profile/13</loc> <lastmod>2025-01-01</lastmod> </url> <url> <loc>https://test.com/player_profile/14</loc> <lastmod>2025-01-01</lastmod> </url> <url> <loc>https://test.com/player_profile/15</loc> <lastmod>2025-01-01</lastmod> </url> <url> <loc>https://test.com/player_profile/16</loc> <lastmod>2025-01-01</lastmod> </url> </urlset> |
複数ファイルの生成
大規模サイト向けなど複数のサイトマップファイルを配置したい場合もあるかと思います。
その場合は
generateSitemaps
関数を使用することが出来ます。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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つのサイトマップファイルが生成されている
生成結果はそれぞれ、以下の様になります。
| 1 2 3 4 5 6 7 8 9 10 | <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>https://test.com/player_profile/1/13</loc> <lastmod>2025-01-01</lastmod> </url> <url> <loc>https://test.com/player_profile/1/17</loc> <lastmod>2025-01-01</lastmod> </url> </urlset> |
| 1 2 3 4 5 6 7 8 9 10 | <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>https://test.com/player_profile/2/14</loc> <lastmod>2025-01-01</lastmod> </url> <url> <loc>https://test.com/player_profile/2/18</loc> <lastmod>2025-01-01</lastmod> </url> </urlset> |
| 1 2 3 4 5 6 7 8 9 10 | <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>https://test.com/player_profile/3/15</loc> <lastmod>2025-01-01</lastmod> </url> <url> <loc>https://test.com/player_profile/3/19</loc> <lastmod>2025-01-01</lastmod> </url> </urlset> |
さいごに
Next.jsでサイトマップを実装してみました。
ファイル数が多い場合などは自分で実装するよりは楽に実装できそうです。
おすすめ書籍
