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 数组的默认函数来以编程方式生成站点地图。如果使用 TypeScript，可以使用 Sitemap 类型。

值得注意的是：sitemap.js 是一个特殊的路由处理程序，默认情况下会被缓存，除非它使用了动态函数或动态配置选项。

app/sitemap.ts

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

app/sitemap.js

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

输出：

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

app/sitemap.ts

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

输出：

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 对大多数应用程序来说已经足够，但对于大型 Web 应用程序，你可能需要将 sitemap 拆分成多个文件。

有两种方法可以创建多个 sitemap：

通过在多个路由段中嵌套 sitemap.(xml|js|ts)，例如 app/sitemap.xml 和 app/products/sitemap.xml。
通过使用 generateSitemaps 函数。

例如，要使用 generateSitemaps 拆分 sitemap，返回一个包含 sitemap id 的对象数组。然后，使用 id 生成唯一的 sitemap。

app/product/sitemap.ts

import type { MetadataRoute } from "next";
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/${product.id}`,
    lastModified: product.date,
  }));
}

app/product/sitemap.js

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/${product.id}`,
    lastModified: product.date,
  }));
}

你生成的 sitemap 将在 /.../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.5`	为 sitemap 添加 `changeFrequency` 和 `priority` 属性。
`v13.3.0`	引入 `sitemap`。