Sites multilingues et hreflang

Module 3: Les bases techniques d'une page · Temps de lecture : 12 minutes

Objectif pédagogique : À l'issue de cette leçon, vous saurez configurer correctement hreflang pour un site en plusieurs langues ou pour plusieurs pays, et vérifier que les références sont réciproques.

Notions clés : version linguistique, hreflang, code de langue (ISO 639-1), code de pays (ISO 3166-1 alpha-2), code d'écriture (ISO 15924), x-default, réciprocité (référence en retour), référence à soi-même, HTML, en-tête HTTP ou sitemap, adresses distinctes par langue, pas de redirection automatique selon la langue, attribut lang

Le problème : quelle version afficher ?

Bloemenatelier Lotte se développe. Une version anglaise du site voit le jour pour les touristes et les expatriés, ainsi qu'une version allemande pour les clients installés juste de l'autre côté de la frontière. La même page consacrée aux bouquets de mariée existe désormais en trois exemplaires :

https://www.example.com/bruidsboeketten          (néerlandais)
https://www.example.com/en/bridal-bouquets       (anglais)
https://www.example.com/de/brautstraeusse        (allemand)

Pour chaque recherche, un moteur de recherche doit choisir laquelle des trois afficher. Une personne à Cologne qui cherche en allemand devrait obtenir la version allemande, pas la version néerlandaise. Avec hreflang, vous indiquez au moteur de recherche quelles pages sont des versions linguistiques les unes des autres et à quelle langue ou à quel pays chaque version est destinée.

hreflang n'est pas une astuce de classement. Il garantit seulement que la bonne version apparaît au bon endroit. Ce n'est pas non plus un outil de détection de la langue : Google indique qu'il n'utilise ni hreflang ni l'attribut HTML lang pour déterminer la langue d'une page ; il la déduit lui-même du texte. Renseignez tout de même correctement l'attribut lang (<html lang="nl">), pour les navigateurs, les logiciels de traduction et les lecteurs d'écran.

D'abord la base : des adresses distinctes

Google recommande une adresse propre pour chaque version linguistique et déconseille de changer de langue sur une même adresse à l'aide de cookies ou des paramètres du navigateur. La raison est pratique : Googlebot explore généralement depuis les États-Unis. Si le contenu d'une même adresse change selon le visiteur, Googlebot risque de ne voir qu'une seule version.

Pour la même raison, ne redirigez pas automatiquement les visiteurs vers une autre version linguistique en fonction de leur langue ou de leur localisation. Google le déconseille expressément. Un Néerlandais en vacances en Allemagne veut le site néerlandais ; prévoyez plutôt un sélecteur de langue bien visible sur la page et laissez chacun accéder à toutes les versions.

Si vous ciblez des pays plutôt que des langues, avec des domaines distincts comme example.de et example.nl, la même règle s'applique. Les versions n'ont pas besoin d'être sur le même domaine.

À quoi ressemble hreflang

Le <head> de chaque version linguistique contient le même ensemble de lignes :

<link rel="alternate" hreflang="nl" href="https://www.example.com/bruidsboeketten">
<link rel="alternate" hreflang="en" href="https://www.example.com/en/bridal-bouquets">
<link rel="alternate" hreflang="de" href="https://www.example.com/de/brautstraeusse">
<link rel="alternate" hreflang="x-default" href="https://www.example.com/bruidsboeketten">

Quatre règles à connaître :

1. Chaque version se cite elle-même et cite toutes les autres. La page anglaise contient donc exactement les mêmes quatre lignes, y compris la ligne en qui pointe vers elle-même.
2. Les références doivent être réciproques. Si la page néerlandaise pointe vers la page allemande, la page allemande doit pointer en retour vers la page néerlandaise. Google l'indique : si deux pages ne pointent pas l'une vers l'autre, les références sont ignorées. C'est l'erreur la plus fréquente, et c'est pourquoi l'exercice de cette leçon la vérifie.
3. Des adresses complètes. Avec https://. Un chemin comme /en/bridal-bouquets ou //www.example.com/en/... ne compte pas.
4. Dans un <head> propre. Les lignes se trouvent dans le <head> du HTML. Si quelque chose interrompt le head plus tôt, par exemple une balise <img> ou <div> isolée qui n'a rien à y faire, un moteur de recherche peut considérer le head comme terminé et manquer la suite.

Les codes

La valeur de hreflang est un code de langue, éventuellement suivi d'un code de pays :

Le code de langue provient de la norme ISO 639-1 (deux lettres), le code de pays de la norme ISO 3166-1 alpha-2. Les majuscules n'ont pas d'importance, mais l'usage veut la langue en minuscules et le pays en majuscules. Trois pièges :

• Un pays seul ne fonctionne pas. hreflang="be" signifie biélorusse (le code de langue be), pas Belgique. Un pays vient toujours après une langue : nl-BE ou fr-BE.
• en-UK n'existe pas. Le code de pays du Royaume-Uni est GB. Google indique que des codes comme EU, UN ou UK n'ont aucun effet.
• N'indiquez un pays que si les versions diffèrent réellement (prix, devise, livraison, orthographe différents). Si vous avez une seule version allemande pour tout le monde, utilisez simplement de.

x-default

x-default est facultatif. Il désigne la page destinée aux visiteurs auxquels aucune de vos versions ne convient, par exemple une personne qui parle français. Il s'agit souvent de votre langue principale ou d'une page où le visiteur choisit lui-même sa langue.

Trois méthodes, choisissez-en une

Google reconnaît trois méthodes équivalentes pour indiquer hreflang :

1. Dans le HTML, avec des lignes <link> dans le head, comme ci-dessus. C'est la méthode la plus utilisée.

2. Dans l'en-tête HTTP Link, pratique pour les fichiers sans HTML, comme un PDF :

   Link: <https://www.example.com/en/price-list.pdf>; rel="alternate"; hreflang="en"

3. Dans le sitemap, avec des lignes xhtml:link pour chaque <url>. Pratique pour les grands sites, car les pages ne s'en trouvent pas alourdies.

Inutile de les combiner. Si vous en utilisez plusieurs, elles doivent dire exactement la même chose.

hreflang et canonical ensemble

hreflang et canonical (leçon 3.5) fonctionnent ensemble, mais ne les confondez pas :

• Chaque version linguistique a une canonical vers elle-même. La page anglaise n'est pas une copie de la page néerlandaise, elle ne pointe donc pas vers la page néerlandaise comme adresse canonique. Si vous le faites, vous dites « la page anglaise n'existe pas vraiment », et elle disparaît de l'index.
• Les adresses indiquées dans hreflang sont les adresses canoniques des versions. Si hreflang pointe vers une adresse qui redirige, renvoie une erreur 404, porte un noindex ou a une canonical vers une autre page, le groupe est rompu.

Pour déterminer l'adresse canonique, Google privilégie les adresses qui font partie d'un groupe hreflang. Un groupe propre facilite donc aussi votre canonicalisation.

En pratique : laissez le système s'en charger

Gérer hreflang à la main est source d'erreurs : avec dix langues et cent pages, cela représente mille lignes qui doivent toutes être justes. Confiez cette tâche à votre système de site web. L'AI Builder de WebOké ajoute sur chaque page d'un site multilingue des références hreflang vers la même page dans les autres langues, plus un x-default vers la langue principale, et exclut volontairement du groupe une page qui n'a pas d'équivalent traduit. Dans WordPress, les extensions multilingues font de même. Chez d'autres créateurs de sites, vous trouverez cette fonction sous des noms comme « langues » ou « international ». Vérifiez ensuite vous-même que les références fonctionnent dans les deux sens ; c'est ce que fait l'exercice.

Résumé

• hreflang indique quelles pages sont des versions linguistiques ou nationales les unes des autres ; il ne détecte pas la langue et n'est pas une astuce de classement.
• Une adresse propre pour chaque version, pas de redirection automatique selon la langue ou la localisation.
• Chaque version se cite elle-même et cite toutes les autres, avec des adresses complètes, et chaque référence doit être réciproque ; sinon Google l'ignore.
• Codes : langue selon ISO 639-1, éventuellement avec pays selon ISO 3166-1 alpha-2 (en-GB, pas en-UK) ; x-default pour tous les autres.
• Chaque version a une canonical vers elle-même ; hreflang ne pointe que vers des adresses canoniques qui renvoient un code 200.

Quiz

Exercice

Exercice A3.6 : Vos références hreflang sont-elles réciproques ? Saisissez l'adresse d'une page qui existe en plusieurs langues. Le programme rassemble les références hreflang du head et de l'en-tête Link, vérifie les codes et la référence à soi-même, récupère chaque autre version linguistique et contrôle qu'elle pointe en retour, renvoie un code 200, ne porte pas de noindex et a une canonical vers elle-même. Vous n'avez pas de site multilingue ? Utilisez https://european-union.europa.eu/index_nl.

Pour aller plus loin

• Google Search Central, Indiquer à Google les versions localisées de votre page : https://developers.google.com/search/docs/specialty/international/localized-versions
• Google Search Central, Gérer des sites multilingues et multirégionaux : https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites
• Google Search Central, Regrouper les URL en double : https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls
• Codes de langue ISO 639 (Library of Congress) : https://www.loc.gov/standards/iso639-2/php/code_list.php