# General Translation React SDKs (gt-react, gt-next, gt-react-native): Gestion du SEO des alias de paramètres régionaux URL: https://generaltranslation.com/fr/docs/react/nextjs/locale-alias-seo.mdx Docs index: https://generaltranslation.com/llms.txt Description: Comment utiliser des alias de paramètres régionaux personnalisés dans les URL Next.js tout en publiant des métadonnées linguistiques canoniques pour les moteurs de recherche. Un alias de paramètre régional permet à une route d’utiliser un segment personnalisé tel que `/cn`, tandis que les traductions utilisent le code BCP 47 canonique `zh`. `gt-next` résout le mapping pour les traductions et le routage, mais votre application reste responsable de ``, des URL canoniques, des versions linguistiques alternatives et des entrées du sitemap. ## Configurer un alias [#configure] Associez le paramètre régional de l’URL à son code canonique à l’aide de [`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" } } } ``` Le middleware accepte `/cn` comme route localisée. General Translation résout `cn` à `zh` lorsqu’il a besoin du paramètre régional canonique. Conservez ces deux valeurs distinctes dans le code SEO : * Utilisez l’**alias** dans les URL de route, par exemple `/cn/about`. * Utilisez le **code BCP 47 canonique** dans `lang` et `hreflang`, par exemple `zh`. ## Définir la langue du document [#document-language] Résolvez le paramètre régional de la route avant de définir l’attribut `` : ```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} ); } ``` Sans cette conversion, la route `/cn` générerait `lang="cn"`, qui n’est pas une balise de langue chinoise valide. ## Publier les versions alternatives d’une page [#page-alternates] Next.js génère des liens `hreflang` à partir de `metadata.alternates.languages`. Utilisez les codes canoniques comme clés d’objet et les routes basées sur des alias comme valeurs : Cet exemple de page d’accueil doit figurer sur la page localisée. Générez des URL propres à chaque route dans les métadonnées de chaque page imbriquée. ```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`, }, }, }; } ``` Cela génère une variante dont la langue est `zh` et dont l’URL reste `/cn`. Ajoutez une seule URL pour chaque clé de langue canonique ; sinon, une entrée ultérieure écrasera la précédente. Si `/cn` et `/zh` peuvent tous deux afficher la même page, choisissez une URL préférée et faites pointer la valeur `canonical` des deux pages vers celle-ci. Vous éviterez ainsi de publier des URL indexables dupliquées pour un même contenu localisé. ## Ajouter des balises `alternate` au sitemap [#sitemap] Appliquez le même mapping dans `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}`, }, }, })); } ``` Utilisez le même mapping langue-URL dans les métadonnées de la page et le sitemap. N’incluez une alternative que si cette page localisée existe. ## 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.