# General Translation React SDKs (gt-react, gt-next, gt-react-native): Gestione SEO degli alias delle impostazioni regionali URL: https://generaltranslation.com/it/docs/react/nextjs/locale-alias-seo.mdx Docs index: https://generaltranslation.com/llms.txt Description: Come usare alias personalizzati delle impostazioni regionali negli URL di Next.js pubblicando al contempo metadati linguistici canonici per i motori di ricerca. Un alias dell'impostazione regionale consente a una route di usare un segmento personalizzato come `/cn`, mentre le traduzioni usano il codice BCP 47 canonico `zh`. `gt-next` risolve la mappatura per le traduzioni e il routing, ma la tua app resta responsabile di ``, degli URL canonici, delle alternative linguistiche e delle voci della sitemap. ## Configurare un alias [#configure] Mappa l'impostazione regionale nell'URL al relativo codice canonico con [`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" } } } ``` Il middleware accetta `/cn` come route localizzata. General Translation risolve `cn` in `zh` quando deve determinare l'impostazione regionale canonica. Tieni separati questi due valori nel codice SEO: * Usa l'**alias** negli URL delle route, ad esempio `/cn/about`. * Usa il **codice BCP 47 canonico** negli attributi `lang` e `hreflang`, ad esempio `zh`. ## Imposta la lingua del documento [#document-language] Risolvi l'impostazione regionale della route prima di impostare l'attributo ``: ```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} ); } ``` Senza questa conversione, la route `/cn` renderizzerebbe `lang="cn"`, che non è un tag di lingua cinese valido. ## Pubblicare le versioni alternative della pagina [#page-alternates] Next.js genera link `hreflang` a partire da `metadata.alternates.languages`. Usa codici canonici come chiavi dell'oggetto e route basate su alias come valori: Questo esempio per la homepage va inserito nella pagina localizzata. Genera URL specifici per ogni route nei metadati di ciascuna pagina annidata. ```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`, }, }, }; } ``` In questo modo si crea un'alternativa con lingua `zh` e URL `/cn`. Aggiungi un solo URL per ogni chiave di lingua canonica; altrimenti una voce successiva sovrascriverà quella precedente. Se sia `/cn` sia `/zh` possono renderizzare la stessa pagina, scegli un URL preferito e imposta su di esso il valore `canonical` di entrambe le pagine. In questo modo eviti di pubblicare URL duplicati e indicizzabili per lo stesso contenuto localizzato. ## Aggiungere le alternative della sitemap [#sitemap] Applica la stessa mappatura in `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}`, }, }, })); } ``` Mantieni coerente la mappatura lingua-URL nei metadati della pagina e nella sitemap. Includi una versione alternativa solo se la pagina localizzata corrispondente esiste. ## 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.