# General Translation React SDKs (gt-react, gt-next, gt-react-native): Управление SEO алиасов локалей URL: https://generaltranslation.com/ru/docs/react/nextjs/locale-alias-seo.mdx --- title: Управление SEO алиасов локалей description: Как использовать пользовательские алиасы локалей в URL Next.js и публиковать канонические языковые метаданные для поисковых систем. related: links: - /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 --- Алиас локали позволяет использовать в маршруте пользовательский сегмент, например `/cn`, тогда как в переводах используется канонический код BCP 47 `zh`. `gt-next` выполняет сопоставление алиасов для переводов и маршрутизации, но ваше приложение по-прежнему отвечает за ``, канонические 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] Определите локаль маршрута перед установкой атрибута ``: ```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 ( {children} ); } ``` Без этого преобразования для маршрута `/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 { 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