So erstellen Sie mehrsprachige Sitemaps in React Router v7

Problem

Sitemaps helfen Suchmaschinen, alle Seiten einer Website zu entdecken und zu crawlen. Eine mehrsprachige Website mit Hunderten oder Tausenden von Seiten pro Sprache kann schnell enorme Sitemaps generieren. Eine einzelne Datei, die jede URL für jede Sprache auflistet, wird unhandlich, kann die Grenzwerte von 50.000 URLs oder 50 MB überschreiten und erschwert die Wartung. Wenn Sie die Struktur einer Sprache aktualisieren, müssen Sie die gesamte Datei neu generieren und revalidieren. Dieser Ansatz skaliert nicht, wenn Ihre Website wächst.

Lösung

Teilen Sie Sitemaps in eine Hierarchie mit einem Sitemap-Index auf oberster Ebene auf, der auf separate, sprachspezifische Sitemaps verweist. Jede Sprache erhält ihre eigene Sitemap-Datei, die nur URLs für diese Sprache enthält. Die Index-Datei fungiert als Verzeichnis und listet den Speicherort jeder Sprach-Sitemap auf. Dies hält einzelne Dateien überschaubar, ermöglicht es Ihnen, jede Sprache unabhängig zu aktualisieren, und skaliert gut, wenn Sie neue Sprachen oder Seiten hinzufügen. Suchmaschinen crawlen zuerst den Index und folgen dann den Links zu jeder Sprach-Sitemap.

Schritte

1. Erstellen Sie eine Sitemap-Index-Route

Erstellen Sie eine Ressourcen-Route, die eine XML-Antwort zurückgibt, die alle sprachspezifischen Sitemaps auflistet.

import type { Route } from "./+types/sitemap";

const LOCALES = ["en", "es", "fr", "de"];

export function loader({ request }: Route.LoaderArgs) {
const { origin } = new URL(request.url);

const sitemapIndex = `<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${LOCALES.map(locale => `  <sitemap>
  <loc>${origin}/sitemap-${locale}.xml</loc>
</sitemap>`).join("
")}
</sitemapindex>`;

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

Diese Route funktioniert als API-Endpunkt, indem sie eine XML-Antwort zurückgibt. Der Index listet eine Sitemap pro Sprache auf, wodurch es einfach ist, Sprachen hinzuzufügen oder zu entfernen, indem das LOCALES-Array aktualisiert wird.

2. Erstellen Sie sprachspezifische Sitemap-Routen

Definieren Sie eine Ressourcen-Route mit einem dynamischen Segment, um individuelle Sitemaps für jede Sprache zu generieren.

import type { Route } from "./+types/sitemap.$locale";

export async function loader({ params }: Route.LoaderArgs) {
const locale = params.locale;
const urls = await getUrlsForLocale(locale);

const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${urls.map(url => `  <url>
  <loc>${url}</loc>
</url>`).join("
")}
</urlset>`;

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

async function getUrlsForLocale(locale: string): Promise<string[]> {
return [];
}

Das dynamische Segment im Routenpfad wird geparst und als params.locale bereitgestellt. Jede Sprach-Sitemap enthält nur URLs für diese spezifische Locale.

3. Seiten für jede Sprache abrufen

Implementieren Sie die Hilfsfunktion, um alle Seiten für eine bestimmte Locale aus Ihrer Datenquelle abzurufen.

async function getUrlsForLocale(locale: string): Promise<string[]> {
  const pages = await db.pages.findMany({
    where: { locale, published: true },
    select: { slug: true },
  });

  return pages.map((page) => `https://example.com/${locale}/${page.slug}`);
}

Diese Funktion fragt Ihre Datenbank oder Content-Quelle nach veröffentlichten Seiten in der angeforderten Sprache ab und konstruiert vollständige URLs. Passen Sie die Abfrage und URL-Struktur an Ihre Anwendung an.

4. Sitemap-Routen registrieren

Fügen Sie die Sitemap-Routen zu Ihrer Routen-Konfigurationsdatei hinzu.

import { type RouteConfig, route } from "@react-router/dev/routes";

export default [
  route("sitemap.xml", "./routes/sitemap.tsx"),
  route("sitemap-:locale.xml", "./routes/sitemap.$locale.tsx"),
] satisfies RouteConfig;

Jede Route hat ein URL-Muster zum Abgleichen und einen Dateipfad zum Routen-Modul. Die Index-Route antwortet unter /sitemap.xml und die Sprach-Routen antworten unter /sitemap-en.xml, /sitemap-es.xml und so weiter.

5. Sitemap-Index zur robots.txt hinzufügen

Verweisen Sie Suchmaschinen auf Ihren Sitemap-Index in der robots.txt-Datei im Root-Verzeichnis Ihres Public-Ordners.

User-agent: *
Allow: /

Sitemap: https://example.com/sitemap.xml

Ein Sitemap-Index, der jede Ihrer Sitemaps auflistet, ermöglicht es Suchmaschinen, alle sprachspezifischen Sitemaps von einem einzigen Einstiegspunkt aus zu entdecken. Suchmaschinen crawlen den Index und folgen automatisch den Links zu jeder Sprach-Sitemap.