Erstellen eines Sitemap-Index für mehrere Sprachen

Problem

Eine Website verfügt über eine große Anzahl von Seiten in vielen Sprachen. Eine einzelne, massive sitemap.xml-Datei, die jede URL für jede Sprache auflistet, ist ineffizient, schwer zu verwalten und kann Dateigrößenlimits überschreiten. Dies erschwert die Aktualisierung der URLs einer Sprache oder die effiziente Entdeckung aller Inhalte durch Suchmaschinen.

Lösung

Erstellen Sie eine sitemap.xml-Datei, die als "Sitemap-Index" fungiert und auf andere, sprachspezifische Sitemaps verweist (z. B. sitemap-en.xml, sitemap-es.xml). Dieser Ansatz organisiert Inhalte, ist einfacher zu verwalten und skaliert effizient, wenn neue Sprachen oder Seiten hinzugefügt werden.

Schritte

1. Erstellen der Sitemap-Index-Route

Anstelle der sitemap.ts-Datei müssen Sie einen Standard-Route-Handler erstellen. Dies gibt Ihnen die volle Kontrolle, um einen Sitemap-Index zu generieren.

Erstellen Sie app/sitemap.xml/route.ts.

// app/sitemap.xml/route.ts
import { locales, siteBaseUrl } from '@/i18n-config';

export async function GET() {
  const sitemapIndex = `<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="[http://www.sitemaps.org/schemas/sitemap/0.9](http://www.sitemaps.org/schemas/sitemap/0.9)">
  ${locales
    .map((locale) => {
      return `
    <sitemap>
      <loc>${siteBaseUrl}/sitemap-${locale}.xml</loc>
      <lastmod>${new Date().toISOString()}</lastmod>
    </sitemap>`;
    })
    .join('')}
</sitemapindex>
`;

  return new Response(sitemapIndex, {
    headers: {
      'Content-Type': 'application/xml',
    },
  });
}

Diese Datei teilt Suchmaschinen mit, dass die Sitemap Ihrer Website ein Index ist, der auf andere Dateien verweist, wie sitemap-en.xml, sitemap-es.xml usw.

2. Erstellen der dynamischen Route für Sprach-Sitemaps

Erstellen Sie als Nächstes die dynamische Route, die jede sprachspezifische Sitemap generiert.

Erstellen Sie app/sitemap-[lang].xml/route.ts.

// app/sitemap-[lang].xml/route.ts
import { locales, siteBaseUrl } from '@/i18n-config';

// This tells Next.js which sitemaps to build at build time
export async function generateStaticParams() {
  return locales.map((lang) => ({
    lang,
  }));
}

// A helper function to get all pages for a language
// In a real app, this would fetch from a CMS or database
async function getPagesForLanguage(lang: string): Promise<string[]> {
  // These are relative paths, *without* the lang prefix
  // e.g., '/', '/about', '/blog/my-post'
  return ['/', '/about', '/contact'];
}

export async function GET(
  request: Request,
  { params }: { params: { lang: string } }
) {
  const { lang } = params;

  if (!locales.includes(lang)) {
    return new Response('Not Found', { status: 404 });
  }

  const pages = await getPagesForLanguage(lang);

  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="[http://www.sitemaps.org/schemas/sitemap/0.9](http://www.sitemaps.org/schemas/sitemap/0.9)">
  ${pages
    .map((page) => {
      const path = page === '/' ? '' : page;
      return `
    <url>
      <loc>${siteBaseUrl}/${lang}${path}</loc>
      <lastmod>${new Date().toISOString()}</lastmod>
    </url>`;
    })
    .join('')}
</urlset>
`;

  return new Response(sitemap, {
    headers: {
      'Content-Type': 'application/xml',
    },
  });
}

Jetzt ist Ihre sitemap.xml-Datei ein übersichtlicher Index, und die URLs jeder Sprache sind ordentlich in eigenen Dateien organisiert (z. B. /sitemap-en.xml), die von dieser dynamischen Route generiert werden.