sitemap.xml

sitemap.(xml|js|ts) ist eine spezielle Datei, die dem Sitemaps XML-Format entspricht, um Suchmaschinen-Crawlern dabei zu helfen, Ihre Website effizienter zu indexieren.

Sitemap-Dateien (.xml)

Für kleinere Anwendungen können Sie eine sitemap.xml-Datei erstellen und im Stammverzeichnis Ihres app-Ordners ablegen.

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>

Generierung einer Sitemap mit Code (.js, .ts)

Sie können die sitemap.(js|ts)-Dateikonvention verwenden, um programmatisch eine Sitemap zu generieren, indem Sie eine Standardfunktion exportieren, die ein Array von URLs zurückgibt. Bei Verwendung von TypeScript steht ein Sitemap-Typ zur Verfügung.

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

Ausgabe:

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>

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

Ausgabe:

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>

Generierung mehrerer Sitemaps

Während eine einzelne Sitemap für die meisten Anwendungen ausreicht, kann es bei großen Webanwendungen notwendig sein, eine Sitemap in mehrere Dateien aufzuteilen.

Es gibt zwei Möglichkeiten, mehrere Sitemaps zu erstellen:

Durch Verschachtelung von sitemap.(xml|js|ts) in mehreren Routensegmenten, z.B. app/sitemap.xml und app/products/sitemap.xml.
Durch Verwendung der generateSitemaps-Funktion.

Um beispielsweise eine Sitemap mit generateSitemaps aufzuteilen, geben Sie ein Array von Objekten mit der Sitemap-id zurück. Verwenden Sie dann die id, um die eindeutigen Sitemaps zu generieren.

import { BASE_URL } from '@/app/lib/constants'

export async function generateSitemaps() {
  // Gesamtzahl der Produkte abrufen und Anzahl der benötigten Sitemaps berechnen
  return [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }]
}

export default async function sitemap({
  id,
}: {
  id: number
}): Promise<MetadataRoute.Sitemap> {
  // Google-Limit: 50.000 URLs pro 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,
  }))
}

import { BASE_URL } from '@/app/lib/constants'

export async function generateSitemaps() {
  // Gesamtzahl der Produkte abrufen und Anzahl der benötigten Sitemaps berechnen
  return [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }]
}

export default async function sitemap({ id }) {
  // Google-Limit: 50.000 URLs pro 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,
  }))
}

In der Produktion sind Ihre generierten Sitemaps unter /.../sitemap/[id].xml verfügbar. Zum Beispiel /product/sitemap/1.xml.

In der Entwicklung können Sie die generierte Sitemap unter /.../sitemap.xml/[id] anzeigen. Zum Beispiel /product/sitemap.xml/1. Dieser Unterschied ist temporär und wird dem Produktionsformat folgen.

Weitere Informationen finden Sie in der generateSitemaps API-Referenz.

Rückgabewerte

Die aus sitemap.(xml|ts|js) exportierte Standardfunktion sollte ein Array von Objekten mit den folgenden Eigenschaften zurückgeben:

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

Versionsverlauf

Version	Änderungen
`v13.4.5`	`changeFrequency` und `priority` Attribute zu Sitemaps hinzugefügt.
`v13.3.0`	`sitemap` eingeführt.

generateSitemaps

Erfahren Sie, wie Sie die Funktion generateSiteMaps verwenden, um mehrere Sitemaps für Ihre Anwendung zu erstellen.