Cómo crear sitemaps multilingües en React Router v7

Problema

Los sitemaps ayudan a los motores de búsqueda a descubrir y rastrear todas las páginas de un sitio. Un sitio multilingüe con cientos o miles de páginas por idioma puede generar rápidamente sitemaps enormes. Un único archivo que enumere todas las URL de todos los idiomas se vuelve difícil de manejar, puede exceder los límites de 50 000 URL o 50 MB de tamaño, y dificulta el mantenimiento. Cuando actualizas la estructura de un idioma, debes regenerar y revalidar el archivo completo. Este enfoque no escala a medida que tu sitio crece.

Solución

Divide los sitemaps en una jerarquía con un índice de sitemap de nivel superior que apunte a sitemaps separados específicos de cada idioma. Cada idioma obtiene su propio archivo de sitemap que contiene solo las URL de ese idioma. El archivo índice actúa como un directorio, enumerando la ubicación de cada sitemap de idioma. Esto mantiene los archivos individuales manejables, te permite actualizar cada idioma de forma independiente y escala bien a medida que agregas nuevos idiomas o páginas. Los motores de búsqueda rastrean primero el índice y luego siguen los enlaces a cada sitemap de idioma.

Pasos

1. Crea una ruta de índice de sitemap

Crea una ruta de recurso que devuelva una respuesta XML enumerando todos los sitemaps específicos de cada idioma.

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

Esta ruta funciona como un endpoint de API al devolver una respuesta XML. El índice enumera un sitemap por idioma, lo que facilita agregar o eliminar idiomas actualizando el array LOCALES.

2. Crea rutas de sitemap específicas de cada idioma

Define una ruta de recurso con un segmento dinámico para generar sitemaps individuales para cada idioma.

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

El segmento dinámico en la ruta se analiza y se proporciona como params.locale. Cada sitemap de idioma contiene solo las URL de ese locale específico.

3. Obtener páginas para cada idioma

Implementa la función auxiliar para recuperar todas las páginas de una configuración regional determinada desde tu fuente de datos.

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

Esta función consulta tu base de datos o fuente de contenido para páginas publicadas en el idioma solicitado y construye las URL completas. Ajusta la consulta y la estructura de URL para que coincidan con tu aplicación.

4. Registrar las rutas del sitemap

Añade las rutas del sitemap a tu archivo de configuración de rutas.

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;

Cada ruta tiene un patrón de URL para coincidir y una ruta de archivo al módulo de ruta. La ruta de índice responde en /sitemap.xml y las rutas de idioma responden en /sitemap-en.xml, /sitemap-es.xml, y así sucesivamente.

5. Añadir el índice del sitemap a robots.txt

Dirige a los motores de búsqueda a tu índice de sitemap en el archivo robots.txt en la raíz de tu directorio público.

User-agent: *
Allow: /

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

Un índice de sitemap que enumera cada uno de tus sitemaps permite a los motores de búsqueda descubrir todos los sitemaps específicos de idioma desde un único punto de entrada. Los motores de búsqueda rastrearán el índice y seguirán automáticamente los enlaces a cada sitemap de idioma.