Comment créer des sitemaps multilingues dans React Router v7

Problème

Les sitemaps aident les moteurs de recherche à découvrir et explorer toutes les pages d'un site. Un site multilingue avec des centaines ou des milliers de pages par langue peut rapidement générer des sitemaps énormes. Un seul fichier listant toutes les URL pour toutes les langues devient ingérable, peut dépasser les limites de 50 000 URL ou 50 Mo, et rend la maintenance difficile. Lorsque vous mettez à jour la structure d'une langue, vous devez régénérer et revalider l'intégralité du fichier. Cette approche ne passe pas à l'échelle lorsque votre site se développe.

Solution

Divisez les sitemaps en une hiérarchie avec un index de sitemap de niveau supérieur qui pointe vers des sitemaps séparés, spécifiques à chaque langue. Chaque langue obtient son propre fichier sitemap contenant uniquement les URL pour cette langue. Le fichier d'index agit comme un répertoire, listant l'emplacement de chaque sitemap de langue. Cela maintient les fichiers individuels gérables, vous permet de mettre à jour chaque langue indépendamment et passe bien à l'échelle lorsque vous ajoutez de nouvelles langues ou pages. Les moteurs de recherche explorent d'abord l'index, puis suivent les liens vers chaque sitemap de langue.

Étapes

1. Créer une route d'index de sitemap

Créez une route de ressource qui renvoie une réponse XML listant tous les sitemaps spécifiques à chaque langue.

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",
  },
});
}

Cette route fonctionne comme un endpoint d'API en renvoyant une réponse XML. L'index liste un sitemap par langue, ce qui facilite l'ajout ou la suppression de langues en mettant à jour le tableau LOCALES.

2. Créer des routes de sitemap spécifiques à chaque langue

Définissez une route de ressource avec un segment dynamique pour générer des sitemaps individuels pour chaque langue.

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 [];
}

Le segment dynamique dans le chemin de route est analysé et fourni en tant que params.locale. Chaque sitemap de langue contient uniquement les URL pour cette locale spécifique.

3. Récupérer les pages pour chaque langue

Implémentez la fonction auxiliaire pour récupérer toutes les pages pour une locale donnée depuis votre source de données.

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}`);
}

Cette fonction interroge votre base de données ou source de contenu pour les pages publiées dans la langue demandée et construit les URL complètes. Ajustez la requête et la structure d'URL pour correspondre à votre application.

4. Enregistrer les routes de sitemap

Ajoutez les routes de sitemap à votre fichier de configuration des routes.

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;

Chaque route possède un modèle d'URL à faire correspondre et un chemin de fichier vers le module de route. La route index répond à /sitemap.xml et les routes de langue répondent à /sitemap-en.xml, /sitemap-es.xml, et ainsi de suite.

5. Ajouter l'index de sitemap au robots.txt

Indiquez aux moteurs de recherche votre index de sitemap dans le fichier robots.txt à la racine de votre répertoire public.

User-agent: *
Allow: /

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

Un index de sitemap répertoriant chacun de vos sitemaps permet aux moteurs de recherche de découvrir tous les sitemaps spécifiques à chaque langue depuis un point d'entrée unique. Les moteurs de recherche exploreront l'index et suivront automatiquement les liens vers chaque sitemap de langue.