Создание индексной карты сайта для нескольких языков

Проблема

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

Решение

Создайте файл sitemap.xml, который будет выступать в качестве "индекса карты сайта", указывая на другие карты сайта, специфичные для языков (например, sitemap-en.xml, sitemap-es.xml). Такой подход упорядочивает контент, упрощает управление и эффективно масштабируется при добавлении новых языков или страниц.

Шаги

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

Вместо файла sitemap.ts необходимо создать стандартный обработчик маршрутов. Это даст вам полный контроль над генерацией индекса карты сайта.

Создайте файл app/sitemap.xml/route.ts.

// app/sitemap.xml/route.ts
import { locales, siteBaseUrl } from '@/i18n-config';

export async function GET() {
  const sitemapIndex = `<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  ${locales
    .map((locale) => {
      return `
    <sitemap>
      <loc>${siteBaseUrl}/sitemap-${locale}.xml</loc>
      <lastmod>${new Date().toISOString()}</lastmod>
    </sitemap>`;
    })
    .join('')}
</sitemapindex>
`;

  return new Response(sitemapIndex, {
    headers: {
      'Content-Type': 'application/xml',
    },
  });
}

Этот файл сообщает поисковым системам, что карта сайта вашего сайта является индексом, который указывает на другие файлы, такие как sitemap-en.xml, sitemap-es.xml и т. д.

2. Создайте динамический маршрут для карт сайта на разных языках

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

Создайте файл app/sitemap-[lang].xml/route.ts.

// app/sitemap-[lang].xml/route.ts
import { locales, siteBaseUrl } from '@/i18n-config';

// Это указывает Next.js, какие карты сайта создавать во время сборки
export async function generateStaticParams() {
  return locales.map((lang) => ({
    lang,
  }));
}

// Вспомогательная функция для получения всех страниц для языка
// В реальном приложении это будет извлекаться из CMS или базы данных
async function getPagesForLanguage(lang: string): Promise<string[]> {
  // Это относительные пути, *без* префикса языка
  // например, '/', '/about', '/blog/my-post'
  return ['/', '/about', '/contact'];
}

export async function GET(
  request: Request,
  { params }: { params: { lang: string } }
) {
  const { lang } = params;

  if (!locales.includes(lang)) {
    return new Response('Not Found', { status: 404 });
  }

  const pages = await getPagesForLanguage(lang);

  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  ${pages
    .map((page) => {
      const path = page === '/' ? '' : page;
      return `
    <url>
      <loc>${siteBaseUrl}/${lang}${path}</loc>
      <lastmod>${new Date().toISOString()}</lastmod>
    </url>`;
    })
    .join('')}
</urlset>
`;

  return new Response(sitemap, {
    headers: {
      'Content-Type': 'application/xml',
    },
  });
}

Теперь ваш файл sitemap.xml является чистым индексом, а URL-адреса для каждого языка аккуратно организованы в отдельных файлах (например, /sitemap-en.xml), которые генерируются этим динамическим маршрутом.