Balises Shopify HREFLANG, applications et guide multi-sites

Il n'y en a que 2 applications sur le marché qui proposent avec succès le tag HREFLANG la mise en oeuvre POUR UNE Shopify.

Et si vous avez des exigences plus complexes, elles peuvent être difficiles à utiliser.

Ce guide vous aidera à naviguer dans HREFLANG sur Shopifyet assurez-vous Google choisit la bonne version à montrer à vos visiteurs internationaux.

Qu'est-ce que HREFLANG et comment ça marche?

• Une balise HREFLANG, est le code utilisé pour dire Google sur différentes versions linguistiques ou géographiques du même page Web.
• Les balises HREFLANG aident à définir des éléments uniques en fonction de la langue qu'ils parlent (en) ou du pays dans lequel ils se trouvent + langue (en-us).
• Google traite chacun URL dans les balises HREFLANG dans le cadre du même URL à des fins de classement, il s'agit simplement de la langue ou de la version locale appropriée de la page à afficher pour les visiteurs.
• L'industrie la mise en oeuvre Je suis plus familier avec l'ajout de balises HREFLANG dans la tête d'un site, c'est donc ce dont je vais discuter ici (pour les en-têtes HTTP et Plan du site la mise en oeuvre, Voir Les conseils de Google ici).

Un exemple de balises HREFLANG (générées à l'aide L'outil d'Aleyda ici):

<lien rel = "alternative" href ="https://matt-jackson.com/" hreflang = "fr" />
<lien rel = "alternative" href ="https://matt-jackson.com/es/" hreflang = "es-es" />
<lien rel = "alternative" href ="https://matt-jackson.com/fr-ca/" hreflang = "fr-ca" />
<lien rel = "alternative" href ="https://matt-jackson.com/F RFR/" hreflang = "fr-fr" />
<lien rel = "alternative" href ="https://matt-jackson.com/" hreflang = "x-default" />

Les parties en gras du code sont les bits sur lesquels se concentrer.

• L'industrie Href value, pointe vers le URL sur mon site (hypothétiquement dans l'exemple) de l'emplacement de chaque langue / page locale spécifique.
• L'industrie HREFLANG La valeur décrit soit la langue, soit la langue + l'emplacement, URL cible.

Comment choisir votre ciblage pays / langue?

Dans un monde parfait, vous auriez des pages locales pour chaque langue + variation d'emplacement possible.

Cependant, vous devez faire correspondre la récompense d'avoir un contenu hyper localisé, contre l'investissement de traductions de plusieurs pages.

Par exemple, Le français est parlé dans de nombreux pays, dont la France et le Canada. Devriez-vous avoir une page unique pour la France et une page unique pour le Canada (français), ou devriez-vous simplement avoir une page en français?

Sur un site de commerce électronique, la devise, les estimations de livraison, peut-être même la disponibilité des stocks et Les produits les gammes peuvent être différentes en France et au Canada, auquel cas avoir une version unique pour chacun serait très logique.

Cependant, si vous vendez des produits numériques ou vendez la même gamme hors d'un emplacement de distribution central, vous pouvez vous en sortir avec un commutateur de devises et plusieurs estimations de livraison en fonction de l'emplacement.

Shopify Apps pour HREFLANG et traduction

Je n'ai trouvé que 2 applications sur la boutique Shopify qui à la fois traduisent (en utilisant la traduction automatique) et implémentent les balises HREFLANG.

Aucun d'entre eux n'est parfait (vous aurez probablement besoin de traductions manuelles pour l'ajuster), et dans de nombreux scénarios, vous devrez personnaliser votre la mise en oeuvre pour compléter le SEO que l' applications produire.

Voici les avantages et les inconvénients de chacun:

WEGLOT

https://apps.shopify.com/weglot

Avantages:

• Développeurs utiles
• Développé sur plusieurs CMS
• Peut exclure URLS de la traduction.
• Balises HREFLANG correctement créées.

Inconvénients:

• Pas d'international Plan du site
• Les URL traduites sont désordonnées: domain.com/ a / l / fr /url
• Différentes versions nationales de la même langue doivent se trouver sur un nouveau domaine / sous-domaine.
• Pas de balise x-default.
• La fonction multi-domaine ne génère pas de balises HREFLANG entre les domaines.

LangShop

https://apps.shopify.com/langshop

Avantages:

• La nouvelle version permet de nettoyer le sous-dossier la mise en oeuvre: domain.com/fr/
• Développeurs utiles
• International Plan du site
• Options du sélecteur de devises

Inconvénients

• Impossible d'intégrer plusieurs magasins pour différentes langues (toutes les traductions et balises pointent vers un seul domaine).
• Différentes versions nationales de la même langue doivent se trouver sur un nouveau domaine / sous-domaine.
• Impossible d'exclure certains urls.

Comment créer manuellement des balises HREFLANG pour Shopify Multi-sites

Si vous avez plusieurs magasins différents ciblant déjà des langues différentes, qui utilisent le même URL structure, et vous voulez simplement ajouter des balises HREFLANG pour les connecter toutes, alors voici ce que vous devez faire:

Je vais utiliser un exemple pour illustrer:

1. Nous avons domain1.com sur 1 compte shopify, ciblant l'anglais
2. Nous avons domain2.fr sur 1 compte shopify, ciblant le français.
3. Nous voulons que notre URL par défaut affichée soit le compte anglais.
4. Chaque URL la chaîne est la même sur chaque site Web (par exemple, la collection de chaussures sur les deux is / collections / shoes)

Nous devons ajouter du code HREFLANG dans le theme.liquid filet pour le site domain1.com et le site domain2.fr.

Voici le code à ajouter dans le section de theme.liquid filet à la fois sites Internet:

<lien rel = "Alternate" hreflang = "x-default" href ="{{canonical_url | replace: shop.domain, 'domain1.com'}}" />

<lien rel = "alternative" href ="{{canonical_url | replace: shop.domain, 'domain1.com'}}" hreflang = "fr" />
<lien rel = "alternative" href ="{{canonical_url | remplacer: shop.domain, 'domain2.fr'}} "hreflang =" fr "/>

Voici un guide vidéo du la mise en oeuvre:

Avantages et inconvénients de la mise en œuvre manuelle multisite

Avantages:

• Installation simple et rapide
• Pas de frais permanents de applications.
• Permet de séparer sites Internet pour différents habitants.
• Permet plusieurs sites Internet ciblant la même langue mais un pays différent (en-us, en-gb, etc.).

Inconvénients:

• Nécessite une traduction manuelle de tous les éléments de contenu et de thème.
• Nécessite un nouveau site pour chaque version linguistique.

Approche hybride Shopify - Utilisation des applications et du multi-magasin pour une traduction rapide et un micro-ciblage

Si vous avez un scénario où vous souhaitez cibler 3 langues sur site1 et 3 langues sur site2, que faites-vous?

Et si vous souhaitez cibler des personnes anglophones dans le UK sur site1, et des anglophones aux USA sur site2 également?

Ensuite, une approche hybride peut vous aider.

Les étapes sont les suivantes:

1. Installez votre traduction préférée app sur vos deux magasins.
2. Activez chaque variante de langue que vous souhaitez sur chacun (ne vous inquiétez pas trop du pays spécifique pour le moment).
3. Personnalisez le code pour refléter le choix spécifique de votre pays sur chacun (voir la section suivante pour ce code).
4. Créez des balises HREFLANG manuelles à partir de store1 à coller dans theme.liquid de store2 (et vice versa) afin que tous les magasins aient toutes les versions des balises HREFLANG (peuvent être ajoutées au fichier d'extrait WEGLOT hreflang à la place).
5. WEGLOT - exclut le remplacement HREFLANG dans les paramètres.

Comment personnaliser WEGLOT pour les balises HREFLANG spécifiques à un pays

Remarque: toutes les personnalisations sont réinitialisées lorsque vous modifiez les paramètres de langue dans WEGLOT, donc enregistrez une copie de vos modifications et lorsque vous devez modifier les paramètres, assurez-vous de les coller par la suite.

Maintenant, c'est différent selon que vous modifiez la langue par défaut ou une langue secondaire.

Pour la langue par défaut:

• Retour vers Shopify Admin> Boutique en ligne> Actions> Modifier le code> Extraits de code> weglot_hreftags.liquid
• Trouver:lien rel = "Alternate" hreflang = "{{original_language}}" href ="{{canonical_url }} ">
• Et remplacez-le par: {% for language in original_language%}lien rel = "Alternate" hreflang = "{{language | replace:" en "," en-gb "}}" href ="{{canonical_url}}"> {% endfor%}
• Parce que

Là où ce code dit «en» et «en-gb», ceux-ci doivent être remplacés respectivement par votre langue par défaut et par votre nouvelle langue spécifique à l'emplacement.

Pour les langues secondaires:

• Retour vers Shopify Admin> Boutique en ligne> Actions> Modifier le code> Extraits de code> weglot_hreftags.liquid
• Rechercher: {% for language in destination_languages%} href ="https: // {{request.host}} / a / l / {{language}} {{canonical_path}}"> {% endfor%}
• Et ajoutez-y vos règles de remplacement de langue supplémentaires dans cette section: hreflang = "{{language | replace:" zh "," zh-CN "| replace:" tw "," zh-TW "}}"
• Exemple de remplacement pour changer fr en fr-fr:
• hreflang = "{{language | replace:" zh "," zh-CN "| replace:" tw "," zh-TW " | remplacer: "fr", "fr-fr" }} "
• Vous pouvez en ajouter autant que vous le souhaitez en utilisant la même méthode.
• Parce que

Là où ce code dit «fr» et «fr-fr», ceux-ci doivent être remplacés respectivement par votre langue par défaut et votre nouvelle langue spécifique à l'emplacement.

Comment ajouter des balises HREFLANG de Site1 dans Site2

Voici donc comment ajouter les balises manquantes à chaque site. Les balises HREFLANG du site 2 doivent donc être ajoutées à site 1, et vice versa (et si vous avez 3 sites, le site 1 doit avoir les balises HREFLANG de site 2 et site 3 ajoutés manuellement, etc.).

L'exemple de la vidéo a un domaine (ukdomain.com) ciblant le Royaume-Uni et un domaine (domain.com) ciblant l'anglais (par défaut, États-Unis et CA), le français (CA) et l'espagnol (États-Unis).

Le code qui doit être ajouté à ukdomain.com pour y ajouter les balises HREFLANG domain.com est:

---

Le code à ajouter au site domain.com, pour ajouter les balises HREFLANG depuis le site ukdomain.com est:

et si le x-default n'a pas était ajouté encore, alors cela devrait également être ajouté:

<link rel="alternate" hreflang="x-defaute "href =" {{canonical_url | remplacer: shop.domain, 'domain.com'}} "/>

Cela entraînera que toutes les balises HREFLANG soient égales dans les deux versions de votre magasin.

Étape finale du WEGLOT - Arrêter le remplacement automatique

Par défaut, sur les versions traduites de la page, WEGLOT reprendra par défaut la configuration d'origine.

Nous devons donc l'empêcher de le faire, pour nous assurer que nos balises personnalisées apparaissent de manière cohérente sur toutes les pages, y compris les versions traduites des pages.

Pour ce faire, allez dans la section «Modifier les traductions» de l'application WEGLOT, cliquez sur Paramètres du projet, et dans la section BLOCS EXCLUS, ajoutez «wg-hreflang »sans guillemets:

Cela garantira que vos modifications sont actives sur toutes les versions traduites, que vous pouvez vérifier dans Chrome en visitant l'une des URL / a / l / à l'aide d'un agent utilisateur Googlebot et en vérifiant les balises HREFLANG dans le code source.

Comment personnaliser LANGACHETEZ les balises HREFLANG spécifiques au pays:

(À venir)

Conclusion et aide supplémentaire

Il existe de nombreuses façons d'implémenter les balises HREFLANG, mais c'est souvent compliqué et difficile à faire sur chaque site (en particulier avec le multi-magasin).

Si vous souhaitez obtenir de l'aide supplémentaire, envoyez-moi un e-mail info@matt-jackson.com, ou envisager mes services de conseil ici.