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 para cada idioma se vuelve difícil de manejar, puede exceder los límites de 50.000 URL o 50MB, y dificulta el mantenimiento. Cuando actualizas la estructura de un idioma, debes regenerar y revalidar todo el archivo. 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 y específicos para cada idioma. Cada idioma obtiene su propio archivo de sitemap que contiene solo las URL para ese idioma. El archivo de í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 añades 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. Crear una ruta de índice de sitemap

Crea una ruta de recurso que devuelva una respuesta XML que enumere 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 añadir o eliminar idiomas actualizando el array LOCALES.

2. Crear rutas de sitemap específicas para 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 URLs para ese locale específico.

3. Obtener páginas para cada idioma

Implementa la función auxiliar para recuperar todas las páginas de un locale determinado 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 las páginas publicadas en el idioma solicitado y construye URLs completas. Ajusta la consulta y la estructura de URL para que coincida 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 índice responde en /sitemap.xml y las rutas de idioma responden en /sitemap-en.xml, /sitemap-es.xml, etc.

5. Añade el índice del sitemap al archivo robots.txt

Indica a los motores de búsqueda dónde encontrar tu índice de sitemap en el archivo robots.txt ubicado en la raíz de tu directorio público.

User-agent: *
Allow: /

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

Un índice de sitemap que enumere cada uno de tus sitemaps permite a los motores de búsqueda descubrir todos los sitemaps específicos de cada 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.