sitemap.xml
sitemap.(xml|js|ts)
は、検索エンジンのクローラーがサイトをより効率的にインデックス化するのを助ける、Sitemaps XMLフォーマットに準拠した特別なファイルです。
サイトマップファイル (.xml)
小規模なアプリケーションの場合、sitemap.xml
ファイルを作成し、app
ディレクトリのルートに配置できます。
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://acme.com</loc>
<lastmod>2023-04-06T15:02:24.021Z</lastmod>
<changefreq>yearly</changefreq>
<priority>1</priority>
</url>
<url>
<loc>https://acme.com/about</loc>
<lastmod>2023-04-06T15:02:24.021Z</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://acme.com/blog</loc>
<lastmod>2023-04-06T15:02:24.021Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
</urlset>
コードを使用したサイトマップの生成 (.js, .ts)
sitemap.(js|ts)
ファイル規約を使用して、URL の配列を返すデフォルト関数をエクスポートすることで、サイトマップを生成できます。TypeScriptを使用する場合、Sitemap
型が利用可能です。
補足:
sitemap.js
は、動的APIまたは動的コンフィグオプションを使用しない限り、デフォルトでキャッシュされる特別なルートハンドラーです。
import type { MetadataRoute } from 'next'
export default function sitemap(): MetadataRoute.Sitemap {
return [
{
url: 'https://acme.com',
lastModified: new Date(),
changeFrequency: 'yearly',
priority: 1,
},
{
url: 'https://acme.com/about',
lastModified: new Date(),
changeFrequency: 'monthly',
priority: 0.8,
},
{
url: 'https://acme.com/blog',
lastModified: new Date(),
changeFrequency: 'weekly',
priority: 0.5,
},
]
}
出力:
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://acme.com</loc>
<lastmod>2023-04-06T15:02:24.021Z</lastmod>
<changefreq>yearly</changefreq>
<priority>1</priority>
</url>
<url>
<loc>https://acme.com/about</loc>
<lastmod>2023-04-06T15:02:24.021Z</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://acme.com/blog</loc>
<lastmod>2023-04-06T15:02:24.021Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
</urlset>
画像サイトマップ
images
プロパティを使用して画像サイトマップを作成できます。詳細はGoogle開発者ドキュメントを参照してください。
import type { MetadataRoute } from 'next'
export default function sitemap(): MetadataRoute.Sitemap {
return [
{
url: 'https://example.com',
lastModified: '2021-01-01',
changeFrequency: 'weekly',
priority: 0.5,
images: ['https://example.com/image.jpg'],
},
]
}
出力:
<?xml version="1.0" encoding="UTF-8"?>
<urlset
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
>
<url>
<loc>https://example.com</loc>
<image:image>
<image:loc>https://example.com/image.jpg</image:loc>
</image:image>
<lastmod>2021-01-01</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
</urlset>
ビデオサイトマップ
videos
プロパティを使用してビデオサイトマップを作成できます。詳細はGoogle開発者ドキュメントを参照してください。
import type { MetadataRoute } from 'next'
export default function sitemap(): MetadataRoute.Sitemap {
return [
{
url: 'https://example.com',
lastModified: '2021-01-01',
changeFrequency: 'weekly',
priority: 0.5,
videos: [
{
title: 'example',
thumbnail_loc: 'https://example.com/image.jpg',
description: 'this is the description',
},
],
},
]
}
出力:
<?xml version="1.0" encoding="UTF-8"?>
<urlset
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"
>
<url>
<loc>https://example.com</loc>
<video:video>
<video:title>example</video:title>
<video:thumbnail_loc>https://example.com/image.jpg</video:thumbnail_loc>
<video:description>this is the description</video:description>
</video:video>
<lastmod>2021-01-01</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
</urlset>
ローカライズされたサイトマップの生成
import type { MetadataRoute } from 'next'
export default function sitemap(): MetadataRoute.Sitemap {
return [
{
url: 'https://acme.com',
lastModified: new Date(),
alternates: {
languages: {
es: 'https://acme.com/es',
de: 'https://acme.com/de',
},
},
},
{
url: 'https://acme.com/about',
lastModified: new Date(),
alternates: {
languages: {
es: 'https://acme.com/es/about',
de: 'https://acme.com/de/about',
},
},
},
{
url: 'https://acme.com/blog',
lastModified: new Date(),
alternates: {
languages: {
es: 'https://acme.com/es/blog',
de: 'https://acme.com/de/blog',
},
},
},
]
}
出力:
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://acme.com</loc>
<xhtml:link
rel="alternate"
hreflang="es"
href="https://acme.com/es"/>
<xhtml:link
rel="alternate"
hreflang="de"
href="https://acme.com/de"/>
<lastmod>2023-04-06T15:02:24.021Z</lastmod>
</url>
<url>
<loc>https://acme.com/about</loc>
<xhtml:link
rel="alternate"
hreflang="es"
href="https://acme.com/es/about"/>
<xhtml:link
rel="alternate"
hreflang="de"
href="https://acme.com/de/about"/>
<lastmod>2023-04-06T15:02:24.021Z</lastmod>
</url>
<url>
<loc>https://acme.com/blog</loc>
<xhtml:link
rel="alternate"
hreflang="es"
href="https://acme.com/es/blog"/>
<xhtml:link
rel="alternate"
hreflang="de"
href="https://acme.com/de/blog"/>
<lastmod>2023-04-06T15:02:24.021Z</lastmod>
</url>
</urlset>
複数のサイトマップの生成
ほとんどのアプリケーションでは単一のサイトマップで十分ですが、大規模なウェブアプリケーションでは、サイトマップを複数のファイルに分割する必要がある場合があります。
複数のサイトマップを作成する方法は2つあります:
sitemap.(xml|js|ts)
を複数のルートセグメント内にネストする。例:app/sitemap.xml
とapp/products/sitemap.xml
。generateSitemaps
関数を使用する。
例えば、generateSitemaps
を使用してサイトマップを分割するには、サイトマップの id
を持つオブジェクトの配列を返します。次に、id
を使用して一意のサイトマップを生成します。
import type { MetadataRoute } from 'next'
import { BASE_URL } from '@/app/lib/constants'
export async function generateSitemaps() {
// 製品の総数を取得し、必要なサイトマップの数を計算する
return [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }]
}
export default async function sitemap({
id,
}: {
id: number
}): Promise<MetadataRoute.Sitemap> {
// Googleの制限は1サイトマップあたり50,000 URL
const start = id * 50000
const end = start + 50000
const products = await getProducts(
`SELECT id, date FROM products WHERE id BETWEEN ${start} AND ${end}`
)
return products.map((product) => ({
url: `${BASE_URL}/product/${product.id}`,
lastModified: product.date,
}))
}
生成されたサイトマップは /.../sitemap/[id]
で利用可能になります。例えば、/product/sitemap/1.xml
。
詳細は generateSitemaps
APIリファレンス を参照してください。
戻り値
sitemap.(xml|ts|js)
からエクスポートされるデフォルト関数は、以下のプロパティを持つオブジェクトの配列を返す必要があります:
type Sitemap = Array<{
url: string
lastModified?: string | Date
changeFrequency?:
| 'always'
| 'hourly'
| 'daily'
| 'weekly'
| 'monthly'
| 'yearly'
| 'never'
priority?: number
alternates?: {
languages?: Languages<string>
}
}>
バージョン履歴
バージョン | 変更内容 |
---|---|
v14.2.0 | 言語ローカライゼーションのサポートを追加。 |
v13.4.14 | サイトマップに changeFrequency および priority 属性を追加。 |
v13.3.0 | sitemap を導入。 |