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 d'énormes sitemaps. Un fichier unique répertoriant chaque URL pour chaque langue devient difficile à gérer, peut dépasser les limites de 50 000 URL ou de 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 s'adapte pas à la croissance de votre site.

Solution

Divisez les sitemaps en une hiérarchie avec un index de sitemap de premier niveau qui pointe vers des sitemaps séparés et 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, répertoriant l'emplacement de chaque sitemap de langue. Cela permet de garder les fichiers individuels gérables, vous permet de mettre à jour chaque langue indépendamment, et s'adapte bien 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 aux langues.

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 point de terminaison API en renvoyant une réponse XML. L'index répertorie 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 la route est analysé et fourni comme params.locale. Chaque sitemap de langue contient uniquement les URLs 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 des URLs 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 a un modèle d'URL à correspondre et un chemin de fichier vers le module de route. La route d'index répond à /sitemap.xml et les routes de langue répondent à /sitemap-en.xml, /sitemap-es.xml, etc.

5. Ajouter l'index du sitemap au fichier robots.txt

Dirigez les moteurs de recherche vers 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 à partir d'un point d'entrée unique. Les moteurs de recherche parcourront l'index et suivront automatiquement les liens vers chaque sitemap de langue.