sitemap.xml
sitemap.(xml|js|ts) は、検索エンジンのクローラーがサイトを効率的にインデックスできるようにするための Sitemaps XML フォーマット に準拠した特別なファイルです。
Sitemap ファイル (.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>コードを使用した Sitemap の生成 (.js, .ts)
sitemap.(js|ts) ファイル規約を使用して、URL の配列を返すデフォルト関数をエクスポートすることで、プログラム的に 生成 できます。TypeScript を使用する場合、Sitemap 型が利用可能です。
import { 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,
},
]
}export default function 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>ローカライズされた Sitemap の生成
import { 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>複数の Sitemap の生成
単一の Sitemap でほとんどのアプリケーションは動作しますが、大規模なウェブアプリケーションでは Sitemap を複数のファイルに分割する必要がある場合があります。
複数の Sitemap を作成する方法は 2 つあります:
- 複数のルートセグメント内に
sitemap.(xml|js|ts)をネストする（例:app/sitemap.xmlとapp/products/sitemap.xml） generateSitemaps関数を使用する
例えば、generateSitemaps を使用して Sitemap を分割する場合、sitemap の id を含むオブジェクトの配列を返します。その後、id を使用して個別の Sitemap を生成します。
import { BASE_URL } from '@/app/lib/constants'
export async function generateSitemaps() {
// 製品の総数を取得し、必要な Sitemap の数を計算
return [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }]
}
export default async function sitemap({
id,
}: {
id: number
}): Promise<MetadataRoute.Sitemap> {
// Google の制限は Sitemap あたり 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/${id}`,
lastModified: product.date,
}))
}import { BASE_URL } from '@/app/lib/constants'
export async function generateSitemaps() {
// 製品の総数を取得し、必要な Sitemap の数を計算
return [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }]
}
export default async function sitemap({ id }) {
// Google の制限は Sitemap あたり 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/${id}`,
lastModified: product.date,
}))
}本番環境では、生成された Sitemap は /.../sitemap/[id].xml で利用可能です（例: /product/sitemap/1.xml）。
開発環境では、生成された Sitemap を /.../sitemap.xml/[id] で確認できます（例: /product/sitemap.xml/1）。この違いは一時的なもので、本番環境の形式に従います。
詳細については 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>
}
}>バージョン履歴
| バージョン | 変更内容 |
|---|---|
v13.4.5 | Sitemap に changeFrequency と priority 属性を追加 |
v13.3.0 | sitemap を導入 |