Как создать мультиязычные карты сайта в React Router v7

Проблема

Карты сайта помогают поисковым системам находить и сканировать все страницы на сайте. Многоязычный сайт с сотнями или тысячами страниц на каждом языке может быстро создавать огромные карты сайта. Один файл, содержащий все URL-адреса для каждого языка, становится громоздким, может превышать лимиты в 50 000 URL-адресов или 50 МБ, и усложняет обслуживание. Когда вы обновляете структуру одного языка, вам нужно заново генерировать и проверять весь файл. Такой подход не масштабируется по мере роста вашего сайта.

Решение

Разделите карты сайта на иерархию с индексом карты сайта верхнего уровня, который указывает на отдельные карты сайта для каждого языка. Каждый язык получает свой собственный файл карты сайта, содержащий только URL-адреса для этого языка. Индексный файл действует как каталог, перечисляя расположение каждой карты сайта для языка. Это делает отдельные файлы управляемыми, позволяет обновлять каждый язык независимо и хорошо масштабируется, когда вы добавляете новые языки или страницы. Поисковые системы сначала сканируют индекс, а затем переходят по ссылкам на каждую карту сайта для языка.

Шаги

1. Создайте маршрут индекса карты сайта

Создайте маршрут ресурса, который возвращает XML-ответ с перечислением всех карт сайта для каждого языка.

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

Этот маршрут работает как конечная точка API, возвращая XML-ответ. Индекс перечисляет одну карту сайта на каждый язык, что упрощает добавление или удаление языков путем обновления массива LOCALES.

2. Создайте маршруты карты сайта для каждого языка

Определите маршрут ресурса с динамическим сегментом для генерации индивидуальных карт сайта для каждого языка.

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

Динамический сегмент в пути маршрута анализируется и передается как params.locale. Каждая языковая карта сайта содержит только URL-адреса для соответствующего языка.

3. Получите страницы для каждого языка

Реализуйте вспомогательную функцию для получения всех страниц для заданного языка из вашего источника данных.

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

Эта функция выполняет запрос к вашей базе данных или источнику контента для опубликованных страниц на запрашиваемом языке и создает полные URL-адреса. Настройте запрос и структуру URL в соответствии с вашим приложением.

4. Зарегистрируйте маршруты карты сайта

Добавьте маршруты карты сайта в файл конфигурации маршрутов.

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;

Каждый маршрут имеет шаблон URL для сопоставления и путь к модулю маршрута. Индексный маршрут отвечает на /sitemap.xml, а языковые маршруты отвечают на /sitemap-en.xml, /sitemap-es.xml и так далее.

5. Добавьте индекс карты сайта в robots.txt

Укажите поисковым системам на индекс карты сайта в файле robots.txt, который находится в корневом каталоге вашей публичной директории.

User-agent: *
Allow: /

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

Индекс карты сайта, содержащий список всех ваших карт сайта, позволяет поисковым системам обнаруживать карты сайта для каждого языка из одной точки входа. Поисковые системы будут сканировать индекс и автоматически переходить по ссылкам на карты сайта для каждого языка.