Que pouvez-vous attendre de cet article ?

Le lien d’attribut rel="alternate" hreflang="x" est utilisé pour indiquer dans quelles langues est votre contenu ainsi que pour quels emplacement géographique votre contenu est destiné. Cela permet aux moteurs de recherche de déterminer quel contenu offrir à leurs différentes audiences et est essentiel lorsque le contenu d’un site existe dans plusieurs version localisés. Dans cet article nous allons voir comment utiliser ce lien d’attribut.

Quel est l’attribut rel=”alternate” hreflang=”x” ?

L’attribut rel="alternate" hreflang="x” est utilisé pour indiquer dans quelles langues est votre contenu ainsi que pour quels emplacement géographique votre contenu 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. Actuellement, seulement Google et Yandex supporte l’attribut hreflang.

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 le rendre clair aux yeux des moteurs de recherche, pour cela l’utilisation de l’attribut hreflang est possible (fr et en dans ce cas).

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).

Mis à part, faire apparaître de manière précise aux moteurs de recherche quelles versions offrir aux consommateurs, l’attribut a comme bénéfice supplémentaire de prévenir les problèmes de contenu dupliqué. Surtout lorsque vous ciblez différents emplacements géographique parlant la même langue (tel que la France et la Suisse, comme dans l’exemple utilisé précédemment) c’est important de rendre cette distinction claire, vu que le contenu peut apparaître très similaire et peut confondre les moteurs de recherche.

L’anatomie de l’attribut hreflang

Regardons ensemble ce à quoi l’attribut hreflang ressemble. Voici 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" explique parfaitement qu’une relation entre les page est décrite. 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. Elle définit la langue ou une combinaison de la langue et de l’emplacement géographique.
  3. La partie href décrit l’URL de la page de la page pour la population précédemment définie.

Comment implémenter l’attribut hreflang

L’attribut hreflang peut être définie en utilisant :

  1. L’élément du lien dans la section <head> de vos pages HTML.
  2. En-tête HTTP
  3. XML sitemap

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 que la page est disponible en espagnol, en anglais et en français, la version définitive serait alors comme ci-dessous et sera présente dans chacune des versions de la page :

L'attribut hreflang indique les versions traduites d'une page
L'attribut hreflang indique les versions traduites d'une page.
<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 valeure x-default .

Bonnes pratiques pour 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 comment bien définir l’attribut hreflang selon l’exemple donné au 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/” />

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

Nous ne répéterons jamais assez : l’attribut hreflang a besoin de définir la langue préférée et l’emplacement géographique 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/.

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.

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

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.

URL absolues

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.

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 ?

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/" />

Sources

  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