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

<link rel=”alternate” hreflang=”en” href=”https://www.exemple.com/” />
<link rel=”alternate” hreflang=”fr” href=”https://www.exemple.fr/” />

Vous pouvez définir une page de soutien au cas où aucune page n’est disponible pour la population que vous ciblée. Cela est 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 ces versions traduites

Nous ne pouvons pas le répéter 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 ces 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 de l’attribut hreflang bidirectionnelle.

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

Définissez correctement la combinaison de la langue et de l’emplacement

La valeure de l’attribut hreflang identifie la langue (dans un format ISO 639-1) et également sans doute l’emplacement (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 le faites dans l’autre sens, les moteurs de recherche ne font pas comprendre 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”

Toujours définir quelle page vous voulez donner comme page de soutien. Vous pouvez le faire en utilisant hreflang=”x-default”.

Dans l’exemple ci-dessous on voit :

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

Cela signifie que https://www.exemple.fr/ est la page de soutien par défaut pour les utilisateurs de tous les pays autre que la Belgique et la Suisse recherchant dans n’importe quelle langue ou emplacement géographique.

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 que 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/” />

Du coup, 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 ce n’est pas contre la spécification de l’élément link le consensus général est de ne pas utiliser les URL relatives lorsqu’on définit l’attribut hreflang. Les URL relatives ont plus de chance d’être mal interprété par les moteurs de recherche. La même bonne pratique s’applique à d’autres utilisation 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 à une traduction du contenu. Même ils offrent également une expérience localisé ce qui inclut des références culturelles, devises, fuseau horaire et tout ce qui fait sens pour la population locale.

Questions fréquentes à propos de l’attribut hreflang

  1. Pourquoi les moteurs de recherche ignorent mes attributs hreflang ?
  2. Can I use multiple hreflang attributes for one page ?

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

L’attribut hreflang est plutôt un signal qu’une directive. Les moteurs de recherche ne sont pas dans l’obligation de suivre vos définitions de l’attribut hreflang mais souvent ils le font.

2. Est-ce que je peux 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é à être montré à plus d’un pays ou région. Par exemple, si vous avez une page qui est destiné pour les habitants de France et de Belgique donc 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

Êtes-vous prêt à essayer ContentKing ?

Découvrez ce qui se passe sur votre site web.
Insérez un nom de domaine valide, s'il vous plaît (www.exemple.fr).