sitemap.xml

sitemap.(xml|js|ts) 是一個符合 Sitemaps XML 格式的特殊檔案，可協助搜尋引擎爬蟲更有效率地索引您的網站。

Sitemap 檔案 (.xml)

對於較小的應用程式，您可以建立一個 sitemap.xml 檔案並將其放置在 app 目錄的根目錄下。

app/sitemap.xml

<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,
    },
  ]
}

輸出：

acme.com/sitemap.xml

<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',
        },
      },
    },
  ]
}

輸出：

acme.com/sitemap.xml

<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,
  }))
}

在正式環境中，您生成的 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`。

generateSitemaps

了解如何使用 generateSiteMaps 函式為您的應用程式建立多個網站地圖 (sitemap)。