# General Translation Knowledge Base: Comment configurer le SEO d’une application Next.js multilingue ? URL: https://generaltranslation.com/fr/kb/multilingual-nextjs-seo.mdx Docs index: https://generaltranslation.com/llms.txt Description: Attribuez à chaque langue sa propre URL, définissez l’attribut lang de la balise html, faites pointer l’URL canonique de chaque page vers elle-même, ajoutez des variantes localisées hreflang pour chaque langue, traduisez les titres et les descriptions, et listez toutes les versions linguistiques dans votre sitemap. Category: Référencement multilingue Last updated: 2026-02-17 Authors: General Translation Team Published: 2026-02-17 ## Video The video is narrated in English, with English captions. [How do I set up SEO for a multilingual Next.js app?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-multilingual-nextjs-seo.mp4) (50 s) General Translation lets you give every language its own URL and tell search engines about them. Move your pages into `app/[locale]` with `gt-next`'s middleware, set the html `lang` attribute with `useLocale`, add canonical and hreflang links with a helper, translate the title with `getGT`, and list every page in every language in a sitemap. ## Pourquoi le SEO multilingue mérite une attention particulière La plupart des développeurs qui ajoutent l'i18n à leur application Next.js se contentent de traduire l'IU et considèrent que le travail est terminé. Mais si les moteurs de recherche ne parviennent pas à trouver, à indexer et à associer correctement vos différentes versions linguistiques, tout ce travail de traduction reste invisible. Un site multilingue dont le SEO n'est pas correctement configuré s'expose à plusieurs problèmes : * Google risque de n'indexer qu'une seule version linguistique et d'ignorer les autres * Les utilisateurs qui effectuent une recherche en espagnol tombent sur la page en anglais * Des pénalités pour contenu dupliqué, car Google considère `/en/about` et `/fr/about` comme une seule et même page * La mauvaise langue s'affiche dans les extraits des résultats de recherche **La bonne nouvelle :** bien gérer le SEO multilingue dans Next.js n'a rien de compliqué. Il y a six points à maîtriser, et ce guide les aborde tous à l'aide de [`gt-next`](/docs/react/nextjs-quickstart). *** ## 1. Routage d'URL locale-based Le SEO multilingue repose avant tout sur des URL distinctes pour chaque langue. Les moteurs de recherche ont besoin d'URL séparées et explorables pour indexer chaque version linguistique indépendamment. Autrement dit, il faut **le paramètre régional dans l'URL** — et non des cookies, des paramètres de requête ou la seule détection via `Accept-Language`. ```text ✅ generaltranslation.com/en/about ✅ generaltranslation.com/fr/about ✅ generaltranslation.com/es/about ❌ generaltranslation.com/about?lang=fr ❌ generaltranslation.com/about (avec le paramètre régional dans un cookie) ``` ### Configurer le routage selon les paramètres régionaux avec gt-next Commencez par placer vos pages dans un segment dynamique `[locale]` : ```text app/ └── [locale]/ ├── layout.tsx ├── page.tsx └── about/ └── page.tsx ``` Créez ensuite un middleware à la racine du projet (`proxy.ts` pour Next.js 16+, ou `middleware.ts` pour Next.js 15 et versions antérieures) : ```ts title="proxy.ts" import { createNextMiddleware } from 'gt-next/middleware'; export default createNextMiddleware(); export const config = { matcher: ['/((?!api|static|.*\\..*|_next).*)'], }; ``` Vous obtenez ainsi automatiquement des URL préfixées par le paramètre régional. Par défaut, les paramètres régionaux par défaut (par exemple, l'anglais) n'ont pas de préfixe — `/about` reste propre, tandis que les utilisateurs hispanophones voient `/es/about` et les utilisateurs francophones `/fr/about`. *** ## 2. Définir l'attribut HTML `lang` L'attribut `lang` de votre balise `` indique aux navigateurs et aux moteurs de recherche la langue dans laquelle la page est rédigée. C'est l'une des mesures les plus simples et les plus efficaces pour améliorer l'accessibilité et le référencement (SEO). Sans cet attribut, les lecteurs d'écran doivent deviner la langue (souvent à tort), et les moteurs de recherche identifient la langue de la page avec moins de certitude. {/* useLocale fonctionne dans les composants affichés côté client comme côté serveur, mais pas dans les composants asynchrones */} gt-next fournit le hook [`useLocale`](/docs/react/reference/hooks/use-locale), qui rend cette opération très simple dans votre mise en page racine : ```tsx title="app/[locale]/layout.tsx" import { useLocale, GTProvider } from 'gt-next'; export default function RootLayout({ children }: { children: React.ReactNode }) { const locale = useLocale(); return ( {children} ); } ``` [`useLocale`](/docs/react/reference/hooks/use-locale) renvoie le code de langue BCP 47 (par ex. `en-US`, `ar`, `zh-Hans`). *** ## 3. URL canoniques Les balises canoniques indiquent aux moteurs de recherche quelle URL correspond à la version « principale » d'une page. Sur un site multilingue, chaque version linguistique doit se désigner elle-même comme URL canonique : ```html ``` Cela empêche les moteurs de recherche de considérer votre page en français comme un doublon de votre page en anglais. Dans Next.js, les URL canoniques se définissent via l'[API de métadonnées](https://nextjs.org/docs/app/api-reference/functions/generate-metadata). Associez-la à la fonction [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) de gt-next pour générer l'URL canonique appropriée pour chaque paramètre régional : ```tsx title="app/[locale]/about/page.tsx" import { getLocale } from 'gt-next/server'; const BASE_URL = 'https://example.com'; export async function generateMetadata() { const locale = await getLocale(); return { alternates: { canonical: `${BASE_URL}/${locale}/about`, }, }; } export default function AboutPage() { return

About Us

; } ``` Pour les paramètres régionaux par défaut sans préfixe, adaptez en conséquence : ```tsx import { getDefaultLocale } from 'gt-next'; import { getLocale } from 'gt-next/server'; export async function generateMetadata() { const locale = await getLocale(); const defaultLocale = getDefaultLocale(); const path = '/about'; const prefix = locale === defaultLocale ? '' : `/${locale}`; return { alternates: { canonical: `${BASE_URL}${prefix}${path}`, }, }; } ``` *** ## 4. Balises hreflang Les balises hreflang sont le signal SEO multilingue le plus important. Elles indiquent aux moteurs de recherche : « cette page existe aussi dans ces autres langues, et voici les URL correspondantes ». Sans hreflang, Google doit deviner quelle version linguistique afficher dans les résultats de recherche — et il se trompe souvent. ```html ``` La balise `x-default` indique aux moteurs de recherche quelle URL afficher lorsqu'aucune des langues spécifiées ne correspond à celle de l'utilisateur. Dans Next.js, vous pouvez ajouter des balises hreflang via la propriété `alternates.languages` de l'API de métadonnées. Voici un utilitaire réutilisable compatible avec gt-next : ```tsx title="lib/i18n-metadata.ts" import { getDefaultLocale } from 'gt-next'; import { getLocale } from 'gt-next/server'; const BASE_URL = 'https://example.com'; const SUPPORTED_LOCALES = ['en', 'fr', 'es']; export async function getI18NMetadata(path: string) { const locale = await getLocale(); const defaultLocale = getDefaultLocale(); const getUrl = (loc: string) => { const prefix = loc === defaultLocale ? '' : `/${loc}`; return `${BASE_URL}${prefix}${path}`; }; const languages: Record = {}; for (const loc of SUPPORTED_LOCALES) { languages[loc] = getUrl(loc); } languages['x-default'] = getUrl(defaultLocale); return { alternates: { canonical: getUrl(locale), languages, }, }; } ``` Utilisez-le ensuite dans n'importe quelle page : ```tsx title="app/[locale]/about/page.tsx" import { getI18NMetadata } from '@/lib/i18n-metadata'; export async function generateMetadata() { return await getI18NMetadata('/about'); } ``` Cet appel génère en une seule fois la balise canonique et toutes les balises hreflang. *** ## 5. Métadonnées traduites Les moteurs de recherche affichent le titre et la description de votre page dans leurs résultats. S’ils sont en anglais sur une page en français, les utilisateurs auront moins tendance à cliquer — et Google risque de déclasser le résultat. Utilisez la fonction [`getGT`](/docs/react/nextjs/reference/functions/get-gt) de gt-next pour traduire les chaînes de vos métadonnées : ```tsx title="app/[locale]/about/page.tsx" import { getGT } from 'gt-next/server'; import { getI18NMetadata } from '@/lib/i18n-metadata'; export async function generateMetadata() { const t = await getGT(); const i18nMeta = await getI18NMetadata('/about'); return { title: t('About Us'), description: t('Learn about our mission and team.'), ...i18nMeta, }; } ``` Vous obtenez ainsi des titres et des descriptions localisés dans les résultats de recherche, ce qui améliore nettement les taux de clics sur les requêtes formulées dans une autre langue que l’anglais. *** ## 6. Sitemaps multilingues Un sitemap aide les moteurs de recherche à découvrir toutes vos pages, y compris chacune de leurs versions linguistiques. Pour les sites multilingues, il est également recommandé d'inclure des annotations hreflang dans votre sitemap. Next.js prend en charge les [sitemaps générés par programmation](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap) via un fichier `sitemap.ts` : ```ts title="app/sitemap.ts" import { MetadataRoute } from 'next'; const BASE_URL = 'https://example.com'; const LOCALES = ['en', 'fr', 'es']; const DEFAULT_LOCALE = 'en'; const PAGES = ['/', '/about', '/blog', '/contact']; export default function sitemap(): MetadataRoute.Sitemap { return PAGES.flatMap((path) => { const getUrl = (locale: string) => { const prefix = locale === DEFAULT_LOCALE ? '' : `/${locale}`; return `${BASE_URL}${prefix}${path === '/' ? '' : path}`; }; const languages: Record = {}; for (const locale of LOCALES) { languages[locale] = getUrl(locale); } return LOCALES.map((locale) => ({ url: getUrl(locale), lastModified: new Date(), alternates: { languages }, })); }); } ``` Cela génère un sitemap comportant une entrée par page et par paramètre régional, chaque entrée incluant des annotations hreflang qui pointent vers toutes les versions linguistiques. *** ## Liste de vérification Voici un récapitulatif rapide de tout ce qui a été abordé : | Exigence SEO | Mise en œuvre | | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | | Paramètre régional dans l’URL | [`createNextMiddleware()`](/docs/react/nextjs/reference/functions/create-next-middleware) avec le segment dynamique `[locale]` | | Attribut HTML `lang` | [`useLocale()`](/docs/react/reference/hooks/use-locale) dans la mise en page racine | | URL canoniques | [`getLocale()`](/docs/react/nextjs/reference/functions/get-locale) + `alternates.canonical` de l’API de métadonnées de Next.js | | Balises hreflang | `alternates.languages` de l’API de métadonnées de Next.js avec tous les paramètres régionaux pris en charge | | Métadonnées traduites | [`getGT()`](/docs/react/nextjs/reference/functions/get-gt) pour les titres et descriptions des pages | | Sitemap multilingue | `sitemap.ts` avec des entrées par paramètre régional et des variantes localisées hreflang | *** Suivez le [Démarrage rapide `gt-next`](/docs/react/nextjs-quickstart) pour mettre en place la stack d’internationalisation complète. Configurez ensuite le routage à l’aide du [guide du middleware](/docs/react/nextjs/app-router-middleware), générez des pages multilingues grâce à la [génération de sites statiques](/docs/react/nextjs/app-router-static-site-generation), puis ajoutez la [prise en charge des langues right-to-left](/docs/react/guides/managing-locales). ## Related questions - [Peut-on faire de l’i18n sans fichiers de traduction ?](https://generaltranslation.com/fr/kb/i18n-without-translation-files.mdx): Oui. Avec gt-react ou gt-next, le contenu reste intégré dans vos composants, à l’intérieur d’un composant ``, et les traductions sont générées lors du build. Il n’y a donc ni clés ni fichiers JSON par paramètre régional à écrire et à garder synchronisés. - [Quel est le meilleur logiciel de localisation pour les développeurs ?](https://generaltranslation.com/fr/kb/best-localization-software.mdx): Privilégiez un système unique qui couvre l’ensemble du pipeline, de la bibliothèque i18n dans votre code jusqu’à la traduction et la livraison, plutôt que d’assembler tant bien que mal une bibliothèque, un système de gestion de la traduction et un prestataire de traduction distincts. - [Quelle est la meilleure bibliothèque d’i18n pour une application React ?](https://generaltranslation.com/fr/kb/best-react-i18n-library.mdx): Les quatre principales bibliothèques d’i18n pour React sont gt-react de General Translation, react-i18next, Lingui et React Intl. Toutes les quatre affichent et formatent les traductions, mais seule gt-react les génère aussi, à partir du texte intégré directement dans votre JSX. Choisissez react-i18next pour conserver vos catalogues et plugins i18next, Lingui pour l’extraction vers des catalogues compilés, et React Intl pour FormatJS et ICU MessageFormat. ## Previous and next questions - Previous question: [Comment traduire du texte conditionnel en JSX ?](https://generaltranslation.com/fr/kb/translate-conditional-jsx.mdx) - Next question: [Quel est le meilleur logiciel de localisation pour les développeurs ?](https://generaltranslation.com/fr/kb/best-localization-software.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/fr/kb/sitemap.md) for every article.