Lors de son développement, votre entreprise peut voir son champ d'action s'étendre à force de succès, dépassant parfois les frontières nationales. En parallèle, votre site web doit s'adapter pour servir de support de communication auprès de ce nouveau public non francophone.
Dans ce contexte, la balise hreflang, ou plus précisément l'attribut « hreflang » de la balise « link » permet d'indiquer l'accessibilité de votre site dans une langue étrangère.
Qu'est-ce que la balise hreflang ?
Le HTML, ou Hypertexte Markup Language est un langage client, autrement dit géré par votre support et votre navigateur. Il vient structurer le contenu d'un site sans, par nature, se préoccuper du design. Il est accompagné du CSS, ou Cascading Style Sheets, qui est chargé de tous les paramètres de mise en page inhérents au contenu structuré dans le HTML.
Dans les faits, le HTML se compose de « boîtes » et de portions de texte. Chacune d'elles peut voir son fonctionnement varier selon les « balises » qui les entoure. En effet, dans le HTML, un élément se voit annoncé par une balise d'ouverture et terminé par une balise de fermeture. En voici un exemple pour un paragraphe :
Mon paragraphe
Parmi ces balises, vous pouvez retrouver la balise dite « link ». Elle permet de faire un lien entre un document donné et une ressource tierce. La balise « link » présente deux caractéristiques : la possibilité d'adopter des attributs, mais l'absence de formes d'ouverture ou de fermeture.
En effet, « link » est une balise qui se ferme d'elle-même, étant alors considérée comme « orpheline ». Par ailleurs, « hreflang » est l'un des attributs destinés à la balise « link » et se décompose de la façon suivante :
"code_langue"-"code_pays"
Par exemple, une version anglais américain d'un site voit la balise de lien porter la valeur d'attribut : « en-us ».
L'importance de la balise hreflang en SEO
Dans le cadre du SEO, la balise « link », et plus précisément son attribut « hreflang » peut sembler accessoire, mais il demeure indispensable pour votre site multilingue, puisqu'il évite la considération des pages alternatives comme des pages constituées de contenu dupliqué.
Le contenu dupliqué, ou duplicate content est une pratique consistant à créer un contenu sur une page et considéré comme « copié » sur celui d'une autre page par le moteur. Il en existe deux variantes : l'externe et l'interne.
D'un côté, le contenu dupliqué externe correspond à un contenu texte sur un site tiers copié sur celui présent sur votre site internet. L'effet inverse est également possible si vous ne reformulez pas assez les informations sélectionnées sur un autre site. De l'autre, le contenu dupliqué interne n'est autre qu'une reproduction d'un contenu entre différentes pages de votre nom de domaine.
Ainsi, lorsqu'un site est multilingue, hreflang vient contrer le jugement des moteurs au sujet des versions alternatives de votre site, indiquant qu'il ne s'agit non pas d'un contenu recopié, mais d'une autre version, favorable à l'expérience de l'internaute.
Il s'avère donc crucial de correctement créer et structurer les versions alternatives de votre site, que cela concerne les critères des moteurs ou la réponse à la requête. En effet, il peut arriver qu'un internaute, en effectuant une recherche, puisse obtenir un résultat dans la SERP qui n'est pas dans sa langue maternelle ou attendue.
En retournant dans la page de résultats juste après avoir cliqué sur votre lien, l'internaute procède à ce que l'on nomme le pogosticking, un comportement favorisant l'augmentation de votre taux de rebond. De bonnes versions alternatives éviteront de telles pratiques et garantiront une meilleure réponse à la requête en priorisant la bonne langue dans les résultats.
Où placer la balise hreflang ?
La balise « link » portant l'attribut « hreflang » peut être placée dans de nombreux endroits sur un site :
- Dans le header du HTML.
- Dans l'entête HTTP.
- Dans le sitemap XML.
Le header, ou la balise « head » contient l'ensemble des informations génériques sur votre site, comprenant les métadonnées, les liens vers des fichiers CSS annexes, mais aussi parfois des liens vers des versions alternatives de votre site en matière de langue. Placer vos liens disposant de l'attribut « hreflang » ici les rend parfaitement visibles, mais implique un chargement lourd, défavorable à l'expérience utilisateur et synonyme de potentielles difficultés côté serveur.
Comprises dans l'entête HTTP, les versions alternatives de votre site ne sont pas visibles en matière de code par l'internaute, mais visibles lors du crawl régulier de votre site par les moteurs.
Le sitemap XML, pour rappel, est un fichier indiquant aux robots des moteurs une liste complète des URL présentes autour du nom de domaine de votre site et les métadonnées liées. Y implémenter votre « démarche » hreflang participe à améliorer votre temps de chargement, mais ne rend pas systématiquement ces éléments visibles par les moteurs.
Les erreurs à éviter
L'utilisation de la balise « link » et de l'attribut « hreflang » nécessite une certaine minutie. C'est la raison pour laquelle certaines erreurs sont à éviter, d'après une étude menée par SEMRush en 2017 à ce sujet.
Des valeurs incorrectes
Lors de la mise en place de versions alternatives d'un site pour différentes langues, de nombreuses erreurs sont commises, empêchant le bon fonctionnement de la balise et son attribut « hreflang » :
- Le code pays (« en-uk » au lieu de « en-gb »).
- Le code pays seul (« ?-gb » au lieu de « en-gb »).
- Le mauvais code langue (« eng-gb » au lieu de « en-gb »).
- Le mauvais tiret (« en_gb » au lieu de « en-gb »).
- L'inversion entre les codes langue et pays (« gb-en » au lieu de « en-gb »).
Les conflits dans les alternatives hreflang
Tout comme pour la balise « a », la balise « link » peut adopter un autre attribut : « rel ». Celui-ci y adopte plusieurs valeurs, dont « canonical » et « alternate ». Comme leurs noms l'indiquent, elles permettent de définir une URL « de base », unique, et ses alternatives, multiples.
C'est la raison pour laquelle plusieurs conflits peuvent être générés lors de la création ou la maintenance d'un site, notamment :
- L'inversion entre les valeurs « canonical » et « alternate » pour l’URL de base, dite page canonique.
- La présence d'une même URL en tant qu'URL canonique et URL alternative.
- La reproduction de la même combinaison code_langue+code_pays pour des URL différentes.
La mauvaise utilisation de liens
En termes de gestion d'un site web de serveur à client, il existe de nombreuses erreurs susceptibles d'être rencontrées, chacune adoptant un code propre à son origine. Parmi les plus connues, il est possible de retrouver :
- L'erreur 404 : l'URL ne fonctionne pas.
- L'erreur 500 : l'origine se trouve côté serveur, empêchant le chargement de la page.
- La redirection 301 : le déplacement permanent d'une URL, menant alors de façon définitive vers un autre lien.
Dans le cas de l'attribut « hreflang » de balise « link », il peut parfois ne tout simplement pas fonctionner, puisqu'il ne se voit pas compatible avec les phénomènes suivants :
- La redirection vers une page à erreur 301.
- La redirection vers une page en 404 ou encore 500.
- L'utilisation d'une URL relative au lieu d'une URL absolue.
Pour rappel, une URL absolue est l'adresse exacte côté client de la ressource à laquelle accède l'internaute, à l'image de « https://www.votre-site.com/blog/actualités/article-1 ». Enfin, une URL relative correspond au chemin côté serveur pour y accéder, à savoir : « /blog/actualités/article-1 ».
Pour aller plus loin, découvrez comment créer des contenus parfaitement optimisés pour les moteurs de recherche en téléchargeant la checklist de rédaction SEO, ou découvrez l'outil SEO de HubSpot. 
