Définition publiée le 03/10/2023
Hreflang est un code que l'on ajoute à la balise HTML d'une page web. Ce code spécifie la langue et, éventuellement, la région géographique pour laquelle cette page est destinée.
Les sources officielles
Définition de la balise Hreflang
Le monde du web est riche et varié, accueillant des utilisateurs de tous horizons et parlant différentes langues. Afin que ces utilisateurs puissent accéder à un contenu qui leur est le plus pertinent, l'attribut hreflang a été introduit en 2011 par Google pour aider les moteurs de recherche à saisir le contexte international d'une page.
Son rôle est simple mais important : il indique aux moteurs de recherche quelles versions linguistiques ou régionales de pages doivent être présentées à quelles audiences.
Cas d’utilisation : exemples
- Si un utilisateur recherche une page depuis la France, le hreflang peut aider à lui montrer la version française d'une page plutôt que sa version anglaise ou espagnole.
- Si vous possédez un site e-commerce qui vend des chaussures et que vous avez une version en anglais pour vos clients américains, et une deuxième version en anglais pour vos clients du Royaume-Uni. Bien que la langue soit la même, le contenu peut varier (par exemple, des prix en dollars pour les États-Unis et en livres sterling pour le Royaume-Uni). Sans l'hreflang, les moteurs de recherche pourraient confondre ces pages et les considérer comme du contenu dupliqué, ou présenter la mauvaise version à l'utilisateur.
L'attribut hreflang a donc été créé pour résoudre ce problème. Il aide les moteurs de recherche comme Google à comprendre quelles versions de pages doivent être présentées en fonction de la langue ou de la région de l'utilisateur, garantissant ainsi que le contenu le plus pertinent soit toujours affiché.
L’intérêt du Hreflang pour le SEO
En SEO, l'utilisation correcte de cet attribut a une grande importance. Non seulement cela assure que les utilisateurs trouvent le contenu le plus pertinent pour eux, mais cela évite également des problèmes potentiels de contenu dupliqué, où différentes versions linguistiques d'une page pourraient être vues comme identiques par Google.
En aidant les moteurs de recherche à proposer le bon contenu à la bonne audience, l’attribut hreflang améliore l'expérience utilisateur et peut avoir un impact positif sur le positionnement du site dans les résultats de recherche en limitant, par exemple, le taux de rebond.
Présentation du format de l'attribut :
L'attribut hreflang est représenté sous cette forme : hreflang="lang-region".
- lang est un code ISO composé de deux lettres en minuscules représentant la langue. Par exemple, ”fr” pour le français, “en” pour l'anglais.
- region est un code ISO de pays composé de deux lettres en majuscules, comme FR pour la France, US pour les États-Unis.
La spécification de la région n'est pas toujours nécessaire. Si votre contenu est destiné à tous les locuteurs d'une langue, quelle que soit leur localisation, la spécification de la langue seule suffira.
D’autre part, le fait d’écrire le code région en majuscules est une convention d’écriture qu’il est préférable de respecter, mais la version en minuscules est tout de même comprise par les crawlers des moteurs de recherche.
Dans le doute, référez-vous à la documentation de Google qui vous aidera à respecter la syntaxe de l’attribut hreflang.
Exemple d'implémentation
Imaginons que vous ayez une page web en anglais destinée spécifiquement aux visiteurs des États-Unis. Voici comment vous pourriez utiliser l'attribut hreflang :
<link rel="alternate" hreflang="en-US" href="https://votresite.com/en-US/page-exemple/" />
Dans cet exemple :
- rel="alternate" informe le moteur de recherche qu'il s'agit d'une version alternative de la page source.
- href donne l'URL de la page en question.
- hreflang="en-US" précise que cette page est en anglais (en) et destinée aux États-Unis (US).
Comment intégrer HREFLANG sur votre site ?
Il existe 3 manières différentes d’intégrer l’attribut Hreflang à votre site :
Balises HTML
La façon la plus courante et la plus simple d'utiliser l'attribut hreflang est d'insérer des balises <link> dans l'en-tête (le header) de votre page HTML.
Par exemple, si vous avez une page en anglais pour les États-Unis et une autre en français pour la France, voici comment vous pourriez les structurer :
<link rel="alternate" href="http://exemple.com/en-US/" hreflang="en-US" />
<link rel="alternate" href="http://exemple.com/fr-FR/" hreflang="fr-FR" />
Sitemaps XML
Les sitemaps XML offrent une autre méthode pour ajouter l'attribut Hreflang. John Mueller précise que cette technique est à privilégier si vous avez plusieurs traductions différentes sur une même page.
En effet, dans le code HTML, toutes les pages traduites doivent être reliées les unes aux autres. Si un site comporte de nombreuses traductions, l’ajout de toutes les pages dans le header alourdit le code et ralentit la vitesse de chargement des pages.
A contrario, ajouter la mention hreflang à votre sitemap n’augmente pas le temps de chargement de votre site.
Dans votre sitemap, cela pourrait ressembler à ceci :
<url>
<loc>http://exemple.com/en-us/</loc>
<xhtml:link
rel="alternate"
hreflang="en-us"
href="http://exemple.com/en-us/"
/>
<xhtml:link
rel="alternate"
hreflang="fr-fr"
href="http://exemple.com/fr-fr/"
/>
</url>
Établir des hreflang dans le sitemap XML peut s'avérer compliqué. Quelques CMS offrent des options de marquage automatique, comme hreflang pour WordPress ou Prestashop. C'est une option à privilégier si l'on n'est pas à l'aise avec le codage.
En-têtes HTTP
Si votre contenu n'est pas basé sur du HTML, comme des documents PDF, vous pouvez utiliser l'en-tête HTTP pour spécifier l'attribut hreflang.
Par exemple, lors de la livraison du contenu, votre serveur pourrait inclure cet en-tête HTTP :
Link: <http://exemple.com/en-US/>; rel=”alternate”; hreflang=”en-US”
Link: <http://exemple.com/fr-FR/>; rel=”alternate”; hreflang=”fr-FR”
Cette méthode est peu connue et rarement utilisée. Pourtant, elle présente un avantage intéressant : l’entête HTTP est systématiquement traitée lorsqu’une page est crawlée par Google, alors que le sitemap n’est pas toujours vérifié par les robots d’indexation. Cela signifie que Google est informé de l’existence de l’attribut hreflang à chaque fois qu’il visite une page.
Erreurs courantes avec le hreflang et comment les éviter
Utilisation d'un code langue ou région incorrect
Vous avez utilisé un code de langue ou de région non conforme aux normes ISO. Assurez-vous d'utiliser les codes corrects pour les langues (comme "en" pour l'anglais) et les pays (comme "us" pour les États-Unis). Utiliser un générateur de code spécifique peut vous aider à limiter les erreurs de syntaxe.
Utiliser plusieurs techniques d’implémentation
Il est déconseillé d'intégrer l’attribut hreflang à la fois dans le sitemap et dans le HTML par exemple, car cela risque de semer la confusion pour les robots d’indexation.
Mal renseigner les URLs canoniques
Il est indispensable d’utiliser rel="alternate" hreflang="fr" et rel="canonical" en même temps. Chaque version linguistique doit avoir un lien rel="canonical" qui pointe vers elle, même si c'est une version spécifique à une région.
Omission de la page de référence
Vous avez utilisé des balises hreflang pour les variantes de langue, mais avez omis de spécifier la page d'origine (souvent la version en langue anglaise).
Pour chaque groupe de pages traduites, incluez également une balise hreflang pour la page principale. Elle servira de version par défaut si les moteurs de recherche ne peuvent pas correspondre à une langue spécifique.
Incohérence des URLs
Les URLs spécifiées dans les balises hreflang ne correspondent pas aux URLs réelles sur votre site. Assurez-vous que chaque URL dans vos balises hreflang est exacte et mène à la version correcte de la page.
Absence de réciprocité
Une page en français renvoie à une version anglaise via hreflang, mais la page anglaise ne renvoie pas à la version française.
A chaque fois que vous spécifiez une version alternative de page avec hreflang, assurez-vous que cette page renvoie également à la version d'origine.
Utilisation sur des pages non traduites
Vous utilisez l'attribut hreflang pour des pages qui ne sont pas réellement traduites ou qui contiennent le même contenu.
N'utilisez le hreflang que pour des pages qui ont du contenu traduit ou adapté pour différentes régions. Les moteurs de recherche pourraient considérer l'utilisation incorrecte comme une tentative de manipulation.
Ignorer les en-têtes HTTP et sitemaps XML
Selon la structure de votre site et le type de contenu, pensez à utiliser les en-têtes HTTP ou les sitemaps XML pour spécifier hreflang, en particulier si vous avez de nombreux contenus non-HTML ou un grand nombre de pages traduites.
Mathilde Grattepanche
Responsable éditoriale & Rédactrice web
Avec sa plume affûtée et son expertise en rédaction web, Mathilde a acquis une solide expérience avant de rejoindre l’équipe en tant que responsable éditoriale d’Abondance. Quand elle est au clavier, réactivité et qualité sont toujours au rendez-vous !
On parle aussi de l'attribut hreflang ici :
- Hreflang : les avantages insoupçonnés de la valeur x-default (2023)
- Goossips : Speakable, Hreflang (2020)
- Goossips : Hreflang, Sitemap XML, Lien HTTP et Logo (2020)
