hreflang : 3 méthodes d’implémentation pour son site

Vous connaissez déjà l’attribut hreflang pour définir les pages équivalentes dans d’autres langues, pays ou régions. Saviez-vous qu’il est possible de créer un sitemap contenant toutes vos pages dans différentes langues ou encore d’utiliser les en-têtes HTTP ? Tour d’horizon de méthodes d’implémentation.

Petit rappel : à quoi sert le hreflang ?

L’attribut hreflang permet d’indiquer aux moteurs de recherche quelle est l’équivalence d’une page traduite dans une autre langue. Cela peut être sur le même domaine, généralement dans des répertoires du type « /fr/ », « /en/ » ou sur un autre domaine. Par exemple :

monsiteweb.fr pour la version française
mywebsite.com pour la version anglaise
meinewebseite.de pour la version allemande

et ainsi de suite …

Ça pourrait également être des sous-domaines :

fr.monentreprise.com
de.monentreprise.com
en.monentreprise.com

et ainsi de suite …

Utiliser les hreflang c’est être quasi certain que l’internaute verra la bonne page, dans sa langue, dans les résultats de recherche.

Méthode 1 : intégration HTML

On place ce balisage des attributs dans l’en-tête head des documents HTML. Ils seront alors de la forme suivante :

<link rel="alternate" hreflang="en" href="http://en.example.com/"/>
<link rel="alternate" hreflang="fr" href="http://fr.example.com/"/>
<link rel="alternate" hreflang="de" href="http://de.example.com/"/>

La définition du pays respecte la norme ISO 3166-2. Vous pouvez également ajouter une langue spécifique. Par exemple pour la Belgique, où l’on parle français et néerlandais on utilisera :

be-FR
be-NL

Notez que pour les pages de sélection langue ou pays, ou pour les pages d’accueil qui redirigent automatiquement l’internaute, vous devez absolument ajouter la ligne suivante :

<link rel="alternate" href="http://example.com/" hreflang="x-default"/>

Exemple d’intégration sur le site chanel.com :

Méthode 2 : utilisation de l’en-tête HTTP

Malheureusement, il est parfois impossible de mettre en oeuvre par l’intégration HTML. Autre solution mais un peu plus compliquée, on peut placer nos hreflang dans l’en-tête HTTP des documents HTML. Elles auront alors la forme suivante :

Link: <http://en.example.com/>; rel="alternate"; hreflang="en",<http://de.example.com/>; rel="alternate"; hreflang="de",<http://fr.example.com/>; rel="alternate"; hreflang="fr"

On sépare nos versions de pages par une virgule et on précise comme pour la première méthode le pays et optionnellement la langue. Ce n’est pas la méthode la plus répandue mais elle fonctionne parfaitement.

Méthode 3 : utiliser un sitemap hreflang

Dans certains cas, nous ne pouvons ni placer nos hreflang dans le code source HTML, ni dans les en-têtes HTTP. La solution consiste alors à créer un sitemap dédié. Je ne le recommande qu’en dernier recours car ça peut être lourd à mettre en place et à maintenir à jour.

Comme pour tous les sitemaps, il est au format XML et normé. Ainsi, le fichier qu’on nommera ici sitemap-hreflang.xml, commencera toujours ainsi :

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

Et naturellement, il se conclura ainsi :

</urlset>

Entre deux, vous ajoutez vos URLs dans les différentes langues. En conservant le même exemple que pour les 2 première méthodes d’implémentation, notre fichier complet donne :

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

N’oubliez pas d’ajouter l’URL dans votre fichier robots.txt :

Sitemap: http://www.exemple.com/sitemap-hreflang.xml

Vous pouvez également le déclarer dans la Search Console, onglet sitemap évidemment 🙂

Conclusion

L’ajout des hreflang est un réel avantage en SEO. Si vous ne pouvez pas implémenter le balisage dans le code source, utilisez un sitemap ou les en-têtes HTTP. Notez qu’il est inutile de cumuler les méthodes, une seule suffit !

 

 

Vous avez aimé ? Partagez 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *