Hreflang pour les pages internationales
Indiquez aux moteurs de recherche les variantes de langue et de région.
Hreflang pour les pages internationales est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Le problème résolu par hreflang
Lorsque vous publiez le même article en anglais, en turc et en japonais, les moteurs de recherche doivent savoir quelle version afficher dans les résultats de recherche de chaque utilisateur. Sans hreflang, Google peut proposer la mauvaise langue ou considérer les variantes comme du contenu dupliqué.
La balise link
Déclarez chaque version alternative avec <link rel="alternate" hreflang="..." href="..."> dans le <head>. L’attribut hreflang est un code de langue BCP-47 (en, tr) ou une paire langue-région (en-US, en-GB, pt-BR).
<link rel="alternate" hreflang="en" href="https://example.com/en/article">
<link rel="alternate" hreflang="tr" href="https://example.com/tr/article">
<link rel="alternate" hreflang="ja" href="https://example.com/ja/article">Références réciproques obligatoires
Chaque version doit créer un lien vers toutes les autres versions, y compris elle-même. Google ignore les ensembles hreflang qui ne sont pas bidirectionnels. La page anglaise renvoie vers TR et JA ; la page turque renvoie vers EN et JA ; et ainsi de suite.
Référence à soi-même
Chaque page doit se référencer elle-même via hreflang. La page anglaise doit inclure <link rel="alternate" hreflang="en" ...> qui pointe vers sa propre URL. Cela fait partie du caractère « réciproque » — Google utilise ce lien vers soi-même pour confirmer l’appartenance à l’ensemble.
La valeur x-default
Utilisez hreflang="x-default" pour spécifier la page de repli destinée aux utilisateurs dont Google ne peut pas déterminer la langue. Elle pointe généralement vers la version anglaise ou vers une page d’accueil servant à sélectionner une langue, afin que les utilisateurs non ciblés arrivent tout de même à un endroit approprié.
Codes de langue et codes de région
en cible tous les anglophones. en-US, en-GB et en-AU ciblent les variantes nationales lorsque le contenu diffère selon la région (devise, orthographe, livraison). Ne spécifiez pas de région lorsque le contenu ne diffère pas réellement de la version générique.
Déclarations alternatives
hreflang peut également être déclaré dans l’en-tête HTTP Link (pour les fichiers non HTML tels que les PDF) ou dans un plan de site XML avec <xhtml:link rel="alternate" hreflang="...">. Les trois méthodes sont équivalentes ; choisissez celle qui est la plus facile à maintenir.
Déclaration dans un plan de site
Déclarer hreflang dans un plan de site s’adapte mieux aux sites comportant de nombreuses langues que les balises HTML : une entrée de plan de site par URL répertorie chaque version alternative, ce qui évite de dupliquer les modèles de chaque page. Google Search Console signale les liens réciproques manquants afin que les erreurs apparaissent rapidement.
Erreurs courantes
Utiliser un trait de soulignement (en_US) au lieu d’un trait d’union (en-US), pointer vers une URL qui ne renvoie pas le code 200, mélanger http et https dans l’ensemble ou oublier le lien vers soi-même suffit à désactiver hreflang sans message visible. Après le lancement, exécutez le rapport sur le ciblage international de Google Search Console.
Ne remplace pas la traduction
hreflang indique seulement à Google quelle traduction existe déjà. Les pages elles-mêmes doivent toujours contenir un véritable contenu traduit — Google ne traduira pas à votre place. Les sites qui ajoutent hreflang à des pages dont 80 % du contenu est en anglais induisent silencieusement l’index en erreur.
Combinaison avec og:locale et lang
Définissez <html lang="..."> et og:locale pour qu’ils correspondent à la langue réelle de la page. hreflang informe les moteurs de recherche sur les pages associées ; lang/og:locale indiquent aux navigateurs et aux réseaux sociaux la langue de la page actuelle. Les deux sont nécessaires pour obtenir une vue complète.
Vérification des connaissances
Vers quoi hreflang="x-default" pointe-t-il ?
Résumé
hreflang relie les versions traduites d’une page afin que les moteurs de recherche proposent la bonne langue. Utilisez des codes BCP-47, déclarez les versions alternatives de manière réciproque (y compris un lien vers soi-même), ajoutez x-default comme solution de repli et vérifiez le tout dans le rapport sur le ciblage international de Google Search Console. La qualité de la traduction et les balises lang/og:locale doivent également correspondre.
Questions Fréquemment Posées
La leçon « Hreflang pour les pages internationales » est-elle gratuite ?
Oui — le texte complet de « Hreflang pour les pages internationales » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Hreflang pour les pages internationales » ?
Indiquez aux moteurs de recherche les variantes de langue et de région. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Hreflang pour les pages internationales » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- OpenGraph : `og:title`, `og:description`, `og:image`
- Balises meta Twitter Card
- Notions fondamentales des données structurées JSON-LD
- Hreflang pour les pages internationales