L'attribut hreflang en quelques mots

L'attribut hreflang est utilisé pour indiquer en quelle langue est votre contenu et à quelle zone géographique il est destiné. Lorsque vous implémentez l'attribut hreflang, gardez en tête ces meilleures pratiques :

  • Référencez la page elle-même ainsi que ses variantes traduites.
  • Assurez-vous d'avoir des références de l'attribut hreflang bidirectionnelles.
  • Définissez correctement les combinaisons de langues et de régions.
  • Mettez systématiquement hreflang=”x-default”.
  • L'attribut hreflang et l'URL canonique doivent fonctionner ensemble.
  • Utilisez des URL absolues lorsque vous définissez l'attribut hreflang
  • N'utilisez qu'une seule méthode pour implémenter l'attribut hreflang.

Que pouvez-vous attendre de cet article ?

Dans cet article nous allons voir ce qu'est l'attribut de lien rel="alternate" hreflang="x", pourquoi il est important en SEO et comment l'utiliser pour indiquer aux moteurs de recherche votre public cible.

Qu'est-ce que l’attribut hreflang ?

L’attribut rel="alternate" hreflang="x” est utilisé pour indiquer dans quelles langues est votre contenu ainsi que les régions géographiques pour lesquelles il est destiné.

Souvent, l’attribut rel="alternate" hreflang="x” est de manière incorrecte appelée tag rel="alternate" hreflang="x”. Dans un esprit de brièveté, nous l’appelerons l’attribut hreflang à partir de maintenant.

Si vous avez un site disponible dans plusieurs langues, l’attribut est un outil essentiel pour guider les moteurs de recherche vers le bon contenu à offrir au bon public.

Aleyda Solis
Aleyda Solis

Avec hreflang, il est important de se renseigner sur la portée et les règles d'implémentation originellement suivies pour établir les meilleures pratiques et de les revoir lors de l'entrée dans de nouveaux marchés. Ces meilleures pratiques doivent ensuite être appliquées dès que de nouvelles sections localisées sont ajoutées, que des pages présentant les langues et/ou pays concernés sont publiées ou leurs URL modifiées. Il est important de pouvoir mettre à jour et valider les annotations hreflang en conséquences.

Quels moteurs de recherche supportent l'attribut hreflang ?

Actuellement, seuls Google et Yandex supportent l'attribut hreflang.
Ce n'est pas le cas pour Bing et Baidu, qui utilisent plutôt l'attribut HTML (meta) content-language. Par exemple, si vous voulez leur faire comprendre que votre contenu est destiné au public dont la langue est l'anglais américain, vous le définirez ainsi :
<meta http-equiv=”content-language” content=”en-us”>
Sinon, Bing accepte aussi la définition de la langue du contenu grâce au header HTTP.

Pourquoi devez-vous vous souciez de l’attribut hreflang ?

Si vous avez un site internet disponible dans plusieurs langues, vous voulez, ainsi, que les moteurs de recherche les montre correctement à vos utilisateurs. Afin d’aider les moteurs de recherche à faire ça,vous devez utiliser l’attribut pour indiquer dans quelle langue le contenu est, et également pourquoi pas pour quel zone géographique il est destiné.

Imaginez, votre site est disponible dans deux langues : Français et Anglais. Vous avez écrit votre contenu dans les deux langues et vous voulez faire comprendre aux moteurs de recherche que le contenu en anglais doit être présenté au public anglophone, et le contenu en espagnol au public hispanophone. Vous utiliserez pour cela l’attribut hreflang.

Un autre exemple dans lequel l’attribut est utile c’est lorsque votre ciblée une certaine zone géographique. Imaginez, vous ciblez les consommateurs parlant français de France et Suisse, donc vous avez donc localisé votre contenu pour ces marchés. Désormais vous pouvez faire apparaître de manière claire que les deux varient en combinant la définition de la langue avec la région que vous ciblé. Vous pourrez utiliser l’attribut hreflang pour lister les deux versions (fr-fr et fr-ch dans ce cas).

William Vicary
William Vicary

L'utilisation de hreflang, et l'internationalisation de façon générale, doivent si possible être abordés dès les premières discussions sur l'architecture du site. Une page déjà prête à avoir un équivalent dans une autre langue vous facilitera grandement la tâche en cas d'implémentation de hreflang.

L’anatomie de l’attribut hreflang

Regardons ensemble ce à quoi l’attribut hreflang ressemble à travers un exemple :

<link rel="alternate" hreflang="fr" href="https://www.exemple.fr/" />

Voyons cela étape par étape :

  1. La partie du lien link rel="alternate" indique qu’il existe une page alternative. Dans cet article, on se focalise sur l’attribut hreflang mais beaucoup d’autres liens relationnels existe tel que la pagination, variante mobile et variante AMP.
  2. La partie hreflang="fr" décrit la population ciblée. Vous pouvez ne définir que la langue ou alors la combinaison d'une langue et d'une région géographique. Dans cet exemple, la cible se résume au monde anglophone.
  3. La partie href décrit l’URL de la page de la page pour la population précédemment définie. Ici,https://www.exemple.fr.

Comment implémenter l’attribut hreflang

L’attribut hreflang peut être implémenter en utilisant :

  1. L’élément du lien dans la section <head> de vos pages HTML.
  2. Le header HTTP
  3. Le sitemap XML

Implementer l'attribut hreflang en HTML

Habituellement, la façon la plus facile d’incorporer l’attribut hreflang est de l’inclure dans la section <head> de vos pages HTML.

Lorsque vous définissez l’attribut hreflang, vous, non seulement, décrivez la population ciblée pour la page actuelle mais aussi les différentes versions de cette page.
Par exemple, supposons qu'une page d'accueil en espagnol soit aussi disponible en anglais et en français et que vous vouliez que la version par défaut soit l'espagnole. La définition complète de la page sera alors comme ci-dessous et sera présente dans chacune des variantes de la page d'accueil en espagnol :

<link rel="canonical" href="https://www.example.com/es/" /> <link rel="alternate" hreflang="es" href="https://www.example.com/es/" /> <link rel="alternate" hreflang="en-gb" href="https://www.example.com/uk/" /> <link rel="alternate" hreflang="fr" href="https://www.example.com/fr/" /> <link rel="alternate" hreflang="x-default" href="https://www.example.com/es/" />

Vous pouvez définir une page de secours au cas où aucune page n’est disponible pour la population ciblée. Cela peut être réalisé en utilisant la valeur x-default.

Implémenter l'attribut hreflang dans le header HTTP

Tout comme les liens canoniques et les directives robots, l'attribut hreflang peut être défini dans le header HTTP.
L'usage le plus courant, c'est la définition d'un public cible pour des documents non-HTML tels que des PDF, par exemple. Les fichiers PDF sont également explorés et indexés et si vous les avez en plusieurs langues, il n'est pas idiot de préciser à quel public ils se destinent.
Voici un aperçu de ce à quoi ressemblent les différentes parties du header HTTP lorsque l'attribut hreflang y est défini:

HTTP/1.1 200 OK Content-Type: application/pdf Link: <https://exemple.fr/livreblanc-interessant.pdf>; rel="alternate";hreflang="x-default", <https://exemple.fr/livreblanc-interessant.pdf>; rel="alternate";hreflang="fr", <https://example.com/livreblanc-interessant-espagnol.pdf>; rel="alternate";hreflang="es"

Implementer l'attribut hreflang dans le sitemap XML

L'attribut hreflang peut aussi être implémenté par le sitemap XML.
Voici ce que ça donnerait pour une page d'accueil destinée à un public américain, également accessible aux publics canadiens et britanniques :

<?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://example.com/</loc> <xhtml:link rel="alternate" hreflang="en-CA" href="https://example.com/en-ca/" /> <xhtml:link rel="alternate" hreflang="en-GB" href="https://example.com/en-gb/" /> <xhtml:link rel="alternate" hreflang="en-US" href="https://example.com/" /> <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/" /> </url> <url> <loc>https://example.com/en-ca/</loc> <xhtml:link rel="alternate" hreflang="en-GB" href="https://example.com/en-gb/" /> <xhtml:link rel="alternate" hreflang="en-US" href="https://example.com/" /> <xhtml:link rel="alternate" hreflang="en-CA" href="https://example.com/en-ca/" /> <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/" /> </url> <url> <loc>https://example.com/en-gb/</loc> <xhtml:link rel="alternate" hreflang="en-CA" href="https://example.com/en-ca/" /> <xhtml:link rel="alternate" hreflang="en-US" href="https://example.com/" /> <xhtml:link rel="alternate" hreflang="en-GB" href="https://example.com/en-gb/" /> <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/" /> </url> </urlset>

Jenny Halasz
Jenny Halasz

Si possible, je vous recommande d'implémenter hreflang par le sitemap XML. C'est un moyen beaucoup plus viable et, avec le bon script, ça peut être beaucoup plus facile à entretenir que dans le code de la page. Assurez-vous de disposer d'un compte Search Console, car Google vous avertira si vous avez fait la moindre erreur sur hreflang ! Souvenez-vous aussi que le "lang" dans hreflang signifie langage. Vous pouvez avoir un langage sans définir de région, mais pas l'inverse.

Bonnes pratiques pour l’attribut hreflang

Les meilleures pratiques à suivre pour implémenter l'attribut hreflang sont les suivantes :

  • Référencer la page elle-même et ses variantes traduites.
  • Assurez-vous d'avoir des références d'attribut hreflang bidirectionnelles.
  • Définissez correctement les combinaisons de langage et de région.
  • Mettez systématiquement hreflang=”x-default”.
  • L'attribut hreflang et l'URL canonique doivent fonctionner ensemble.
  • Utilisez des URL absolues quand vous définissez hreflang.
  • N'utilisez qu'une seule méthode pour implémenter l'attribut hreflang.

La meilleure façon de décrire la meilleure pratique pour l’attribut hreflang est en utilisant l’exemple ci-dessous avec un site écrit en français ciblant les utilisateurs en France, Belgique et Suisse.

Voici le code complet de l’attribut hreflang selon l’exemple ci-dessus :

<link rel="alternate" hreflang="fr-fr" href="https://www.exemple.fr/" /> <link rel="alternate" hreflang="fr-ch" href="https://www.exemple.fr/ch/" /> <link rel="alternate" hreflang="fr-be" href="https://www.exemple.fr/be/" /> <link rel="alternate" hreflang="x-default" href="https://www.exemple.fr/" />

Jordy Noll
Jordy Noll

Si votre contenu est disponible dans plusieurs régions pour un seul langage, assurez-vous de cibler une des variantes sans région. Par exemple : si vous avez du contenu en anglais pour les Etats-Unis, le Royaume-Uni et l'Australie, désignez-en un comme étant le site principal pour le contenu en anglais avec la valeur générique hreflang="en", plutôt que hreflang="en-us". Grâce à cela, cette variante sera pertinente pour tous les utilisateurs anglophones du monde, tout en favorisant les variantes britanniques et australiennes dans leurs régions respectives

Référencez la page elle-même, et toutes ses versions traduites

Nous ne répéterons jamais assez : l’attribut hreflang a besoin de définir la langue (et la région) préférée de la page elle-même, et ses versions traduites.

Donc si vous cherchez la page https://www.exemple.fr/ de l’exemple précédent, les versions traduites seront: https://www.exemple.fr/ch/ and https://www.exemple.fr/be/.

Kevin Indig
Kevin Indig

Des erreurs courantes que je vois souvent pour hreflang : ne pas suivre les conseils de Google à la lettre (notamment avoir dans le code pays + langage, comme “de-de” au lieu de “de”) et oublier de faire s'auto-référencer l'attribut hreflang.

Les références bidirectionnelles de l’attribut hreflang .

Chaque référence de l’attribut hreflang doit être bidirectionnelle. Cela signifie que chaque version pointe vers d’autres versions.

Définissez correctement la combinaison de la langue et de la région

La valeure de l’attribut hreflang identifie la langue (dans un format ISO 639-1) et parfois la localisation (dans un format ISO 3166-1 Alpha 2) de l'URL.

David Iwanow
David Iwanow

Faites bien attention aux codes de langage de hrefang. Par exemple, be signifie biélorusse, et non belge. Belge peut être soit nl-be pour la partie néerlandophone, soit fr-be pour la partie francophone. Et veuillez s'il vous plaît arrêter d'indiquer en-uk pour le Royaume-Uni, c'est en-gb !

Il faut toujours définir en premier la langue et ensuite l’emplacement géographique. Si vous faites l'inverse, les moteurs de recherche ne comprendront pas l’attribut hreflang.

De plus, il n’est pas possible de définir un emplacement géographique sans définir la langue. En d’autres mots, la définition suivante est invalide et NE doit PAS être utilisée :

<link rel="alternate" hreflang="be" href="https://www.exemple.fr/be/" />

Définissez toujours l'attribut rel="alternate" hreflang="x-default"

Définissez toujours une page comme page de secours. Vous pouvez le faire en utilisant hreflang=”x-default”.

Dans l’exemple ci-dessus on a:

<link rel="alternate" hreflang="x-default" href="https://www.exemple.fr/" />

Cela signifie que https://www.exemple.fr/ est la page de secours par défaut pour les utilisateurs ne venant ni de Belgique ni de Suisse effectuant une recherche dans d'autres langues que le français.

L’attribut hreflang et l’URL canonique doivent correspondre

Utiliser l’attribut hreflang ne remplace pas la mise en place d’une URL canonique sur une page. Les deux ont besoin d’être défini par exemple:

<link rel="canonical" href="http://www.exemple.fr/" /> <link rel="alternate" href="https://www.exemple.fr/" hreflang="fr-fr" /> <link rel="alternate" href="https://www.exemple.fr/ch/" hreflang="fr-ch" />

Dans cet exemple la page Suisse (https://www.exemple.fr/ch/) est une version alternative de la page actuelle. Sur cette page, la définition ressemblera à cela :

<link rel="canonical" href="http://www.exemple.fr/ch/" /> <link rel="alternate" hreflang="fr-ch" href="https://www.exemple.fr/ch/" /> <link rel="alternate" hreflang="fr-fr" href="https://www.exemple.fr/" />

Cependant, lorsque l’URL canonique pointe vers une page différente de la page actuelle, l’attribut hreflang DOIT le refléter. Par exemple, sihttps://www.exemple.fr/page-accueil est une URL alternative de https://www.exemple.fr/ donc voici à quoi doit ressembler la définition de la version /page-accueil:

<link rel="canonical" href="http://www.exemple.fr/" /> <link rel="alternate" hreflang="fr-fr" href="https://www.exemple.fr/" /> <link rel="alternate" hreflang="fr-ch" href="https://www.exemple.fr/ch/" /> <link rel="alternate" hreflang="fr-be" href="https://www.exemple.fr/be/" />

Par conséquent, https://www.exemple.fr/ch/ et https://www.exemple.fr/be/ doivent tout les deux référencer <link rel="alternate" href="https://www.exemple.fr/" hreflang="fr-fr" />.

Pour résumer, l’URL non-canonique (/page-accueil dans cet exemple) n’est jamais référencé dans la définition de l’attribut hreflang.

Utilisez des URL absolues pour définir l'attribut hreflang

Même si l’élément link ne l'interdit pas, on recommande généralement de ne pas utiliser les URL relatives lorsque l'on définit l’attribut hreflang. Les URL relatives ont plus de chance d’être mal interprétées par les moteurs de recherche. Cette pratique s’applique à d’autres utilisations de l’élément link comme : URL canoniques, les attributs de pagination, AMP et les attributs mobile.

Ne faites pas que traduire, localisez.

Les sites multilingues ne consistent pas seulement en une traduction du contenu. Ils doivent également offrir une expérience cohérente avec la région, ce qui inclut des références culturelles, l'utilisation des bonnes devises, les fuseaux horaires et tant d'autres choses qui permettent au public de s'identifier au contenu.

Barry Adams
Barry Adams

Il est important de garder à l'esprit que les tags hreflang, comme les tags canoniques, sont des repères et non des directives. Il est de notoriété publique que Google ignore l'attribut hreflang si son implémentation lui paraît incorrecte. Hreflang n'est pas destiné à être utilisé comme un raccourci. Un positionnement à l'international demande des efforts et de l'engagement dans la façon dont vous structurez votre présence sur le web et localisez votre contenu. Ne le faites pas par-dessus la jambe, car vous n'en tirerez aucune récompense en termes de classement et de trafic.

N'utilisez qu'une seule méthode pour implémenter l'attribut hreflang

Définissez l'attribut hreflang avec une seule méthode. Par exemple, ne combinez pas l'implémentation dans le HTML avec celle dans le sitemap XML car vous risquez de mélanger les signaux envoyés en cas d'erreur ou de bug.

L'attribut hreflang n'empêche pas l'apparition de contenu dupliqué

C'est une erreur fréquente de croire que l'attribut hreflang empêchera l'apparition de contenu dupliqué. Si vous ciblez les publics anglais britannique, anglais américain et anglais canadien avec le même contenu et un attribut hreflang correct, il n'y a strictement aucune garantie que les moteurs de recherche ne considèrent pas ça comme du contenu dupliqué.
Vous verrez souvent les moteurs de recherche consolider malgré tout les copies de pages.
Qu'est-ce que vous pouvez y faire ? Ré-écrivez le contenu en prenant en compte les différences dans le choix des mots (par exemple personalization pour le marché américain, et personalisation pour le marché britannique) et les régions, comme abordé dans la section précédente.

Questions fréquentes à propos de l’attribut hreflang

  1. Pourquoi les moteurs de recherche ignorent-ils mes attributs hreflang ?
  2. Puis-je utiliser plusieurs attributs hreflang sur une seule page ?
  3. Est-ce utile d'ajouter l'attribut hreflang à mon site si celui-ci n'est que dans une seule langue ?

1. Pourquoi les moteurs de recherche ignorent mes attributs hreflang ?

L’attribut hreflang est plus un signal qu'une directive. Les moteurs de recherche ne sont pas dans l’obligation de suivre vos définitions de l’attribut hreflang même s'ils le font souvent.

2. Puis-je utiliser plusieurs attributs hreflang sur la même page ?

Oui, vous pouvez utiliser plusieurs attributs hreflang sur la même page pour signaler que la page est destinée à être montrée à plus d’un pays ou région. Par exemple, si vous avez une page qui est destinée aux habitants de France et de Belgique, vous pouvez indiquer cela :

<link rel="alternate" hreflang="fr-fr" href="https://www.exemple.fr/" /> <link rel="alternate" hreflang="fr-be" href="https://www.exemple.fr/" />

Inclure un attribut hreflang général pour les utilisateurs français :

<link rel="alternate" hreflang="fr" href="https://www.exemple.fr/" />

3. Est-ce utile d'ajouter l'attribut hreflang à mon site si celui-ci n'est que dans une seule langue ?

Non, l'attribut hreflang est exclusivement destiné aux pages présentant une version alternative destinée à un public différent.
Il n'y a aucun intérêt à l'ajouter, dans la mesure où les moteurs de recherche sont plutôt doués dès qu'il s'agit de saisir quel public vous visez. Si vous ne voulez prendre aucun risque, vous pouvez toujours votre public préféré dans la Google Search Console.

Ressources additionnelles sur l'attribut hreflang

Si vous voulez en savoir plus sur l'attribut hreflang, jetez donc un œil à :

  1. Google guidelines

Commencer votre essai gratuit de 14 jours

Vous pouvez commencer en 20 secondes

Insérez un nom de domaine valide, s'il vous plaît (www.exemple.fr).
  • La carte de crédit n'est pas requise
  • Aucune installation requise
  • Sans engagement