Tout ce que vous devez savoir sur Hreflang et Shopify

Avec de plus en plus de magasins Shopify qui s'internationalisent, il n'a jamais été aussi important de s'occuper de votre classement dans les moteurs de recherche. Bien que l'expansion dans de nouvelles régions crée de nouvelles opportunités de marché passionnantes, elle peut également introduire de sérieux défis en matière de référencement.

Les principaux problèmes de référencement introduits par l'expansion internationale sont :

• Aider les moteurs de recherche à comprendre quelle page doit être classée pour quelle région/langue
• Empêcher les pages spécifiques à une région ou à une langue de créer des problèmes de contenu en double

Dans cet article, nous vous présentons une fonctionnalité appelée Hreflang qui est utilisée pour résoudre ces problèmes de référencement international.

Pourquoi avons-nous besoin d'Hreflang ?

Tout d'abord, pourquoi avons-nous même besoin de hreflang ?

Lorsqu'une marque possède plusieurs sites Web destinés à différentes régions, comment les moteurs de recherche savent-ils quel site est destiné à quelle région ?

Permettez-moi d'utiliser la marque de fitness Gymshark pour illustrer cela. Gymshark utilise Shopify et possède différents sites Web destinés à différents publics :

Royaume-Uni - https://uk.gymshark.com

Allemagne - https://de.gymshark.com

France - https://fr.gymshark.com

Ces sites sont traduits dans leur langue maternelle, ce qui donne à Google un indice considérable à quelle région appartient chaque site. Mais Gymshark a également un site Web américain et un site Web canadien :

États-Unis - https://www.gymshark.com Canada - https://ca.gymshark.com/

Le contenu de ces deux sites Web est en anglais. Alors, comment les moteurs de recherche les différencient-ils du site Web britannique en anglais et s'assurent-ils que chaque site se classe dans la bonne région ?

C'est là qu'intervient hreflang.

Qu'est-ce que l'Hreflang ?

Hreflang est un attribut HTML qui indique aux moteurs de recherche lorsqu'il existe d'autres versions d'une page destinées à un public régional/langue différent.

Hreflang peut être implémenté de différentes manières, mais la plus courante est une simple balise méta qui va sur n'importe quelle page qui a des versions alternatives. Voici un exemple de Gymshark :

 <link rel="alternate" href="https://www.gymshark.com/" hreflang="en-us" />

Cette balise hreflang se trouve sur la page d'accueil UK Gymshark "https://uk.gymshark.com/".

Il indique aux moteurs de recherche que la version américaine de cette page se trouve sur "https://www.gymshark.com/".

La balise hreflang contient deux attributs clés :

1 - Href Le href est un lien vers la page alternative. Il doit s'agir de l'adresse URL complète et d'une page de travail. Il indique aux moteurs de recherche "il s'agit d'une version alternative de la page actuellement consultée".

2 - Hreflang L'attribut hreflang contient le code langue (ISO 639-1) et éventuellement le code pays (ISO 3166-1) du public cible de la page alternative. Le code pays est facultatif mais le code langue est obligatoire.

Quelques exemples d'attributs hreflang utilisant différentes combinaisons de ciblage langue/pays :

• fr - anglophones
• en-GB - anglophones au Royaume-Uni
• fr-FR - francophones en France
• en-US - anglophones aux États-Unis
• it - locuteurs italiens
• it-CH - Les italophones en Suisse.

En rassemblant le « href » et le « hreflang », les moteurs de recherche sauront que cette URL alternative (le href) est destinée à ce public spécifique (le hreflang).

Pages alternatives

Il est important de se rappeler que hreflang fonctionne au niveau de la page et non au niveau du domaine. Les balises hreflang déclarent des « pages alternatives », et non des « sites Web alternatifs ». De nombreux sites Web utilisent des balises hreflang pour déclarer des pages alternatives spécifiques à une langue/région sur le même domaine.

Par exemple, vous pouvez utiliser des sous-dossiers pour héberger d'autres versions linguistiques/régionales de votre site. Voici comment Apple a configuré ses sites Web internationaux à l'aide de dossiers :

• Royaume-Uni : https://www.apple.com/uk/
• ES : https://www.apple.com/es/
• FR : https://www.apple.com/fr/

X-Défaut

Il existe une valeur de repli hreflang spéciale appelée 'x-default'. Pensez à 'x-default' car les moteurs de recherche de page Web doivent se classer lorsqu'aucun autre lien hreflang ne correspond à la langue/région du chercheur.

En utilisant à nouveau Gymshark comme exemple. Ils ont un magasin pour le reste du monde situé sur row.gymshark.com. Ceci est déclaré comme x-default.

 <link rel="alternate" href="https://row.gymshark.com/" hreflang="x-default" />

Ainsi, si quelqu'un effectue une recherche dans une langue/un lieu qui n'est pas déclaré dans les balises hreflang de Gymshark, Google affichera très probablement le magasin RoW de Gymshark.

Avez-vous besoin d'ajouter Hreflang ?

Vous n'avez besoin d'ajouter des balises Hreflang que lorsque vous avez deux pages presque identiques qui desservent des publics linguistiques/régionaux différents. S'il n'y a pas de version alternative d'une page, vous n'avez pas besoin d'ajouter des balises hreflang.

Règles hreflang

Pour que les balises hreflang soient validées, elles doivent suivre des règles spécifiques :

1 - Liens de retour - Si une page hreflang est liée à une autre page, la page alternative doit hreflang renvoyer à la première page. Par exemple, si un Gymshark britannique a un lien hreflang pointant vers une page Gymshark allemande, la page allemande doit avoir un lien hreflang vers la version britannique.

2 - Pages de travail - Toute page vers laquelle vous créez un lien hreflang doit renvoyer un code de statut 200. En d'autres termes, les liens hreflang doivent être des pages de travail.

3 - Balise Hreflang auto-référençante - Toute page qui comprend des liens hreflang doit également avoir un lien hreflang vers elle-même. Nous appelons cela un lien hreflang auto-référencé. Le lien hreflang auto-référençant doit inclure la déclaration standard de langue/pays.

Défis hreflang

Maintenant que nous avons établi ce qu'est hreflang et comment il fonctionne, nous pouvons expliquer pourquoi il s'agit d'une partie si complexe du référencement. En fait, hreflang est probablement l'une des parties les plus difficiles du référencement à maîtriser.

Voici un tweet de John Mueller, analyste des tendances pour les webmasters de Google, expliquant à quel point le hreflang peut être difficile !

L'ajout de balises est assez simple, mais maintenir des balises hreflang qui respectent les 3 règles ci-dessus peut être extrêmement difficile.

Pour toujours valider, les balises hreflang entre les différentes pages doivent être synchronisées. Quelque chose d'aussi simple que de changer une URL pourrait rompre la connexion hreflang entre deux pages.

Lorsque vous avez plusieurs sites Web, avec des pages dynamiques et gérés par différentes équipes, vous pouvez commencer à imaginer à quel point cela devient complexe. Si vous avez plusieurs sites Web, vous devez vous assurer que vos équipes se coordonnent pour vous assurer que vos balises hreflang ne se cassent pas !

Erreurs de hreflang

Nous traitons tout le temps avec des configurations hreflang cassées. Voici les problèmes de hreflang les plus courants que nous rencontrons :

Aucun lien de retour

De loin, le problème Hreflang le plus fréquent que nous rencontrons concerne les pages où il n'y a pas de liens Hreflang de retour. C'est là que vous devez être organisé pour vous assurer que vos balises hreflang fonctionnent toujours. Si le chemin de l'URL change sur une page mais pas sur l'autre, les balises hreflang ne seront plus synchronisées.

Non-200 pages

Les balises hreflang doivent pointer vers des pages de travail qui renvoient une réponse de serveur 200. Au fur et à mesure que votre site Web évolue, les URL changent. Cela cassera vos balises hreflang, donc si vous retirez et redirigez des pages, assurez-vous également de mettre à jour toutes les balises hreflang.

Aucune balise Hreflang auto-référençante

Cela peut sembler étrange, mais si une page contient des balises hreflang, elle doit également inclure une balise hreflang auto-référencée. Il s'agit d'une erreur courante commise par de nombreux sites Web.

Comment vérifier les balises hreflang

Vérificateur de balises hreflang

Le moyen le plus simple d'auditer les balises hreflang consiste à utiliser une extension Chrome appelée Hreflang Tag Checker. Une fois l'extension installée, il vous suffit de visiter n'importe quelle page et d'appuyer sur l'icône de la barre d'outils. L'extension vérifiera alors s'il y a des balises hreflang sur l'URL actuelle.

La meilleure fonctionnalité de cet outil est qu'il explorera les liens hreflang et confirmera qu'ils passent les contrôles de validation.

Grenouille hurlante

Si vous souhaitez auditer les balises hreflang à grande échelle, alors Screaming Frog est votre outil de choix. Screaming Frog explorera un site Web et validera toutes les balises hreflang découvertes lors de l'exploration.

Console de recherche

Un rapport sur le ciblage international est caché dans la section Rapports hérités de la Search Console. Pour accéder à ce rapport, dans le menu de gauche, accédez à 'Legacy Tools & Reports > International Targeting'.

Ce rapport indiquera le nombre de balises hreflang présentes sur votre site Web et indiquera où se trouvent les erreurs hreflang.

Différentes façons d'ajouter hreflang

Il y en a plus d'un pour implémenter Hreflang. La méthode de balise HTML décrite ci-dessus est de loin le moyen le plus simple de configurer hreflang, mais il existe deux approches alternatives :

Plan du site XML

Vous connaissez peut-être les sitemaps XML. Votre sitemap XML peut être mis à jour pour inclure des déclarations hreflang pour chaque page du sitemap. Pour les grands sites Web dotés de systèmes complexes, cela peut souvent être l'approche la plus simple.

En-têtes HTTP

Chaque fois qu'un navigateur Web visite une page, le serveur renvoie des informations sur cette page à votre navigateur Web. C'est ce qu'on appelle la réponse HTTP. Vous pouvez configurer votre serveur pour renvoyer des informations hreflang dans la réponse d'en-tête HTTP.

Comment ajouter Hreflang à Shopify

Alors, comment ajoutez-vous réellement des balises hreflang à Shopify ? Comme la plupart des systèmes de gestion de contenu, Shopify a des nuances qui affectent ce que vous pouvez et ne pouvez pas faire sur la plateforme. Bien qu'il soit possible d'ajouter hreflang à Shopify via les méthodes XML Sitemap ou HTTP Headers, cela nécessite une configuration technique importante, nous ne le recommandons donc pas.

Pour les sites Web Shopify, notre approche recommandée pour la mise en œuvre de Hreflang est toujours les balises HTML. L'ajout physique de balises hreflang à votre site est assez simple, mais vous devez le faire de manière à garantir que vos balises hreflang sont toujours valides. Rappelez-vous les trois règles ci-dessus :

• Il doit y avoir un lien hreflang de retour depuis la page alternative
• La page alternative doit être une URL fonctionnelle
• Il doit y avoir une balise hreflang auto-référençante sur toute page qui comprend des balises hreflang

Ajouter Hreflang à Shopify via une application

Certaines applications Shopify ajoutent des balises Hreflang à vos pages pour vous. Les applications de traduction telles que Weglot et Langify généreront automatiquement vos balises Hreflang et les ajouteront à vos pages.

Bien que les applications puissent ajouter des balises hreflang à votre boutique Shopify, d'après notre expérience, ce n'est pas la meilleure méthode. L'approche de l'application ne fonctionne que lorsque vous avez un seul magasin qui propose plusieurs langues. La plupart des applications ne fournissent pas de ciblage hreflang langue + pays et ne prennent pas en compte plusieurs magasins dans différents domaines. Les applications Shopify ne sont pas notre approche recommandée pour hreflang.

Ajouter des balises Hreflang à votre fichier theme.liquid

Si vous avez deux magasins avec des pages et des URL identiques (où seul le domaine est différent), l'ajout de balises hreflang valides peut être assez simple. Comme les deux sites Web sont des clones complets, vous savez que pour chaque page du site A, il existe un équivalent sur le site B.

Vous pouvez donc modifier votre code de thème pour construire dynamiquement vos balises hreflang en utilisant le chemin URL de la page en cours de consultation.

C'est ce que fait le code liquide ci-dessous :

 <link rel="alternate" hreflang="x-default" href="{{ canonical_url | replace: shop.domain, 'www.mystore.com' }}" /> <link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.mystore.com' }}" hreflang="en-GB" /> <link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.us.mystore.com' }}" hreflang="en-US" />

Cet extrait de code peut être ajouté dans le section de votre fichier theme.liquid. Vous devez remplacer les instances 'mystore.com' par vos noms de domaine réels. Lorsque cet extrait est en place, vos pages afficheront des balises hreflang en utilisant la page canonique pour construire le chemin de l'URL.

Comme cette méthode implique la modification du code de votre site Web, si vous choisissez cette approche, nous vous recommandons fortement d'engager un expert Shopify pour appliquer le changement pour vous.

Utiliser un champ personnalisé (approche Shopify Hreflang recommandée)

Comment ajouter des balises Hreflang sur plusieurs sites Web Shopify avec des milliers de produits où les descripteurs d'URL ne correspondent pas ? Vous n'aurez pas le temps d'ajouter des balises hreflang page par page et une application ne peut pas le faire pour vous.

Dans ce scénario, nous vous recommandons d'utiliser une autre application appelée Champs personnalisés. Avec les champs personnalisés, vous pouvez créer de tout nouveaux champs méta sur votre site Web. Chaque fois que nous traitons des situations complexes hreflang sur Shopify, nous recommandons à nos clients d'utiliser des champs personnalisés pour créer un métachamp hreflang. La valeur du champ méta hreflang est sortie dans le partie de la page.

Avec cette approche, vous pouvez créer vos propres balises hreflang dans Excel, puis les ajouter directement dans le champ personnalisé, page par page.

Encore mieux, si vous avez le plan Custom Fields Plus, vous pouvez importer vos balises hreflang de produit via un téléchargement csv. Nous utilisons régulièrement cette approche pour télécharger des milliers de balises hreflang de produits sur Shopify en quelques minutes.

Bien que cette approche ne soit pas la plus simple car vous devez configurer le champ méta personnalisé (qui nécessite un expert Shopify) et créer vos propres balises hreflang, elle est de loin la plus efficace pour la gestion Shopify hreflang à grande échelle. Si vous souhaitez créer facilement vos propres balises hreflang, nous vous recommandons le générateur de balises hreflang gratuit d'Aleyda Solis.

Domaines internationaux (Nouveau)

Shopify a récemment annoncé une nouvelle fonctionnalité appelée Domaines internationaux. Ce développement permettra aux marchands Shopify d'afficher leur boutique sur un autre domaine/sous-domaine ciblant une langue/un pays différent.

Avec International Domains, vous enregistrez un autre domaine/sous-domaine en utilisant le code ISO à 2 lettres du pays cible (par exemple, gb.votredomaine.com). Shopify configurera alors automatiquement les balises hreflang sur chaque domaine/sous-domaine. Des instructions complètes sur la façon de procéder sont disponibles sur Shopify.

Les domaines internationaux ont quelques inconvénients. Vous devrez héberger exactement les mêmes pages et produits sur vos domaines, ce qui ne conviendra pas à tous les marchands. Vous ne pourrez pas non plus modifier votre contenu dans différents domaines (à l'exception des traductions).

Cela étant dit, c'est un énorme pas en avant et cela montre que Shopify a écouté les marchands. Nous sommes sûrs qu'avec le temps, International Domains deviendra notre solution hreflang recommandée pour Shopify.

Besoin d'aide avec hreflang ?

La gestion de hreflang est l'une des parties les plus complexes du référencement. Notre équipe SEO gère avec succès le référencement international pour des dizaines de sites Web. Si vous avez besoin d'aide pour optimiser votre référencement international, faites-le nous savoir.