# General Translation React SDKs (gt-react, gt-next, gt-react-native): Gestión del SEO de los alias de configuración regional URL: https://generaltranslation.com/es/docs/react/nextjs/locale-alias-seo.mdx Docs index: https://generaltranslation.com/llms.txt Description: Cómo usar alias personalizados de configuración regional en las URL de Next.js y publicar metadatos canónicos de idioma para los motores de búsqueda. Un alias de configuración regional permite que una ruta use un segmento personalizado, como `/cn`, mientras que las traducciones usan el código BCP 47 canónico `zh`. `gt-next` resuelve el mapeo para las traducciones y el enrutamiento, pero tu aplicación sigue siendo responsable de ``, las URL canónicas, las versiones alternativas por idioma y las entradas del mapa del sitio. ## Configurar un alias [#configure] Asigna la configuración regional de la URL a su código canónico mediante [`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" } } } ``` El middleware acepta `/cn` como ruta localizada. General Translation resuelve `cn` a `zh` cuando necesita la configuración regional canónica. Mantén estos dos valores separados en el código SEO: * Usa el **alias** en las URL de las rutas, como `/cn/about`. * Usa el **código BCP 47 canónico** en `lang` y `hreflang`, como `zh`. ## Establece el idioma del documento [#document-language] Resuelve la configuración regional de la ruta antes de establecer el atributo ``: ```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} ); } ``` Sin esta conversión, la ruta `/cn` generaría `lang="cn"`, que no es una etiqueta de idioma chino válida. ## Publicar versiones alternativas de la página [#page-alternates] Next.js genera enlaces `hreflang` a partir de `metadata.alternates.languages`. Usa códigos canónicos como claves del objeto y rutas basadas en alias como valores: Este ejemplo de página de inicio debe incluirse en la página localizada. Genera URL específicas de cada ruta en los metadatos de cada página anidada. ```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`, }, }, }; } ``` Esto genera una versión alternativa cuyo idioma es `zh` y cuya URL sigue siendo `/cn`. Añade solo una URL para cada clave de idioma canónica; de lo contrario, una entrada posterior sobrescribirá la anterior. Si tanto `/cn` como `/zh` pueden renderizar la misma página, elige una URL preferida y haz que el valor `canonical` de ambas páginas apunte a ella. Así evitarás publicar URL indexables duplicadas para el mismo contenido localizado. ## Añade versiones alternativas al sitemap [#sitemap] Aplica el mismo mapeo en `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}`, }, }, })); } ``` Mantén la misma asignación de idiomas a URL en los metadatos de la página y en el mapa del sitio. Incluye una alternativa solo si existe esa página localizada. ## 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.