E-commerce : Shopify et le SEO (3ème partie)

Shopify propose depuis septembre 2021 une nouvelle interface plus aboutie pour assurer la gestion du site dans différents marchés. Attention : cette option n'est accessible qu’à partir du second abonnement.

Cette nouvelle fonctionnalité permet de :

• Remplir automatiquement les hreflang entre les TLD, répertoires ou sous domaines ;
• Générer un Sitemap XML pour chaque langue et pays à mettre dans la Search Console ;
• On peut détecter l’IP de l’utilisateur pour le renvoyer (en 302) vers le bon pays (sauf en Union européenne pour cause de CNIL).

La plateforme SAAS recommande tout de même de compléter ce dispositif avec une application de Géolocalisation permettant de pousser une recommandation à l’utilisateur dans le cas ou l’IP ne correspond pas à la version pays où il atterrit.

Multi-store Hreflang tags : une app Shopify prometteuse

Pas de panique, pour les utilisateurs qui n’ont que l’abonnement “Basic” à 29$ par mois, une application a fait son apparition avant l’été 2021 permettant de :

• Traduire les contenus automatiquement ou de les modifier manuellement ;
• Traduire les URL dans la langue ;
• Obtenir les Hreflang sur des domaines différents avec la version « Advanced Shopify » ;
• Supprimer les balises Hreflang natives du CMS ;
• Respecter le format des URL  attendu par Google (ISO 639-1) :
  • En : contenu en anglais sans indication géographique ;
  • En-au : contenu en anglais pour les utilisateurs australiens ;
  • Es-mx : contenu en espagnol pour les utilisateurs mexicains.

Optimisation des images

Il est important d'optimiser vos images pour la recherche organique. Vous seriez surpris de savoir combien de personnes recherchent des produits via Google image. Ils tapent une requête dans Google, passent à la recherche d'images et leur parcours d'acheteur commence.

Pour vous assurer que vos images se chargent rapidement et pour que les moteurs de recherche "comprennent rapidement" ce qu’elles représentent, nous vous conseillons quelques bonnes pratiques :

1. Servez des images par l'intermédiaire d'un CDN - Shopify fait cela par défaut ;
2. Incluez des images dans votre plan de site XML ;
3. Compressez les images : Shopify ne le fait pas par défaut ;
4. Utilisez un nom de fichier descriptif et le bon type de fichier image (exemple WebP ou jpg) et redimensionnez les images à une taille d’écran : du mobile à un écran d’ordinateur - Il est possible de réaliser vous-même toutes ces étapes avant le téléchargement ;
5. Définissez l'attribut ALT de l'image et ayez un texte pertinent à proximité de l'image, modifiable depuis le BackOffice de Shopify.

Images et plans de site XML

Shopify inclut automatiquement les images dans le Sitemap XML de votre produit afin que les moteurs de recherche puissent trouver et indexer rapidement vos images. Il y a cependant deux inconvénients :

1. En incluant les images dans le Sitemap XML de votre produit, il devient plus difficile de savoir combien d’images ont été indexées depuis la Search Console de Google. L'idéal serait d'avoir un plan de site XML dédié uniquement à vos images.
2. Le logiciel Shopify n'inclut qu'une seule image pour chaque produit dans le Sitemap XML, ce qui nuit à la découverte et à l'indexation des autres images.

L'application Image Sitemap corrige ces défauts.

Il existe des applications Shopify pour compresser automatiquement les images et générer des attributs ALT d'image. Nous vous recommandons vivement  de les consulter :

• SEO Image Optimizer ;
• Bulk Image Edit ;
• Smart Image Optimizer.

Que penser des options d'optimisation de l'image de Shopify ?

Pour les petites boutiques, les fonctionnalités standard de Shopify seront probablement suffisantes. À l’inverse, pour les propriétaires de sites à plus grande volumétrie, souhaitant avoir plus de contrôle sur le processus d'optimisation des images pour le rendre plus efficace sur tous les plans, les applications citées dans cette section sont nécessaires pour y parvenir. En bref, avec Shopify, il vous suffit de télécharger quelques modules complémentaires pour optimiser toutes vos images.

Balises de données structurées

Les données structurées peuvent être décrites comme des données organisées selon un certain format prédéfini.

Schema.org est un balisage structuré qui aide les moteurs de recherche à mieux comprendre votre contenu. Il peut présenter des extraits améliorés qui vous feront ressortir dans les pages de résultats des moteurs de recherche.

La mise en œuvre des balises Schema.org dans Shopify

Vous pouvez bénéficier d'un support “prêt à l'emploi” pour le balisage Schema.org, car il est intégré directement dans les thèmes proposés par Shopify. Si vous avez au préalable renseigné toutes les informations sur votre entreprise et vos produits, ces informations seront traitées automatiquement par la plateforme.

En revanche, si la balise Schema.org n'est pas présente dès le départ, vous pouvez soit demander à un expert de Shopify de l'ajouter à votre thème, soit utiliser une application à cet effet. L'utilisation d'une application est généralement la meilleure solution, car elle permet un contrôle plus précis du balisage ajouté à vos pages.

Types de schémas utiles pour les boutiques :

• Produit ;
• Avis ;
• Articles ;
• Local Business.

Voici un exemple de module qui ajoute le balisage JSON-LD : SEO Meta Manager

Si vos avis sont gérés par des applications d'évaluation tierces (et non par une application native de Shopify), il est recommandé d'utiliser une implémentation JSON-LD qui récupère ces données pour faire apparaître vos évaluations de produits dans les SERP. Pour cela, il existe une application très intéressante, JSON-LD for SEO, qui s’utilise pour tous les types de balise Schema.org que vous souhaitez utiliser. Actuellement, c’est l’application la plus efficace.

Mise en œuvre des cartes Open Graph et Twitter

Les cartes Open Graph et Twitter sont également des formes de données structurées. Elles vous permettent de contrôler vos extraits d'information lorsque vos URL sont partagées sur les médias sociaux. Si vos snippets sont attrayants, vous serez plus visibles  sur ce canal.

Page d'accueil

Pour vos données Open Graph et Twitter Card, Shopify réutilise ce que vous avez renseigné pour le titre ainsi que pour la balise meta "description" de votre page d'accueil.

Définir le graphique ouvert et l'image de la carte Twitter par défaut :

1. Connectez-vous au Back Office de Shopify ;
2. Allez à la boutique en ligne > Préférences ;
3. Téléchargez votre image dans la section Image de partage social.

Zone "préférences" pour optimiser vos images 

Ce n’est pas tout, vous devrez également définir les données de l'Open Graph et de la Twitter Card pour votre collection et vos pages de produits. La bonne nouvelle ici est que pour la plupart des thèmes de Shopify, ces données sont automatiquement ajoutées en fonction des propriétés de la collection et des produits que vous avez définies.

Que penser du support de données structurées de Shopify ?

Shopify gère les données structurées de façon simpliste. Et si vous souhaitez aller au-delà des bases, vous avez la possibilité de personnaliser votre thème et vos applications pour gagner en contrôle grâce aux plugins disponibles.

Vitesse d'affichage des pages (Web Performance)

Shopify est un service hébergé qui fonctionne sur une infrastructure massive, dont un puissant CDN, et qui utilise fortement la mise en cache. Une solution assez complète !

Bien que Shopify travaille constamment à l'amélioration storefront response times comme pour toute plateforme - si vous encombrez votre thème, téléchargez des images surdimensionnées et installez de nombreuses applications / plugins, vous pouvez parfois paralyser votre boutique.

Recommandations :

• Thème : si vous avez un budget suffisant, utilisez un thème personnalisé et construisez-le à partir de zéro afin de savoir exactement ce qu'il contient. Si vous ne pouvez pas vous le permettre, choisissez le thème le plus léger que vous pouvez trouver. Si tous les thèmes que vous pouvez choisir sur Shopify sont réactifs, il n'y a pas de contrôle de qualité en ce qui concerne la vitesse des pages.
• Applications / plugins : si vous pouvez éviter d'utiliser des applications, alors faites-le. Les applications sont l'une des raisons les plus courantes pour lesquelles les boutiques Shopify se chargent lentement (comme sur WordPress). Par exemple, ajouter des extraits dans le code source de la page est bien mieux que de passer par une application, car les applications ne font qu'ajouter du code parfois non utilisé qui surcharge la boutique.
• Optimisation des images : comme nous l'avons déjà expliqué précédemment, vous devez optimiser vos images pour qu'elles soient le moins lourdes possible. En outre, mettez en œuvre le lazy loading pour vos images.
• Suivi : déplacez tous les scripts de suivi vers Google Tag Manager afin de réduire le nombre de requêtes que les pages feront.

Régulièrement, les scripts empêchent les boutiques Shopify de se charger rapidement, car les navigateurs web arrêtent d'analyser le contenu des pages lorsqu'ils rencontrent des scripts à exécuter.

Heureusement que les scripts Shopify peuvent être optimisés pour une exécution plus rapide lorsque vous utilisez PageSpeed Insights :

Exemple de script Shopify identifié sur Page Speed Insight

Pour accélérer considérablement le temps de chargement d'une page, exécutez la récupération du script en parallèle à l'analyse, et retardez l'exécution du script après le chargement complet de la page. Utilisez les attributs de la balise JavaScript async et defer pour contrôler le timing et l'exécution des scripts plus lents.

Outils permettant d'améliorer la vitesse des pages

Il existe différents outils qui analysent vos pages et dressent la liste de ce que vous pouvez faire pour les améliorer. Les plus courants sont les suivants :

• Rapport de vitesse de la boutique en ligne Shopify, basé sur les mesures de performance de Google Lighthouse.
• Google PageSpeed Insights
• GTMetrics
• Pingdom
• Core Web Vitals Dashboard

N'oubliez pas que ces outils peuvent recommander des améliorations sur lesquelles vous n'avez aucun contrôle, puisque vous ne pouvez pas apporter d'ajustements à l'infrastructure de Shopify.

En fin de compte, la vitesse des pages est un élément essentiel pour offrir une excellente expérience (UX) à vos visiteurs. Et même si son importance est très minime en tant que facteur de classement SEO aujourd'hui, elles sera peut-être plus forte dans les années qui viennent.

Que penser des capacités de vitesse de page de Shopify ?

Shopify fournit une plateforme d'hébergement rapide qui exploite la mise en cache.

En pratique, ce sont généralement les propriétaires qui ralentissent leurs propres boutiques avec des thèmes gonflés, des images non compressées et beaucoup trop d'applications par fois plus ou moins utiles.

Compte tenu de la nature fermée de Shopify, lorsque vous souhaitez étendre les fonctionnalités, vous devez généralement trouver une application/extension (disponible sur le marché ou développée par vos soins) pour ajouter des fonctionnalités à votre site web.

Ces extensions nécessitent souvent d'ajouter du CSS/JS/HTML à votre site web, ce qui pourrait impacter la vitesse de chargement de votre page et donc  potentiellement créer une faille si vous chargez les ressources des extensions via leurs CDN. Pour éviter cela, nous vous recommandons de vérifier l'impact de vos extensions sur les performances et la sécurité de votre site web avant de le publier.

JavaScript côté client

Bien que les moteurs de recherche sachent maintenant effectuer la rendition d'une page chargée par du JavaScript, il est recommandé d'utiliser un rendu HTML côté serveur ou une solution de pré-rendu, afin de pouvoir servir du HTML classique aux moteurs de recherche pour rendre leur processus d'exploration et d'indexation aussi fluide et rapide que possible. Lorsque votre site web retient l'attention des moteurs de recherche, vous devez absolument en tirer le meilleur parti !

Le rendu de JavaScript consomme beaucoup de ressources, de sorte que les moteurs de recherche n'y consacrent qu'une quantité relativement faible de ressources. Ne soyez donc pas surpris si les moteurs de recherche ont besoin de plusieurs semaines, voire de plusieurs mois (dans le cas de plusieurs milliers de produits) pour explorer et indexer entièrement votre boutique.

Schéma du fonctionnement d'un moteur

N'oubliez pas : si votre contenu n'est pas indexé, il ne peut pas être classé, et vous ne pouvez donc pas obtenir de visiteurs par le biais d'une recherche.

Faites attention au JavaScript côté client lorsque vous choisissez un thème Shopify, ou lorsque vous en avez un sur mesure. Faites en sorte de ne pas vous fier au rendu JavaScript, afin que les moteurs de recherche puissent mieux comprendre le contenu de votre site.

Attention au choix de vos applications

La plupart des applications qui ajoutent un filtrage des produits aux boutiques Shopify utilisent le JavaScript côté client, mais l'application Boost Commerce est différente : elle continue à utiliser la grille Shopify native, qui ne nécessite pas que les moteurs de recherche rendent le JavaScript pour qu'ils "comprennent" quels produits sont sur la page.

Conclusion

Nous voici rendus à la fin de cette série de 3 articles sur Shopify et le SEO. pour résumer, on peut dire que cette plateforme est en constante évolution avec l’une des têtes de proue Jackson Lo, en charge de l’évolution de la plateforme !  Elle évolue favorablement et devrait pallier dans les mois qui viennent les quelques imperfections qui restent actuellement.

Bien que les SEO plus avancés devront exploiter certaines solutions de contournement avec la personnalisation des thèmes et de ses applications, nous n'avons trouvé aucun problème grave sur Shopify qui vous empêche de réussir le référencement de sa boutique. Alors, à vos claviers ! 🙂