hreflang, l’attribut HTML pour les sites mul­ti­lingues

Celui qui veut in­ter­na­tio­na­li­ser sa présence sur le Web et la proposer en dif­fé­rentes langues doit faire face à plusieurs tâches, y compris l’op­ti­mi­sa­tion pour les moteurs de recherche des dif­fé­rentes versions lin­guis­tiques. Ce n’est que sur la base de mesures SEO spé­ci­fiques à la langue ou au pays que les crawlers des moteurs de recherche sont en mesure de classer cor­rec­te­ment les dif­fé­rentes versions lin­guis­tiques du site Web et de les présenter ul­té­rieu­re­ment au public approprié. L’un des moyens les plus efficaces à cet effet est l’attribut de lien hreflang.

Qu’est-ce que le hreflang ?

En décembre 2011, Google présente le « hreflang » comme une solution simple et efficace pour informer les moteurs de recherche sur les relations des variantes al­ter­na­tives de sites Web. L’attribut signale au crawler de l’ap­pli­ca­tion de recherche que le contenu de la page actuelle est dis­po­nible en plusieurs versions mul­ti­lingues. Dans cette optique, un élément de lien est placé dans le document HTML, incluant les abré­via­tions lin­guis­tiques res­pec­tives. Si l’on souhaite attribuer une telle abré­via­tion à une page en langue espagnole par exemple, il faut im­plé­men­ter le hreflang avec l’abré­via­tion du pays, soit « es ». L’élément complet ressemble donc à ceci :

<link rel="alternate" hreflang="es" href="URL du site Web" />

Si cet élément est par exemple intégré dans une page française, le moteur de recherche renvoie au­to­ma­ti­que­ment les uti­li­sa­teurs avec des adresses IP indiquant un arrière-plan espagnol à leur homologue espagnol.

hreflang peut être aussi utilisé afin de dis­tin­guer les variantes d’une seule langue. Dans ce cas, l’attribut est sim­ple­ment étendu afin d’inclure la région cible. Pour la version espagnole déjà men­tion­née par exemple, on peut faire une division entre les uti­li­sa­teurs en Espagne ("hreflang="es-ES") et les uti­li­sa­teurs au Mexique ("hreflang="es-MX"). Les codes de langue et de pays possibles sont définis dans les normes ISO 639 et ISO 3166

Pourquoi est-il in­té­res­sant d’utiliser hreflang pour le SEO ?

La raison prin­ci­pale liée à l’uti­li­sa­tion d’attributs comme Canonical ou hreflang est que les contenus dupliqués de projets Web mul­ti­lingues doivent être évitées. Souvent, plusieurs marchés doivent être servis sans que les contenus, avec une exception pour la tra­duc­tion, se dif­fé­ren­cient. Pour les pays dans lesquels la même langue est utilisée, la situation est dif­fé­rente et même encore plus com­pli­quée. Quelques petites mo­di­fi­ca­tions en raison de dif­fé­rences cultu­relles ou ré­gio­nales (vo­ca­bu­laire, devise, in­for­ma­tions de contact etc.) s’opposent en grande partie aux contenus iden­tiques. Puisque, en règle générale, le même domaine est utilisé, il est important d’envoyer un signal clair aux moteurs de recherche, afin d’éviter un clas­se­ment négatif.

Alors que l’attribut Canonical déclare qu’une URL est la variante dominante et exclut toutes les versions al­ter­na­tives de l’in­dexa­tion, l’attribut hreflang signale quelle version d’un certain groupe cible (langue et/ou pays) doit être présentée dans le moteur de recherche. Pour cette raison, la balise HTML est toujours ap­pro­priée si vous voulez ren­con­trer un bon site à l’in­ter­na­tio­nal et disposez du contenu mul­ti­lingue cor­res­pon­dant. Même si l’attribut n’a pas d’influence directe sur le clas­se­ment dans les moteurs de recherche, l’uti­li­sa­tion correcte sera payante à long terme car les crawlers et les uti­li­sa­teurs des dif­fé­rents pays peuvent mieux capturer votre site Web.

Comment l’attribut hreflang est-il structuré ?

La balise hreflang est basée sur l’élément de lien HTML. L’élément de lien <link /> est un élément vide qui sert uni­que­ment à désigner une URL donnée avec les attributs cor­res­pon­dants. Il ne peut être utilisé que dans la zone d’en-tête, mais aussi souvent que né­ces­saire. Pour associer les dif­fé­rentes versions lin­guis­tiques à hreflang, deux attributs rel et href sont né­ces­saires en plus de l’attribut hreflang. Les trois dif­fé­rents éléments ont la fonction suivante :

• rel : rel spécifie les relations entre le document sous-jacent et le document lié. La valeur alternate indique au moteur de recherche que le document externe contient une version al­ter­na­tive du site Web.
• hreflang : hreflang lui-même décrit la langue dans laquelle le document lié est rédigé et peut éven­tuel­le­ment indiquer le pays pour lequel il est par­ti­cu­liè­re­ment pertinent. Vous trouverez une liste claire de toutes les com­bi­nai­sons possibles sur lingoes.net.
• href : l’attribut href indique par défaut l’URL de la version lin­guis­tique al­ter­na­tive.

Voici un exemple :

<link rel="alternate" hreflang="Code langue-Code Pays" href="URL du site Web" />

Si les uti­li­sa­teurs ne sont pas affectés à une version lin­guis­tique ap­pro­priée, c’est le clas­se­ment qui détermine laquelle des variantes lin­guis­tiques doit être affichée. Dans ce cas, vous risquez de perdre des lecteurs po­ten­tiels après quelques secondes seulement, car ils se re­trou­ve­ront sur la mauvaise version lin­guis­tique. Google met toutefois à dis­po­si­tion une option avec « x-default » qui vous permet de dé­sa­mor­cer cette situation. Cet élément signale au moteur de recherche que l’URL liée est une solution standard pour tous les uti­li­sa­teurs pour lesquels il n’existe pas de version lin­guis­tique ex­pli­ci­te­ment indiquée. En voici un exemple :

<link rel="alternate" hreflang="x-default" href="URL de la page „Default“" />

Dans la page d’in­tro­duc­tion Google de « x-default hreflang » pour les sites Web in­ter­na­tio­naux, cet élément est abordé plus en détail.

Comment im­plé­men­ter hreflang ?

Le tag hreflang peut être im­plé­menté de trois manières dif­fé­rentes : le plus souvent, cela se fait en l’intégrant dans la zone Head du document HTML concerné. Pour les documents qui ne sont pas au format HTML (comme un fichier PDF), l’élément peut également être inséré dans l’en-tête HTTP-Header. Enfin, il est aussi possible d’intégrer l’attribut hreflang dans le sitemap.

L’in­té­gra­tion dans un en-tête HTTP fonc­tionne en principe selon le même modèle, car il s’agit là aussi de ré­fé­ren­cer toutes les versions lin­guis­tiques exis­tantes. Seule la syntaxe présente quelques dif­fé­rences :

Link: <http://exempledomaine.fr/es/downloads/manuals.pdf/>; rel="alternate"; hreflang="es"

Le marquage de l’attribut hreflang dans un sitemap XML est une al­ter­na­tive ju­di­cieuse au marquage simple dans les dif­fé­rentes pages, notamment si vous gérez un projet Web in­ter­na­tio­nal. En effet, si vous proposez des contenus mul­ti­lingues à grande échelle, l’effort à fournir pour l’im­plé­men­ta­tion HTML ha­bi­tuelle serait re­la­ti­ve­ment élevé. Dans un plan du site, toutes les versions lin­guis­tiques doivent également être men­tion­nées in­di­vi­duel­le­ment en indiquant l’URL cor­res­pon­dante. Chaque URL est en outre spécifiée par un élément xhtml:link qui fait référence aux autres variantes dis­po­nibles :

<?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>http://exempledomaine.fr/</loc>
        <xhtml:link
            rel="alternate"
            hreflang="fr"
            href="http://exempledomaine.fr/"
        />
        <xhtml:link
            rel="alternate"
            hreflang="it"
            href="http://exempledomaine.fr/it/"
        />
        <xhtml:link
            rel="alternate"
            hreflang="es"
            href="http://exempledomaine.fr/es/"
        />
        <xhtml:link
            rel="alternate"
            hreflang="en"
            href="http://exempledomaine.fr/en/"
        />
    </url>
</urlset>

Vous devez ensuite répéter la balise <url> selon le même modèle pour chaque version lin­guis­tique de votre article.

Pour com­prendre le fonc­tion­ne­ment du tag hreflang, une propriété de l’attribut est d’une im­por­tance élé­men­taire : elle relie deux ou plusieurs documents de manière bi­di­rec­tion­nelle et non, comme dans le cas d’une re­di­rec­tion, uni­di­rec­tion­nelle. Il ne suffit donc pas que le site français contienne un lien hreflang vers la version espagnole, sans renvoyer à la version française. C’est seulement si la note HTML hreflang est placée dans tous les documents dans toutes les di­rec­tions exis­tantes (versions lin­guis­tiques) que le moteur de recherche pourra re­con­naître la structure de votre projet Web et ajuster les résultats de recherche des uti­li­sa­teurs en con­sé­quence.

Le code d’exemple hreflang suivant, pour le site Web fictif exem­ple­do­maine.fr avec les versions lin­guis­tiques al­le­mandes, ita­liennes, es­pag­noles et anglaises, devrait être entré dans les en-têtes des quatre documents HTML :

<link rel="alternate" href="http://exempledomaine.fr/" hreflang="de" />
<link rel="alternate" href="http://exempledomaine.fr/it/" hreflang="it" />
<link rel="alternate" href="http://exempledomaine.fr/es/" hreflang="es" />
<link rel="alternate" href="http://exempledomaine.fr/en/" hreflang="en" />

Erreurs fré­quentes lors de l’in­té­gra­tion du tag hreflang

Les exemples hreflang listés pour HTML et autres montrent que l’im­plé­men­ta­tion de l’af­fec­ta­tion pratique et au­to­ma­tique des uti­li­sa­teurs pour les pages Web mul­ti­lingues n’est en aucun cas sorcier. Cependant, ils mettent aussi en évidence l’effort qu’il ne faut pas sous-estimer et le potentiel d’erreur qui va de pair avec les nom­breuses ré­fé­rences ré­ci­proques. Il en résulte des erreurs mineures ou majeures, qui n’affectent parfois que des pages in­di­vi­duelles, mais qui mettent aussi parfois en danger la fonc­tion­na­lité de hreflang pour l’ensemble du projet Web. Pour cette raison, nous avons résumé ci-dessous certaines des sources d’erreurs les plus fré­quentes :

hreflang non im­plé­menté au niveau de l’URL

Puisque la balise hreflang est toujours liée à une URL concrète, elle doit toujours être exécutée à ce niveau. En d’autres termes : si vous marquez l’URL source de vos dif­fé­rentes versions lin­guis­tiques avec l’attribut, l’af­fec­ta­tion au­to­ma­tique des uti­li­sa­teurs ne s’applique qu’à ces pages d’accueil et pas uni­que­ment au projet Web complet. C’est donc de votre ressort d’im­plé­men­ter de manière in­di­vi­duelle l’élément de lien pour les dif­fé­rentes pages mul­ti­lingues ou al­ter­na­ti­ve­ment pour tra­vail­ler avec la variante du plan de site men­tion­née.

Une ou plusieurs versions lin­guis­tiques ne renvoient pas à elles-mêmes

Beaucoup d’opé­ra­teurs de sites Web com­met­tent l’erreur et marquent cor­rec­te­ment les URL des autres versions lin­guis­tiques avec l’attribut hreflang, mais oublient que la page cor­res­pon­dante doit aussi se référer à elle-même. Dans ce cas, la structure du lien est in­com­plète et ne peut pas être in­ter­pré­tée par Google et d’autres moteurs de recherche.

Il ne faut pas non plus renoncer à l’in­di­ca­tion d’une page par défaut au moyen de hreflang x-default. Le cas échéant, vous lais­se­riez ainsi un certain potentiel d’op­ti­mi­sa­tion inex­ploité.

Codes ISO in­cor­rects

Lorsqu’il s’agit des codes de pays et de langue, on pourrait être tenté d’être créatif. Mais cela n’est pas toujours couronné de succès et conduit souvent à ce que le code hreflang soit erroné. Ainsi, la com­bi­nai­son "en-uk" semble être un choix pertinent si le contenu de la page s’adresse ex­pli­ci­te­ment au public bri­tan­nique, mais la com­bi­nai­son correcte est en fait "en-gb". Vérifiez toujours les codes de pays que vous utilisez à l’aide de la norme ISO 639-1.

Référence à des URL anciennes ou inexis­tantes

L’uti­li­sa­tion d’URL qui n’existent plus est une cause fréquente d’erreurs dans les tags hreflang. Cela se produit en premier lieu lorsque les balises sont intégrées au­to­ma­ti­que­ment sur toutes les sous-pages, mais que toutes ces pages ne sont pas dis­po­nibles dans chaque variante de langue proposée. Les URL obsolètes ap­pa­rais­sent lo­gi­que­ment toujours lorsque vous effectuez des mo­di­fi­ca­tions de la structure de l’URL et que vous ne trans­fé­rez pas ces adap­ta­tions dans les éléments de lien.

Uti­li­sa­tion con­tra­dic­toire de la balise Canonical et de la balise hreflang

De nombreux four­nis­seurs de sites Web in­ter­na­tio­naux ont recours à la balise Canonical afin que les robots des moteurs de recherche n’indexent pas deux fois les pages ayant le même contenu. Cette procédure est certes une option de premier ordre pour con­tour­ner le problème du duplicate content, mais elle n’est pas com­pa­tible avec l’uti­li­sa­tion de l’attribut hreflang. En effet, si une page contient les deux balises, les moteurs de recherche reçoivent des in­for­ma­tions con­tra­dic­toires et ignorent les deux signaux.

Le marquage hreflang ne doit donc être utilisé que pour les pages qui ne renvoient pas à une autre page via l’attribut Canonical.

Les pa­ra­mètres dans Google Webmaster Tools envoient des signaux con­tra­dic­toires

Lorsque vous inscrivez votre site Web dans les Google Webmaster Tools (Search Console), vous pouvez définir l’orien­ta­tion in­ter­na­tio­nale d’un domaine ou d’une URL, si des domaines gé­né­riques de premier niveau sont utilisés. Pour les ex­ten­sions de domaine spé­ci­fiques à un pays, Google se charge même de cette at­tri­bu­tion. Il ne fait aucun doute qu’en tant que gérant de site Web, vous profitez de cette fonction : Google utilise ces in­for­ma­tions pour ca­té­go­ri­ser vos pages de manière optimale. Cela vaut donc vraiment la peine d’informer Google des versions lo­ca­li­sées de votre site.

L’attribut hreflang impacte le SEO : n’oubliez donc pas d’intégrer ces pa­ra­mètres dans vos mesures SEO. Ainsi, si vous marquez des pages avec l’attribut hreflang, il ne devrait pas y avoir de con­tra­dic­tion. Il peut par exemple arriver ra­pi­de­ment qu’une page ne soit marquée que par une abré­via­tion de langue et sans spé­ci­fi­ca­tion régionale, alors qu’un pays spé­ci­fique est indiqué dans les outils Webmaster.

Quelques outils hreflang utiles

Il est évident que l’in­té­gra­tion de la balise hreflang dans toutes les pages HTML per­ti­nentes nécessite un certain effort et beaucoup de code. Plus votre site Web mul­ti­lingue est complexe, plus il est probable que des erreurs se glissent lors de l’im­plé­men­ta­tion, même si vous con­nais­sez les sources d’erreurs po­ten­tielles pré­sen­tées et que vous les gardez à l’esprit. C’est pourquoi il est re­com­mandé d’utiliser des outils pour créer les balises et pour vérifier leur fonc­tion­ne­ment à in­ter­valles réguliers. Vous trouverez quelques outils in­té­res­sants dans la liste suivante :

• SISTRIX hreflang Generator : avec le gé­né­ra­teur hreflang gratuit de SISTRIX, vous créez sans problème des éléments de lien avec attribut hreflang pour l’en-tête HTML de vos contenus mul­ti­lingues. Pour ce faire, il suffit d’indiquer les URL con­cer­nées ainsi que les abré­via­tions de pays et de langue sou­hai­tées et de générer ensuite le code en cliquant sur « Créer le code ». Il est aussi possible de définir une page par défaut.
• SISTRIX hreflang Validator : si vous avez im­plé­menté des ré­fé­rences pour dif­fé­rentes versions lin­guis­tiques dans votre projet Web, vous pouvez faire usage du va­li­da­teur hreflang également proposé par SISTRIX. Le service Web gratuit vérifie pour une URL donnée si les balises hreflang définies sont correctes.
• Google Search Console : l’ins­crip­tion à Google ne facilite pas seulement la saisie de votre site par le moteur de recherche, elle vous permet de plus d’accéder à divers outils d’analyse pour optimiser votre projet Web. Sous la rubrique « Ciblage in­ter­na­tio­nal », le tableau de bord fournit par exemple également des in­for­ma­tions sur les balises hreflang utilisées, y compris une liste des backlinks manquants.
• Hreflang Checker : avec cet outil, les attributs hreflang d’une URL saisie peuvent être présentés ra­pi­de­ment et de manière claire. L’outil indique même de quelle source les attributs hreflang ont été extraits (HTML, HTTP, etc.) et vous suggère comment vous pourriez améliorer vos im­plé­men­ta­tions hreflang.