# General Translation React SDKs (gt-react, gt-next, gt-react-native): Управление SEO алиасов локалей
URL: https://generaltranslation.com/ru/docs/react/nextjs/locale-alias-seo.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Как использовать пользовательские алиасы локалей в URL Next.js и публиковать канонические языковые метаданные для поисковых систем.

Алиас локали позволяет использовать в маршруте пользовательский сегмент, например `/cn`, тогда как в переводах используется канонический код BCP 47 `zh`. `gt-next` выполняет сопоставление алиасов для переводов и маршрутизации, но ваше приложение по-прежнему отвечает за `<html lang>`, канонические URL, языковые альтернативы и записи в sitemap.

## Настройте алиас [#configure]

Сопоставьте локаль в URL с её каноническим кодом с помощью [`customMapping`](/docs/react/reference/config#custom-mapping):

```json title="gt.config.json"
{
  "defaultLocale": "en-US",
  "locales": ["en-US", "cn", "ja"],
  "customMapping": {
    "cn": {
      "code": "zh",
      "name": "Mandarin"
    }
  }
}
```

Middleware распознаёт `/cn` как локализованный маршрут. Когда нужна каноническая локаль, General Translation сопоставляет `cn` с `zh`.

Не смешивайте эти два значения в SEO-коде:

* Используйте **алиас** в URL маршрутов, например `/cn/about`.
* Используйте **канонический код BCP 47** в `lang` и `hreflang`, например `zh`.

## Укажите язык документа [#document-language]

Определите локаль маршрута перед установкой атрибута `<html lang>`:

```tsx title="app/[locale]/layout.tsx"
import { resolveCanonicalLocale } from 'gt-next/server';

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const canonicalLocale = resolveCanonicalLocale(locale);

  return (
    <html lang={canonicalLocale}>
      <body>{children}</body>
    </html>
  );
}
```

Без этого преобразования для маршрута `/cn` будет задано `lang="cn"`, что не является допустимым тегом китайского языка.

## Публикация альтернативных версий страницы [#page-alternates]

Next.js создаёт ссылки `hreflang` на основе `metadata.alternates.languages`. В качестве ключей объекта используйте канонические коды, а в качестве значений — маршруты на основе алиасов:

Этот пример главной страницы следует размещать на локализованной странице. Формируйте URL-адреса для конкретных маршрутов в метаданных каждой вложенной страницы.

```tsx title="app/[locale]/page.tsx"
import type { Metadata } from 'next';
import { resolveCanonicalLocale } from 'gt-next/server';

const locales = ['en-US', 'cn', 'ja'];
const baseUrl = 'https://example.com';

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  const languages = Object.fromEntries(
    locales.map((urlLocale) => [
      resolveCanonicalLocale(urlLocale),
      `${baseUrl}/${urlLocale}`,
    ])
  );

  return {
    alternates: {
      canonical: `${baseUrl}/${locale}`,
      languages: {
        ...languages,
        'x-default': `${baseUrl}/en-US`,
      },
    },
  };
}
```

Это создаёт альтернативную версию с языком `zh`, URL-адрес которой остаётся `/cn`. Для каждого канонического языкового ключа добавляйте только один URL-адрес, иначе более поздняя запись перезапишет предыдущую.

Если и `/cn`, и `/zh` могут отображать одну и ту же страницу, выберите один предпочтительный URL-адрес и задайте его в качестве значения `canonical` для обеих страниц. Это позволит избежать публикации дублирующихся индексируемых URL-адресов для одного и того же локализованного контента.

## Добавьте альтернативные версии в sitemap [#sitemap]

Примените то же сопоставление в `app/sitemap.ts`:

```ts title="app/sitemap.ts"
import type { MetadataRoute } from 'next';
import { resolveCanonicalLocale } from 'gt-next/server';

const locales = ['en-US', 'cn', 'ja'];
const pages = ['', '/about', '/pricing'];
const baseUrl = 'https://example.com';

export default function sitemap(): MetadataRoute.Sitemap {
  return pages.map((page) => ({
    url: `${baseUrl}/en-US${page}`,
    alternates: {
      languages: {
        ...Object.fromEntries(
          locales.map((urlLocale) => [
            resolveCanonicalLocale(urlLocale),
            `${baseUrl}/${urlLocale}${page}`,
          ])
        ),
        'x-default': `${baseUrl}/en-US${page}`,
      },
    },
  }));
}
```

Используйте одинаковое сопоставление языков и URL в метаданных страницы и файле sitemap. Добавляйте альтернативную версию, только если соответствующая локализованная страница существует.

## Next steps

- /docs/react/nextjs/app-router-middleware
- /docs/react/nextjs/app-router-static-site-generation
- /docs/react/nextjs/registering-request-locales
- /docs/react/nextjs/cache-components

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.
