Menu

sitemap.xml

sitemap.(xml|js|ts) ist eine spezielle Datei, die dem Sitemaps XML-Format entspricht, um Suchmaschinen-Crawlern 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-Verzeichnisses platzieren.

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 generieren mit Code (.js, .ts)

Sie können die Dateikonvention sitemap.(js|ts) verwenden, um eine Sitemap programmatisch 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.

Hinweis: sitemap.js ist ein spezieller Route Handler, der standardmäßig zwischengespeichert wird, es sei denn, er verwendet eine Dynamische API oder eine dynamische Konfigurationsoption.

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

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>

Bild-Sitemaps

Sie können die images-Eigenschaft verwenden, um Bild-Sitemaps zu erstellen. Weitere Details finden Sie in den Google Developer Docs.

app/sitemap.ts
import type { MetadataRoute } from 'next'
 
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://example.com',
      lastModified: '2021-01-01',
      changeFrequency: 'weekly',
      priority: 0.5,
      images: ['https://example.com/image.jpg'],
    },
  ]
}

Ausgabe:

acme.com/sitemap.xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset
  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
>
  <url>
    <loc>https://example.com</loc>
    <image:image>
      <image:loc>https://example.com/image.jpg</image:loc>
    </image:image>
    <lastmod>2021-01-01</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.5</priority>
  </url>
</urlset>

Video-Sitemaps

Sie können die videos-Eigenschaft verwenden, um Video-Sitemaps zu erstellen. Weitere Details finden Sie in den Google Developer Docs.

app/sitemap.ts
import type { MetadataRoute } from 'next'
 
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://example.com',
      lastModified: '2021-01-01',
      changeFrequency: 'weekly',
      priority: 0.5,
      videos: [
        {
          title: 'example',
          thumbnail_loc: 'https://example.com/image.jpg',
          description: 'dies ist die Beschreibung',
        },
      ],
    },
  ]
}

Ausgabe:

acme.com/sitemap.xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset
  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"
>
  <url>
    <loc>https://example.com</loc>
    <video:video>
      <video:title>example</video:title>
      <video:thumbnail_loc>https://example.com/image.jpg</video:thumbnail_loc>
      <video:description>dies ist die Beschreibung</video:description>
    </video:video>
    <lastmod>2021-01-01</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.5</priority>
  </url>
</urlset>

Lokalisierte Sitemap generieren

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',
        },
      },
    },
  ]
}
app/sitemap.js
export default function 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>

Generieren mehrerer Sitemaps

Während eine einzelne Sitemap für die meisten Anwendungen funktioniert, müssen große Webanwendungen möglicherweise eine Sitemap in mehrere Dateien aufteilen.

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 Funktion generateSitemaps.

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

app/product/sitemap.ts
import type { MetadataRoute } from 'next'
import { BASE_URL } from '@/app/lib/constants'
 
export async function generateSitemaps() {
  // Gesamtanzahl 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> {
  // Googles Grenze ist 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/${product.id}`,
    lastModified: product.date,
  }))
}
app/product/sitemap.js
import { BASE_URL } from '@/app/lib/constants'
 
export async function generateSitemaps() {
  // Gesamtanzahl 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 }) {
  // Googles Grenze ist 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/${product.id}`,
    lastModified: product.date,
  }))
}

Ihre generierten Sitemaps sind unter /.../sitemap/[id] verfügbar. Beispielsweise /product/sitemap/1.xml.

Weitere Informationen finden Sie in der generateSitemaps API-Referenz.

Rückgabewerte

Die als Standard exportierte Funktion aus sitemap.(xml|ts|js) 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>
  }
}>

Versionshistorie

VersionÄnderungen
v14.2.0Lokalisierungsunterstützung hinzugefügt.
v13.4.14changeFrequency- und priority-Attribute zu Sitemaps hinzugefügt.
v13.3.0sitemap eingeführt.

Nächste Schritte

Lernen Sie, wie Sie die generateSitemaps-Funktion verwenden.

generateSitemaps

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