Как связать версии на разных языках в Next.js (Pages Router) v16

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

Проблема

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

Решение

Добавьте элементы ссылки с атрибутами hreflang в раздел head каждой страницы, перечислив все языковые версии, включая саму страницу. Каждая языковая версия должна включать идентичный набор ссылок, ссылающихся на все доступные языковые версии. Такое двустороннее связывание гарантирует, что поисковые системы распознают страницы как переводы, а не дубликаты, что позволяет им предоставлять пользователям правильную языковую версию на основе предпочтений браузера и контекста поиска.

Шаги

1. Создайте компонент для генерации ссылок на альтернативные языковые версии

Импортируйте компонент Head из next/head для изменения метаданных страницы. Получите информацию о локали с помощью хука useRouter, чтобы создать ссылки для всех доступных языковых версий.

import Head from "next/head";
import { useRouter } from "next/router";

interface AlternateLinksProps {
  path?: string;
}

export default function AlternateLinks({ path }: AlternateLinksProps) {
  const router = useRouter();
  const { locales, locale: currentLocale, asPath } = router;
  const canonicalPath = path || asPath;

  if (!locales) {
    return null;
  }

  return (
    <Head>
      {locales.map((locale) => (
        <link
          key={locale}
          rel="alternate"
          hrefLang={locale}
          href={`${process.env.NEXT_PUBLIC_SITE_URL}/${locale}${canonicalPath}`}
        />
      ))}
    </Head>
  );
}

Компонент перебирает доступные локали из маршрутизатора и динамически генерирует элементы ссылки для всех страниц.

2. Добавьте компонент на страницы с переводами

Включите компонент AlternateLinks в каждый компонент страницы, который существует на нескольких языках.

import AlternateLinks from "@/components/AlternateLinks";

export default function AboutPage() {
  return (
    <>
      <AlternateLinks />
      <main>
        <h1>О нас</h1>
      </main>
    </>
  );
}

Этот компонент гарантирует, что каждая страница включает полный набор альтернативных ссылок, удовлетворяя требованию, чтобы все варианты ссылались друг на друга.

3. Включите ссылку на саму себя для текущей локали

Каждая страница должна включать тег hreflang, указывающий на её собственный язык. Этот компонент уже обрабатывает это, проходя по всем локалям, включая текущую.

export default function AlternateLinks({ path }: AlternateLinksProps) {
  const router = useRouter();
  const { locales, asPath } = router;
  const canonicalPath = path || asPath;

  if (!locales) {
    return null;
  }

  return (
    <Head>
      {locales.map((locale) => (
        <link
          key={locale}
          rel="alternate"
          hrefLang={locale}
          href={`${process.env.NEXT_PUBLIC_SITE_URL}/${locale}${canonicalPath}`}
        />
      ))}
    </Head>
  );
}

Теперь каждая страница включает теги hreflang, указывающие на саму себя, а также теги для других версий.

4. Добавьте резервную ссылку x-default

Добавьте ссылку x-default, чтобы указать, какую версию должны видеть пользователи, если их язык недоступен.

export default function AlternateLinks({ path }: AlternateLinksProps) {
  const router = useRouter();
  const { locales, defaultLocale, asPath } = router;
  const canonicalPath = path || asPath;

  if (!locales || !defaultLocale) {
    return null;
  }

  return (
    <Head>
      {locales.map((locale) => (
        <link
          key={locale}
          rel="alternate"
          hrefLang={locale}
          href={`${process.env.NEXT_PUBLIC_SITE_URL}/${locale}${canonicalPath}`}
        />
      ))}
      <link
        rel="alternate"
        hrefLang="x-default"
        href={`${process.env.NEXT_PUBLIC_SITE_URL}/${defaultLocale}${canonicalPath}`}
      />
    </Head>
  );
}

Ссылка x-default направляет пользователей, чьи языковые предпочтения не совпадают, на локаль по умолчанию.