Lang x Lang

sitemap.xml

sitemap.(xml|js|ts)は、Sitemaps XML format に対応して、検索エンジンのクローラがあなたのサイトをより効率的に index するのに役立つ特別なファイルです。

Sitemap ファイル (.xml)

より小さなアプリケーションの場合、 sitemap.xml ファイルを作成し、appディレクトリの root に配置することができます。

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>

code(.js、.ts)を使って sitemap を生成する

sitemap.(js|ts)ファイルの慣例を利用して、URL の配列を返す default 関数をエクスポートすることで、プログラム的に生成する sitemap を利用することができます。 TypeScript を使用する場合、Sitemap type が利用可能です。

app/sitemap.ts
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,
    },
  ]
}
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,
    },
  ]
}

Output:

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 は、ほとんどのアプリケーションで機能します。しかし、大規模なウェブアプリケーションの場合、sitemap を複数のファイルに分割する必要があるかもしれません。

複数のサイトマップを作成するための 2 つの方法があります:

  • sitemap.(xml|js|ts) を複数の route セグメント内にネストすることで、例えば app/sitemap.xmlapp/products/sitemap.xml といったようになります。
  • generateSitemaps 関数を使用することにより。

たとえば、generateSitemapsを使用して sitemap を分割するには、sitemap のidを持つ Object の配列を返します。その後、そのidを使用してユニークなサイトマップを生成します。

app/product/sitemap.ts
import { BASE_URL } from '@/app/lib/constants'

export async function generateSitemaps() {
  // Fetch the total number of products and calculate the number of sitemaps needed
  return [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }]
}

export default async function sitemap({
  id,
}: {
  id: number
}): Promise<MetadataRoute.Sitemap> {
  // Google's limit is 50,000 URLs per sitemap
  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,
  }))
}
app/product/sitemap.js
import { BASE_URL } from '@/app/lib/constants'

export async function generateSitemaps() {
  // Fetch the total number of products and calculate the number of sitemaps needed
  return [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }]
}

export default async function sitemap({ id }) {
  // Google's limit is 50,000 URLs per sitemap
  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,
  }))
}

production では、生成したサイトマップは/.../sitemap/[id].xmlで利用できます。例えば、/product/sitemap/1.xmlのようになります。

development では、生成された sitemap を/.../sitemap.xml/[id]で閲覧することができます。たとえば、/product/sitemap.xml/1です。この違いは一時的なもので、製造の形式に従います。

詳細については、generateSitemaps API reference をご覧ください。

Returns

sitemap.(xml|ts|js)から export される default 関数は、以下のプロパティを持つ Object の配列を返すべきです:

type Sitemap = Array<{
  url: string;
  lastModified?: string | Date;
  changeFrequency?:
    | "always"
    | "hourly"
    | "daily"
    | "weekly"
    | "monthly"
    | "yearly"
    | "never";
  priority?: number;
}>;

Version History

VersionChanges
v13.4.5サイトマップに changeFrequencypriority 属性を追加します。
v13.3.0sitemap 導入されました。

当社サイトでは、Cookie を使用しています。各規約をご確認の上ご利用ください:
Cookie Policy, Privacy Policy および Terms of Use