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 陣列的預設函式來 動態生成 sitemap。如果使用 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：
- 透過在多個路由區段中嵌套
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.xml/[id] 查看生成的 sitemap。例如 /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 | 新增 changeFrequency 和 priority 屬性至 sitemap。 |
v13.3.0 | 引入 sitemap。 |