SEO international et hreflang : cibler plusieurs pays et langues

Un site disponible en français et en anglais sans hreflang correctement configuré : Google choisit lui-même quelle version indexer pour quel pays, souvent au hasard. Résultat : la version française s'affiche à des utilisateurs anglophones, les deux versions se cannibalisent dans les résultats, et le trafic international est divisé par deux.

Hreflang résout ça. C'est l'attribut HTML qui dit à Google : "cette page en français est pour les utilisateurs français, cette page en anglais est pour les utilisateurs américains, cette autre en anglais pour les britanniques."

Comprendre hreflang

<!-- Exemple : page disponible en 3 langues/régions -->
<link rel="alternate" hreflang="fr" href="https://iducation.fr/articles/docker">
<link rel="alternate" hreflang="en-US" href="https://iducation.com/en-US/articles/docker">
<link rel="alternate" hreflang="en-GB" href="https://iducation.com/en-GB/articles/docker">
<link rel="alternate" hreflang="x-default" href="https://iducation.fr/articles/docker">

x-default : page affichée quand aucune variante ne correspond à la langue/région de l'utilisateur. Généralement la version principale ou une page de sélection de langue.

Codes de langue et de région

Format : langue ou langue-RÉGION (ISO 639-1 + ISO 3166-1).

fr          — français, toutes régions
fr-FR       — français, France
fr-BE       — français, Belgique
fr-CH       — français, Suisse
fr-CA       — français, Canada
en          — anglais, toutes régions
en-US       — anglais, États-Unis
en-GB       — anglais, Royaume-Uni
es-ES       — espagnol, Espagne
es-MX       — espagnol, Mexique
de          — allemand
zh-Hans     — chinois simplifié
zh-Hant     — chinois traditionnel
pt-BR       — portugais, Brésil

Règle : utiliser langue-RÉGION seulement si vous avez du contenu différent selon la région (prix, téléphone, dates). Si le contenu est identique pour tous les anglophones, en suffit.

Structures d'URL — trois options

Structure	Exemple	Avantages	Inconvénients
ccTLD	`iducation.fr` / `iducation.com` / `iducation.de`	Signal géographique fort, SEO local puissant	Coût de plusieurs domaines, maintenance x3
Sous-domaine	`fr.iducation.com` / `en.iducation.com`	Séparation claire, facile à configurer	Signal géographique faible, Google traite comme sites séparés
Sous-répertoire	`iducation.com/fr/` / `iducation.com/en/`	Autorité de domaine partagée, 1 seul domaine	Configuration serveur plus complexe

Recommandation pour la plupart des projets : sous-répertoires. L'autorité du domaine (backlinks, historique) est partagée entre toutes les versions — c'est le schéma le plus efficace si vous ne pouvez pas investir dans plusieurs ccTLD.

Implémentation hreflang complète

Dans le `<head>` HTML

Chaque page doit contenir les balises hreflang de toutes les versions, y compris elle-même.

app/articles/[slug]/page.tsx — hreflang dans generateMetadata

export async function generateMetadata({ params }) {
  const article = getArticleBySlug(params.slug)
  const locales = ['fr', 'en-US']
  
  return {
    alternates: {
      canonical: `https://iducation.fr/articles/${article.slug}`,
      languages: {
        'fr': `https://iducation.fr/articles/${article.slug}`,
        'en-US': `https://iducation.com/en/articles/${article.slug}`,
        'x-default': `https://iducation.fr/articles/${article.slug}`,
      },
    },
  }
}

Next.js génère automatiquement les balises <link rel="alternate" hreflang="..."> depuis alternates.languages.

Dans le sitemap XML

Méthode alternative (ou complémentaire) : déclarer hreflang dans le sitemap.

sitemap-international.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>https://iducation.fr/articles/docker-introduction</loc>
    <xhtml:link rel="alternate" hreflang="fr"
                href="https://iducation.fr/articles/docker-introduction"/>
    <xhtml:link rel="alternate" hreflang="en-US"
                href="https://iducation.com/en/articles/docker-introduction"/>
    <xhtml:link rel="alternate" hreflang="x-default"
                href="https://iducation.fr/articles/docker-introduction"/>
  </url>
  <url>
    <loc>https://iducation.com/en/articles/docker-introduction</loc>
    <xhtml:link rel="alternate" hreflang="fr"
                href="https://iducation.fr/articles/docker-introduction"/>
    <xhtml:link rel="alternate" hreflang="en-US"
                href="https://iducation.com/en/articles/docker-introduction"/>
    <xhtml:link rel="alternate" hreflang="x-default"
                href="https://iducation.fr/articles/docker-introduction"/>
  </url>
</urlset>

La bidirectionnalité est obligatoire : la page FR doit pointer vers la page EN, et la page EN doit pointer vers la page FR. Un hreflang unilatéral est ignoré par Google.

Implémentation Next.js i18n

next.config.ts — configuration i18n

const nextConfig = {
  i18n: {
    locales: ['fr', 'en'],
    defaultLocale: 'fr',
    localeDetection: true,
  },
}

Avec i18n dans la config, Next.js gère automatiquement :

/ → français (defaultLocale)
/en/articles/docker → anglais
Redirection automatique selon Accept-Language si localeDetection: true

Accéder à la locale dans les pages

import { useRouter } from 'next/router'
 
export default function ArticlePage() {
  const { locale, locales, defaultLocale } = useRouter()
  // locale = 'fr' ou 'en'
}
 
// Avec App Router et next-intl
import { getTranslations } from 'next-intl/server'
 
export default async function ArticlePage({ params: { locale } }) {
  const t = await getTranslations({ locale, namespace: 'Article' })
  return <h1>{t('readTime', { minutes: 10 })}</h1>
}

Librairies i18n recommandées pour Next.js App Router :

next-intl — la plus complète, App Router natif
next-i18next — surtout Pages Router
i18next + react-i18next — si vous avez déjà i18next

Contenu traduit vs contenu adapté

Il y a une distinction importante :

Traduction : même contenu, autre langue. Hreflang standard.

Adaptation régionale : même langue, contenu différent selon le pays (prix en euros vs dollars, numéros de téléphone locaux, lois applicables). Utiliser fr-FR / fr-BE / fr-CH plutôt que juste fr.

Pour le SEO local, si une entreprise a des établissements en France, Belgique et Suisse, créer des pages séparées avec hreflang="fr-FR", hreflang="fr-BE", hreflang="fr-CH" — et du contenu spécifique à chaque marché (horaires locaux, TVA, mentions légales).

Erreurs fréquentes

Hreflang non réciproque : la version FR pointe vers EN, mais EN ne pointe pas vers FR → Google ignore les deux.

Mauvais format de code : hreflang="FR" (majuscules) ou hreflang="fr_FR" (underscore) → invalide. Toujours minuscules, tiret : fr-FR.

x-default manquant : page d'accueil sans x-default → les utilisateurs hors zones ciblées ne voient aucune version par défaut.

Canonical conflictuel : page EN avec canonical pointant vers FR → Google suit le canonical, ignore hreflang.

Hreflang sur les pages non indexées : si la page FR a noindex, le hreflang qui la référence est ignoré.

Contenu identique sur plusieurs versions : deux pages quasi-identiques (traduction à 80%) sans hreflang = duplicate content. Avec hreflang correct, Google comprend que ce sont des variantes intentionnelles.

Vérifier l'implémentation

# Vérifier les balises hreflang dans le HTML servi
curl -s https://iducation.fr/articles/docker-introduction | grep hreflang
 
# Résultat attendu
# <link rel="alternate" hreflang="fr" href="https://iducation.fr/articles/docker-introduction">
# <link rel="alternate" hreflang="en-US" href="https://iducation.com/en/articles/docker-introduction">
# <link rel="alternate" hreflang="x-default" href="https://iducation.fr/articles/docker-introduction">

Outils de validation :

Hreflang Testing Tool (Aleyda Solis) — vérification en bulk
Screaming Frog — audit complet du site, rapport hreflang
Google Search Console → Rapport International (si le site est multilingue, Google signale les erreurs hreflang)

Géociblage dans Search Console

Si votre site est sur un domaine générique (.com, .io, .dev) mais cible un pays spécifique, déclarez-le :

Search Console → Paramètres → International → Pays cible

Cela oriente Google même sans hreflang, pour les sites mono-langue ciblant un seul pays.

Le SEO international est complexe mais prévisible. Les erreurs hreflang sont faciles à détecter (un curl suffit) et faciles à corriger. La vraie difficulté est de maintenir la bidirectionnalité à mesure que le site grossit — automatiser la génération des balises depuis votre CMS ou votre config i18n est indispensable dès que vous dépassez une dizaine de pages. Pour la configuration Next.js complète qui intègre hreflang dans alternates.languages, Next.js SEO complet donne le cadre d'ensemble dans lequel s'inscrit cette configuration.

Comprendre hreflang

<!-- Exemple : page disponible en 3 langues/régions -->
<link rel="alternate" hreflang="fr" href="https://iducation.fr/articles/docker">
<link rel="alternate" hreflang="en-US" href="https://iducation.com/en-US/articles/docker">
<link rel="alternate" hreflang="en-GB" href="https://iducation.com/en-GB/articles/docker">
<link rel="alternate" hreflang="x-default" href="https://iducation.fr/articles/docker">

x-default : page affichée quand aucune variante ne correspond à la langue/région de l'utilisateur. Généralement la version principale ou une page de sélection de langue.

Codes de langue et de région

Format : langue ou langue-RÉGION (ISO 639-1 + ISO 3166-1).

fr          — français, toutes régions
fr-FR       — français, France
fr-BE       — français, Belgique
fr-CH       — français, Suisse
fr-CA       — français, Canada
en          — anglais, toutes régions
en-US       — anglais, États-Unis
en-GB       — anglais, Royaume-Uni
es-ES       — espagnol, Espagne
es-MX       — espagnol, Mexique
de          — allemand
zh-Hans     — chinois simplifié
zh-Hant     — chinois traditionnel
pt-BR       — portugais, Brésil

Règle : utiliser langue-RÉGION seulement si vous avez du contenu différent selon la région (prix, téléphone, dates). Si le contenu est identique pour tous les anglophones, en suffit.

Structures d'URL — trois options

Structure	Exemple	Avantages	Inconvénients
ccTLD	`iducation.fr` / `iducation.com` / `iducation.de`	Signal géographique fort, SEO local puissant	Coût de plusieurs domaines, maintenance x3
Sous-domaine	`fr.iducation.com` / `en.iducation.com`	Séparation claire, facile à configurer	Signal géographique faible, Google traite comme sites séparés
Sous-répertoire	`iducation.com/fr/` / `iducation.com/en/`	Autorité de domaine partagée, 1 seul domaine	Configuration serveur plus complexe

Implémentation hreflang complète

Dans le `<head>` HTML

Chaque page doit contenir les balises hreflang de toutes les versions, y compris elle-même.

app/articles/[slug]/page.tsx — hreflang dans generateMetadata

export async function generateMetadata({ params }) {
  const article = getArticleBySlug(params.slug)
  const locales = ['fr', 'en-US']
  
  return {
    alternates: {
      canonical: `https://iducation.fr/articles/${article.slug}`,
      languages: {
        'fr': `https://iducation.fr/articles/${article.slug}`,
        'en-US': `https://iducation.com/en/articles/${article.slug}`,
        'x-default': `https://iducation.fr/articles/${article.slug}`,
      },
    },
  }
}

Next.js génère automatiquement les balises <link rel="alternate" hreflang="..."> depuis alternates.languages.

Dans le sitemap XML

Méthode alternative (ou complémentaire) : déclarer hreflang dans le sitemap.

sitemap-international.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>https://iducation.fr/articles/docker-introduction</loc>
    <xhtml:link rel="alternate" hreflang="fr"
                href="https://iducation.fr/articles/docker-introduction"/>
    <xhtml:link rel="alternate" hreflang="en-US"
                href="https://iducation.com/en/articles/docker-introduction"/>
    <xhtml:link rel="alternate" hreflang="x-default"
                href="https://iducation.fr/articles/docker-introduction"/>
  </url>
  <url>
    <loc>https://iducation.com/en/articles/docker-introduction</loc>
    <xhtml:link rel="alternate" hreflang="fr"
                href="https://iducation.fr/articles/docker-introduction"/>
    <xhtml:link rel="alternate" hreflang="en-US"
                href="https://iducation.com/en/articles/docker-introduction"/>
    <xhtml:link rel="alternate" hreflang="x-default"
                href="https://iducation.fr/articles/docker-introduction"/>
  </url>
</urlset>

La bidirectionnalité est obligatoire : la page FR doit pointer vers la page EN, et la page EN doit pointer vers la page FR. Un hreflang unilatéral est ignoré par Google.

Implémentation Next.js i18n

next.config.ts — configuration i18n

const nextConfig = {
  i18n: {
    locales: ['fr', 'en'],
    defaultLocale: 'fr',
    localeDetection: true,
  },
}

Avec i18n dans la config, Next.js gère automatiquement :

/ → français (defaultLocale)
/en/articles/docker → anglais
Redirection automatique selon Accept-Language si localeDetection: true

Accéder à la locale dans les pages

import { useRouter } from 'next/router'
 
export default function ArticlePage() {
  const { locale, locales, defaultLocale } = useRouter()
  // locale = 'fr' ou 'en'
}
 
// Avec App Router et next-intl
import { getTranslations } from 'next-intl/server'
 
export default async function ArticlePage({ params: { locale } }) {
  const t = await getTranslations({ locale, namespace: 'Article' })
  return <h1>{t('readTime', { minutes: 10 })}</h1>
}

Librairies i18n recommandées pour Next.js App Router :

next-intl — la plus complète, App Router natif
next-i18next — surtout Pages Router
i18next + react-i18next — si vous avez déjà i18next

Contenu traduit vs contenu adapté

Il y a une distinction importante :

Traduction : même contenu, autre langue. Hreflang standard.

Erreurs fréquentes

Hreflang non réciproque : la version FR pointe vers EN, mais EN ne pointe pas vers FR → Google ignore les deux.

Mauvais format de code : hreflang="FR" (majuscules) ou hreflang="fr_FR" (underscore) → invalide. Toujours minuscules, tiret : fr-FR.

x-default manquant : page d'accueil sans x-default → les utilisateurs hors zones ciblées ne voient aucune version par défaut.

Canonical conflictuel : page EN avec canonical pointant vers FR → Google suit le canonical, ignore hreflang.

Hreflang sur les pages non indexées : si la page FR a noindex, le hreflang qui la référence est ignoré.

Vérifier l'implémentation

# Vérifier les balises hreflang dans le HTML servi
curl -s https://iducation.fr/articles/docker-introduction | grep hreflang
 
# Résultat attendu
# <link rel="alternate" hreflang="fr" href="https://iducation.fr/articles/docker-introduction">
# <link rel="alternate" hreflang="en-US" href="https://iducation.com/en/articles/docker-introduction">
# <link rel="alternate" hreflang="x-default" href="https://iducation.fr/articles/docker-introduction">

Outils de validation :

Hreflang Testing Tool (Aleyda Solis) — vérification en bulk
Screaming Frog — audit complet du site, rapport hreflang
Google Search Console → Rapport International (si le site est multilingue, Google signale les erreurs hreflang)

Géociblage dans Search Console

Si votre site est sur un domaine générique (.com, .io, .dev) mais cible un pays spécifique, déclarez-le :

Search Console → Paramètres → International → Pays cible

Cela oriente Google même sans hreflang, pour les sites mono-langue ciblant un seul pays.

SEO international et hreflang : cibler plusieurs pays et langues

Comprendre hreflang

Codes de langue et de région

Structures d'URL — trois options

Implémentation hreflang complète

Dans le <head> HTML

Dans le sitemap XML

Implémentation Next.js i18n

Contenu traduit vs contenu adapté

Erreurs fréquentes

Vérifier l'implémentation

Géociblage dans Search Console

SEO international et hreflang : cibler plusieurs pays et langues

Comprendre hreflang

Codes de langue et de région

Structures d'URL — trois options

Implémentation hreflang complète

Dans le <head> HTML

Dans le sitemap XML

Implémentation Next.js i18n

Contenu traduit vs contenu adapté

Erreurs fréquentes

Vérifier l'implémentation

Géociblage dans Search Console

Dans le `<head>` HTML

Dans le `<head>` HTML