Wie man mehrsprachige Sitemaps in React Router v7 erstellt

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 Grenzen von 50.000 URLs oder 50 MB Größe überschreiten und erschwert die Wartung. Wenn Sie die Struktur einer Sprache aktualisieren, müssen Sie die gesamte Datei neu generieren und validieren. Dieser Ansatz skaliert nicht mit dem Wachstum Ihrer Website.

Lösung

Teilen Sie Sitemaps in eine Hierarchie auf, mit einem übergeordneten Sitemap-Index, der auf separate, sprachspezifische Sitemaps verweist. Jede Sprache erhält ihre eigene Sitemap-Datei, die nur URLs für diese Sprache enthält. Die Indexdatei fungiert als Verzeichnis und listet den Standort jeder Sprach-Sitemap auf. Dies hält einzelne Dateien überschaubar, ermöglicht die unabhängige Aktualisierung jeder Sprache 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 mit allen sprachspezifischen Sitemaps zurückgibt.

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, was es einfach macht, Sprachen hinzuzufügen oder zu entfernen, indem das LOCALES-Array aktualisiert wird.

2. Sprachspezifische Sitemap-Routen erstellen

Definieren Sie eine Ressourcenroute 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 Inhaltsquelle nach veröffentlichten Seiten in der angeforderten Sprache ab und erstellt 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 Routenkonfigurationsdatei 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 Routenmodul. Die Indexroute antwortet unter /sitemap.xml und die Sprachrouten antworten unter /sitemap-en.xml, /sitemap-es.xml usw.

5. Fügen Sie den Sitemap-Index zur robots.txt hinzu

Weisen Sie Suchmaschinen in der robots.txt-Datei im Stammverzeichnis Ihres öffentlichen Verzeichnisses auf Ihren Sitemap-Index hin.

User-agent: *
Allow: /

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

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