4 erreurs courantes commises par les sites Web de commerce électronique en utilisant JavaScript

En outre, la navigation paginée peut être encore plus conviviale que le défilement infini. La liste numérotée des pages de catégories peut être plus facile à suivre et à naviguer, en particulier sur les grands sites Web de commerce électronique. Pensez simplement à la durée de la fenêtre d’affichage sur Douglas.de s’ils utilisaient le défilement infini sur la page ci-dessous :

2. Générer des liens vers des carrousels de produits avec JavaScript

Les carrousels de produits avec des articles connexes sont l’une des fonctionnalités essentielles du site Web de commerce électronique, et ils sont tout aussi importants du point de vue de l’utilisateur et de l’entreprise. Leur utilisation peut aider les entreprises à augmenter leurs revenus en proposant des produits connexes susceptibles d’intéresser les utilisateurs. Mais si ces sections dépendent trop de JavaScript, elles peuvent entraîner des problèmes d’exploration et d’indexation.

Coupable : Otto.de

J’ai analysé l’une des pages de produits d’Otto.de pour déterminer si elle incluait des éléments générés par JavaScript. J’ai utilisé l’outil What Would JavaScript Do (WWJD) qui affiche des captures d’écran de ce à quoi ressemble une page avec JavaScript activé et désactivé.

Les résultats des tests montrent clairement qu’Otto.de s’appuie sur JavaScript pour proposer des carrousels de produits connexes et recommandés sur son site Web. Et d’après la capture d’écran ci-dessous, il est clair que ces sections sont invisibles avec JavaScript désactivé :

Comment cela peut-il affecter l’indexation du site ? Lorsque Googlebot manque de ressources pour rendre les liens injectés par JavaScript, les carrousels de produits ne peuvent pas être trouvés, puis indexés.

Vérifions si c’est le cas ici. Encore une fois, j’ai utilisé la commande “site :” et tapé le titre de l’un des carrousels de produits d’Otto.de :

Comme vous pouvez le constater, Google n’a pas trouvé ce carrousel de produits dans son index. Et le fait que Google ne puisse pas voir cet élément signifie que l’accès à des produits supplémentaires sera plus complexe. Aussi, si vous empêchez les robots d’exploration d’atteindre vos carrousels de produits, vous leur compliquerez la tâche comprendre la relation entre vos pages.

Gagnant : Target.com

Dans le cas de la page produit de Target.com, j’ai utilisé l’extension Quick JavaScript Switcher pour désactiver tous les éléments générés par JavaScript. J’ai porté une attention particulière aux carrousels “Plus à considérer” et “Articles similaires” et à leur apparence avec JavaScript activé et désactivé.

Comme indiqué ci-dessous, la désactivation de JavaScript a modifié l’apparence des carrousels de produits pour les utilisateurs. Mais quelque chose a-t-il changé du point de vue des bots ?

Pour le savoir, vérifiez à quoi ressemble la version HTML de la page pour les bots en analysant la version du cache.

Pour vérifier la version cache de la page de Target.com ci-dessus, j’ai tapé “cache:https://www.target.com/p/9-39-…”, qui est l’adresse URL de la page analysée. De plus, j’ai jeté un coup d’œil à la version texte de la page.

Lors du défilement, vous verrez que les liens vers des produits connexes peuvent également être trouvés dans son cache. Si vous les voyez ici, cela signifie que les bots n’ont pas non plus de mal à les trouver.

Cependant, gardez à l’esprit que les liens vers les produits exacts que vous pouvez voir dans le cache peuvent différer de ceux de la version en direct de la page. Il est normal que les produits des carrousels tournent, vous n’avez donc pas à vous soucier des écarts dans des liens spécifiques.

Mais qu’est-ce que Target.com fait exactement de différent ? Ils profitent du rendu dynamique. Ils servent le HTML initial et les liens vers les produits dans les carrousels que les robots HTML statiques peuvent traiter.

Cependant, vous devez vous rappeler que le rendu dynamique ajoute une couche supplémentaire de complexité qui peut rapidement devenir incontrôlable avec un grand site Web. J’ai récemment écrit un article sur le rendu dynamique à lire absolument si vous envisagez cette solution.

De plus, le fait que les crawlers puissent accéder aux carrousels de produits ne garantit pas que ces produits seront indexés. Cependant, cela les aidera considérablement à parcourir la structure du site et à comprendre les dépendances entre vos pages.

3. Blocage des fichiers JavaScript importants dans robots.txt

Le blocage par erreur de JavaScript pour les robots d’exploration dans robots.txt peut entraîner de graves problèmes d’indexation. jeSi Google ne peut pas accéder à vos ressources importantes et les traiter, comment est-il censé indexer votre contenu ?

Coupable : Jdl-brakes.com

Il est impossible d’évaluer pleinement un site Web sans une exploration appropriée du site. Mais regarder son fichier robots.txt peut déjà vous permettre d’identifier tout contenu critique bloqué.

C’est le cas du fichier robots.txt de Jdl-brakes.com. Comme vous pouvez le voir ci-dessous, ils bloquent le chemin /js/ avec la directive Disallow. Il rend tous les fichiers JavaScript hébergés en interne (ou du moins les plus importants) invisibles pour tous les robots des moteurs de recherche.

Cette mauvaise utilisation de la directive d’interdiction peut entraîner des problèmes de rendu sur l’ensemble de votre site Web.

Pour vérifier si cela s’applique dans ce cas, j’ai utilisé le test Mobile-Friendly de Google. Cet outil peut vous aider à résoudre les problèmes de rendu en vous donnant un aperçu du code source rendu et de la capture d’écran d’une page rendue sur mobile.

Je me suis dirigé vers la section “Plus d’infos” pour vérifier si des ressources de page n’ont pas pu être chargées. En utilisant l’exemple de l’une des pages de produits sur Jdl-brakes.com, vous pouvez voir qu’il a besoin d’un fichier JavaScript spécifique pour être entièrement rendu. Malheureusement, cela ne peut pas arriver car tout le dossier /js/ est bloqué dans son fichier robots.txt.

Mais découvrons si ces problèmes de rendu ont affecté l’indexation du site Web. J’ai utilisé la commande “site:” pour vérifier si le contenu principal (description du produit) de la page analysée est indexé sur Google. Comme vous pouvez le voir, aucun résultat n’a été trouvé :

Il s’agit d’un cas intéressant où Google a pu accéder au contenu principal du site Web mais ne l’a pas indexé. Pourquoi? Parce que Jdl-brakes.com bloque son JavaScript, Google ne peut pas voir correctement la mise en page de la page. Et même si les crawlers peuvent accéder au contenu principal, il leur est impossible de comprendre où ce contenu appartient dans la mise en page de la page.

Jetons un coup d’œil à l’onglet Capture d’écran du test d’adaptation aux mobiles. C’est ainsi que les crawlers voient la mise en page de la page lorsque Jdl-brakes.com bloque leur accès aux ressources CSS et JavaScript. Cela semble assez différent de ce que vous pouvez voir dans votre navigateur, n’est-ce pas ?

La mise en page est essentielle pour que Google comprenne le contexte de votre page. Si vous souhaitez en savoir plus sur ce carrefour de la technologie et de la mise en page Web, je vous recommande fortement de vous pencher sur un nouveau domaine du référencement technique appelé SEO de rendu.

Gagnant : Lidl.de

Lidl.de prouve qu’un fichier robots.txt bien organisé peut vous aider à contrôler l’exploration de votre site Web. L’essentiel est d’utiliser consciemment la directive d’interdiction.

Bien que Lidl.de bloque un seul fichier JavaScript avec la directive Disallow /cc.js*, il semble que cela n’affecte pas le processus de rendu du site Web. La chose importante à noter ici est qu’ils ne bloquent qu’un seul fichier JavaScript qui n’influence pas les autres chemins d’URL sur un site Web. Par conséquent, toutes les autres ressources JavaScript et CSS qu’ils utilisent doivent rester accessibles aux crawlers.

Ayant un grand site Web de commerce électronique, vous pouvez facilement perdre la trace de toutes les directives ajoutées. Incluez toujours autant de fragments de chemin d’une URL que vous souhaitez empêcher l’exploration que possible. Cela vous aidera à éviter de bloquer certaines pages cruciales par erreur.

4. JavaScript supprimant le contenu principal d’un site Web

Si vous utilisez du JavaScript non optimisé pour diffuser le contenu principal de votre site Web, comme les descriptions de produits, vous empêchez les robots d’exploration de voir les informations les plus importantes sur vos pages. Par conséquent, vos clients potentiels à la recherche de détails spécifiques sur vos produits ne trouveront peut-être pas ce contenu sur Google.

Coupable : Walmart.com

À l’aide de l’extension Quick JavaScript Switcher, vous pouvez facilement désactiver tous les éléments générés par JavaScript sur une page. C’est ce que j’ai fait dans le cas d’une des pages produits de Walmart.com :

Comme vous pouvez le voir ci-dessus, la section de description du produit a disparu avec JavaScript désactivé. J’ai décidé d’utiliser la commande “site :” pour vérifier si Google pouvait indexer ce contenu. J’ai copié le fragment de la description du produit que j’ai vu sur la page avec JavaScript activé. Cependant, Google n’a pas montré la page de produit exacte que je cherchais.

Les utilisateurs seront-ils obsédés par la recherche de ce produit particulier via Walmart.com ? Ils peuvent, mais ils peuvent également se rendre dans n’importe quel autre magasin vendant cet article à la place.

L’exemple de Walmart.com prouve que le contenu principal dépendant de JavaScript pour se charger rend plus difficile pour les crawlers de trouver et d’afficher vos précieuses informations. Cependant, cela ne signifie pas nécessairement qu’ils doivent éliminer tous les éléments générés par JavaScript sur leur site Web.

Pour résoudre ce problème, Walmart propose deux solutions :

1. Implémenter le rendu dynamique (prerendering) qui est, dans la plupart des cas, le plus simple du point de vue de l’implémentation.

2. Implémentation du rendu côté serveur. C’est la solution qui résoudra les problèmes que nous observons sur Walmart.com sans servir de contenu différent à Google et aux utilisateurs (comme dans le cas du rendu dynamique). Dans la plupart des cas, le rendu côté serveur aide également à résoudre les problèmes de performances Web sur les appareils bas de gamme, car tout votre JavaScript est rendu par vos serveurs avant qu’il n’atteigne l’appareil du client.

Jetons un coup d’œil à l’implémentation de JavaScript qui est bien faite.

Gagnant : IKEA.com

IKEA prouve que vous pouvez présenter votre contenu principal d’une manière accessible aux robots et interactive pour les utilisateurs.

Lorsque vous parcourez les pages de produits de IKEA.com, leurs descriptions de produits sont affichées derrière des panneaux cliquables. Lorsque vous cliquez dessus, ils apparaissent dynamiquement sur le côté droit de la fenêtre.

Bien que les utilisateurs doivent cliquer pour voir les détails du produit, Ikea sert également cette partie cruciale de ses pages même avec JavaScript désactivé :

Cette façon de présenter un contenu crucial devrait rendre les utilisateurs et les bots heureux. Du point de vue des robots d’exploration, la diffusion de descriptions de produits qui ne reposent pas sur JavaScript les rend faciles d’accès. Par conséquent, le contenu peut être trouvé sur Google.

Emballer

JavaScript n’a pas à causer de problèmes, si vous savez comment l’utiliser correctement. Comme un must absolu, vous devez suivre les meilleures pratiques d’indexation. Cela peut vous permettre d’éviter les erreurs de référencement JavaScript de base qui peuvent considérablement entraver la visibilité de votre site Web sur Google.

Prenez soin de votre pipeline d’indexation et vérifiez si :

• Vous autorisez Google à accéder à vos ressources JavaScript,

• Google peut accéder à votre contenu généré par JavaScript et l’afficher. Concentrez-vous sur les éléments cruciaux de votre site e-commerce, comme les carrousels de produits ou les descriptions de produits,

• Votre contenu est effectivement indexé sur Google.

Si mon article vous a intéressé au JS SEO, retrouvez plus de détails dans l’article de Tomek Rudzki sur les 6 étapes pour diagnostiquer et résoudre les problèmes de JavaScript SEO.