JavaScript (JS) est extrêmement populaire dans le monde du commerce électronique car il permet de créer une expérience transparente et conviviale pour les acheteurs.

Prenez, par exemple, le chargement d’articles sur des pages de catégorie ou la mise à jour dynamique de produits sur le site à l’aide de JS.

Bien que ce soit une excellente nouvelle pour les sites de commerce électronique, JavaScript pose plusieurs défis aux professionnels du référencement.

Google travaille constamment à l’amélioration de son moteur de recherche, et une grande partie de ses efforts est consacrée à s’assurer que ses robots d’exploration peuvent accéder au contenu JavaScript.

Mais s’assurer que Google explore de manière transparente les sites JS n’est pas facile.

Dans cet article, je partagerai tout ce que vous devez savoir sur JS SEO pour le commerce électronique et comment vous pouvez améliorer vos performances organiques.

Commençons!

Comment JavaScript fonctionne pour les sites de commerce électronique

Lors de la création d’un site de commerce électronique, les développeurs utilisent HTML pour le contenu et l’organisation, CSS pour la conception et JavaScript pour l’interaction avec les serveurs principaux.

JavaScript joue trois rôles importants dans les sites Web de commerce électronique.

1. Ajouter de l’interactivité à une page Web

L’objectif de l’ajout d’interactivité est de permettre aux utilisateurs de voir les changements en fonction de leurs actions, comme faire défiler ou remplir des formulaires.

Par exemple : l’image d’un produit change lorsque l’acheteur passe la souris dessus. Ou le survol de la souris fait pivoter l’image à 360 degrés, permettant à l’acheteur d’avoir une meilleure vue du produit.

Tout cela améliore l’expérience utilisateur (UX) et aide les acheteurs à décider de leurs achats.

JavaScript ajoute une telle interactivité aux sites, permettant aux spécialistes du marketing d’engager les visiteurs et de générer des ventes.

2. Connexion aux serveurs principaux

JavaScript permet une meilleure intégration backend à l’aide de JavaScript asynchrone (AJAX) et du langage de balisage extensible (XML).

Il permet aux applications Web d’envoyer et de récupérer des données du serveur de manière asynchrone tout en respectant l’UX.

En d’autres termes, le processus n’interfère pas avec l’affichage ou le comportement de la page.

Sinon, si les visiteurs voulaient charger une autre page, ils devraient attendre que le serveur réponde avec une nouvelle page. Ceci est ennuyeux et peut amener les acheteurs à quitter le site.

Ainsi, JavaScript permet des interactions dynamiques prises en charge par le backend – comme mettre à jour un article et le voir mis à jour dans le panier – immédiatement.

De même, il permet de glisser-déposer des éléments sur une page Web.

3. Suivi Web et analyse

JavaScript offre un suivi en temps réel des pages vues et des cartes thermiques qui vous indiquent jusqu’où les gens lisent votre contenu.

Par exemple, il peut vous dire où se trouve leur souris ou sur quoi ils ont cliqué (suivi des clics).

C’est ainsi que JS permet de suivre le comportement et l’interaction des utilisateurs sur les pages Web.

Comment les robots de recherche traitent-ils JS ?

Google traite JS en trois étapes, à savoir : l’exploration, le rendu et l’indexation.

Processus d'exploration d'URL

Comme vous pouvez le voir sur cette image, les robots de Google placent les pages dans la file d’attente pour l’exploration et le rendu. Au cours de cette phase, les bots scannent les pages pour évaluer le nouveau contenu.

Lorsqu’une URL est extraite de la file d’attente d’exploration en envoyant une requête HTTP, elle accède d’abord à votre fichier robots.txt pour vérifier si vous avez autorisé Google à explorer la page.

S’il n’est pas autorisé, les bots l’ignoreront et n’enverront pas de requête HTTP.

Dans la deuxième étape, le rendu, les fichiers HTML, CSS et JavaScript sont traités et transformés dans un format facilement indexable par Google.

Dans la dernière étape, l’indexation, le contenu rendu est ajouté à l’index de Google, ce qui lui permet d’apparaître dans les SERP.

Défis courants du référencement JavaScript avec les sites de commerce électronique

L’exploration JavaScript est beaucoup plus complexe que les sites HTML traditionnels.

Le processus est plus rapide dans le cas de ce dernier.

Découvrez cette comparaison rapide.

Exploration de site HTML traditionnel Exploration JavaScript
1 Les robots téléchargent le fichier HTML 1 Les robots téléchargent le fichier HTML
2 Ils extraient les liens pour les ajouter à leur file d’attente de crawl 2 Ils ne trouvent aucun lien dans le code source car ils ne sont injectés qu’après l’exécution du JS
3 Ils téléchargent les fichiers CSS 3 Les bots téléchargent les fichiers CSS et JS
4 Ils envoient les ressources téléchargées à Caffeine, l’indexeur de Google 4 Les bots utilisent le Google Web Rendering Service (WRS) pour analyser et exécuter JS
5 Voila ! Les pages sont indexées 5 WRS récupère les données de la base de données et des API externes
6 Le contenu est indexé
sept Les bots peuvent enfin découvrir de nouveaux liens et les ajouter à la file d’attente de crawl

Ainsi, avec les sites de commerce électronique riches en JS, Google a du mal à indexer le contenu ou à découvrir des liens avant que la page ne soit rendue.

En fait, dans un webinaire sur la migration d’un site Web vers JavaScript, Sofia Vatulyak, une experte renommée en JS SEO, a partagé,

« Bien que JavaScript offre plusieurs fonctionnalités utiles et économise des ressources pour le serveur Web, tous les moteurs de recherche ne peuvent pas le traiter. Google a besoin de temps pour rendre et indexer les pages JS. Ainsi, la mise en œuvre de JS tout en maintenant le référencement est un défi. »

Voici les principaux défis JS SEO que les spécialistes du marketing e-commerce doivent connaître.

Budget de crawl limité

Les sites Web de commerce électronique ont souvent un volume massif (et croissant !) De pages mal organisées.

Ces sites ont des exigences importantes en matière de budget d’exploration et, dans le cas des sites Web JS, le processus d’exploration est long.

De plus, le contenu obsolète, comme les pages orphelines et zombies, peut entraîner un énorme gaspillage du budget de crawl.

Budget de rendu limité

Comme mentionné précédemment, pour pouvoir voir le contenu chargé par JS dans le navigateur, les robots de recherche doivent le restituer. Mais le rendu à grande échelle demande du temps et des ressources informatiques.

En d’autres termes, comme un budget de crawl, chaque site Web a un budget de rendu. Si ce budget est dépensé, le bot partira, retardant la découverte de contenu et consommant des ressources supplémentaires.

Google rend le contenu JS lors du deuxième cycle d’indexation.

Il est important d’afficher votre contenu au format HTML, permettant à Google d’y accéder.

premier tour de parcours d'URL d'indexation

Allez à la Inspecter l’élément sur votre page et recherchez une partie du contenu. Si vous ne le trouvez pas, les moteurs de recherche auront du mal à y accéder.

Le dépannage des problèmes pour les sites Web JavaScript est difficile

La plupart des sites Web JS sont confrontés à des problèmes d’exploration et d’obtention.

Par exemple, le contenu JS limite la capacité d’un bot à naviguer dans les pages. Cela affecte son indexabilité.

De même, les bots ne peuvent pas comprendre le contexte du contenu d’une page JS, limitant ainsi leur capacité à classer la page pour des mots-clés spécifiques.

De tels problèmes rendent difficile pour les spécialistes du marketing de commerce électronique de déterminer l’état de rendu de leurs pages Web.

Dans un tel cas, l’utilisation d’un robot d’exploration avancé ou d’un analyseur de journaux peut aider.

Des outils tels que Semrush Log File Analyzer, Google Search Console Crawl Stats et JetOctopus, entre autres, offrent une solution complète de gestion des journaux, permettant aux webmasters de mieux comprendre comment les robots de recherche interagissent avec les pages Web.

JetOctopus, par exemple, a une fonctionnalité de rendu JS.

Découvrez ce GIF qui montre comment l’outil visualise les pages JS en tant que bot Google.

Comment google bot voit le contenu de votre page

De même, Google Search Console Crawl Stats partage un aperçu utile des performances de crawl de votre site.

statistiques d'exploration de la console de recherche google

Les statistiques de crawl sont triées en :

  • Kilooctets téléchargés par jour afficher le nombre de kilo-octets que les bots téléchargent chaque fois qu’ils visitent le site Web.
  • Pages crawlées par jour indique le nombre de pages parcourues par les bots par jour (faible, moyen ou élevé).
  • Temps passé à télécharger une page vous indique le temps que les bots mettent pour faire une requête HTTP pour le crawl. Moins de temps pris signifie une exploration et une indexation plus rapides.

Rendu côté client activé par défaut

Les sites de commerce électronique construits dans des frameworks JS tels que React, Angular ou Vue sont, par défaut, définis sur le rendu côté client (CSR).

Avec ce paramètre, les bots ne pourront pas voir ce qu’il y a sur la page, ce qui causera des problèmes de rendu et d’indexation.

Fichiers JS volumineux et non optimisés

Le code JS empêche le chargement rapide des ressources critiques du site Web. Cela affecte négativement l’UX et le SEO.

Meilleures tactiques d’optimisation pour les sites de commerce électronique JavaScript

1. Vérifiez si votre JavaScript a des problèmes de référencement

Voici trois tests rapides à exécuter sur différents modèles de pages de votre site, à savoir la page d’accueil, les pages de catégories ou de listes de produits, les pages de produits, les pages de blog et les pages supplémentaires.

Outil d’inspection d’URL

Accéder au Inspecter le rapport d’URL dans votre console de recherche Google.

Aperçu du SGC

Saisissez l’URL que vous souhaitez tester.

entrez l'URL à inspecter dans GSC

Ensuite, appuyez sur Afficher la page testée et passez à la capture d’écran de la page. Si vous voyez cette section vide (comme dans cette capture d’écran), Google a des problèmes pour afficher cette page.

GSC signale des problèmes de page

Répétez ces étapes pour tous les modèles de page de commerce électronique pertinents partagés précédemment.

Exécutez une recherche Google

L’exécution d’une recherche sur le site vous aidera à déterminer si l’URL se trouve dans l’index de Google.

Tout d’abord, vérifiez les balises sans index et canonique. Vous voulez vous assurer que vos canoniques se référencent eux-mêmes et qu’il n’y a pas de balise d’index sur la page.

Ensuite, allez dans la recherche Google et entrez – Site:votredomaine.com inurl:votre URL

Principes de base du référencement JavaScript pour le commerce électronique : ce que vous devez savoir

Cette capture d’écran montre que la page « À propos de nous » de Target est indexée par Google.

S’il y a un problème avec le JS de votre site, soit vous ne verrez pas ce résultat, soit vous obtiendrez un résultat similaire à celui-ci, mais Google n’aura aucune méta-information ou quoi que ce soit de lisible.

recherche de site sur google

recherche de site sur google

Optez pour la recherche de contenu

Parfois, Google peut indexer des pages, mais le contenu est illisible. Ce test final vous aidera à évaluer si Google peut lire votre contenu.

Rassemblez un tas de contenu à partir de vos modèles de page et entrez-le sur Google pour voir les résultats.

Prenons du contenu de Macy’s.

Le contenu de Macy

Capture d’écran de Macy’s, septembre 2022

Le contenu de Macy

Aucun problème ici !

Mais regardez ce qui se passe avec ce contenu sur Kroger. C’est un cauchemar!

Contenu Kruger

Kruger sur la recherche Google

Bien que repérer les problèmes de référencement JavaScript soit plus complexe que cela, ces trois tests vous aideront à évaluer rapidement si votre Javascript de commerce électronique a des problèmes de référencement.

Suivez ces tests avec un audit détaillé du site Web JS à l’aide d’un robot d’exploration SEO qui peut aider à identifier si votre site Web a échoué lors de l’exécution de JS et si certains codes ne fonctionnent pas correctement.

Par exemple, quelques robots SEO ont une liste de fonctionnalités qui peuvent vous aider à comprendre cela en détail :

  • Le rapport « Performances JavaScript » propose une liste de toutes les erreurs.
  • Le graphique « Événements de performance du navigateur » indique la durée des événements du cycle de vie lors du chargement des pages JS. Il vous aide à identifier les éléments de page les plus lents à charger.
  • Le rapport « répartition du temps de chargement » montre les pages qui sont rapides ou lentes. Si vous cliquez sur ces colonnes de données, vous pouvez analyser plus en détail les pages lentes.

2. Implémenter le rendu dynamique

La façon dont votre site Web rend le code a un impact sur la façon dont Google indexera votre contenu JS. Par conséquent, vous devez savoir comment le rendu JavaScript se produit.

Rendu côté serveur

En cela, la page rendue (le rendu des pages se produit sur le serveur) est envoyé au robot d’exploration ou au navigateur (client). L’exploration et l’indexation sont similaires aux pages HTML.

Mais la mise en œuvre du rendu côté serveur (SSR) est souvent difficile pour les développeurs et peut augmenter la charge du serveur.

De plus, le Time to First Byte (TTFB) est lent car le serveur restitue les pages en déplacement.

Une chose que les développeurs doivent garder à l’esprit lors de l’implémentation de SSR est de s’abstenir d’utiliser des fonctions opérant directement dans le DOM.

Côté client Le rendu

Ici, le JavaScript est rendu par le client à l’aide du DOM. Cela entraîne plusieurs problèmes informatiques lorsque les robots de recherche tentent d’explorer, de restituer et d’indexer le contenu.

Une alternative viable à SSR et CSR est le rendu dynamique qui bascule entre le contenu rendu côté client et côté serveur pour des agents utilisateurs spécifiques.

Il permet aux développeurs de fournir le contenu du site aux utilisateurs qui y accèdent à l’aide du code JS généré dans le navigateur.

Cependant, il ne présente qu’une version statique aux bots. Google prend officiellement en charge la mise en œuvre du rendu dynamique.

Service Google Search Central pour le navigateur et le robot d'exploration

Pour déployer le rendu dynamique, vous pouvez utiliser des outils comme Prerender.io ou Puppeteer.

Ceux-ci peuvent vous aider à fournir une version HTML statique de votre site Web Javascript aux robots d’exploration sans aucun impact négatif sur CX.

Le rendu dynamique est une excellente solution pour les sites Web de commerce électronique qui contiennent généralement beaucoup de contenu qui change fréquemment ou qui reposent sur le partage de médias sociaux (contenant des murs ou des widgets de médias sociaux intégrables).

3. Acheminez correctement vos URL

Les frameworks JavaScript utilisent un routeur pour mapper des URL propres. Par conséquent, il est essentiel de mettre à jour les URL des pages lors de la mise à jour du contenu.

Par exemple, les frameworks JS comme Angular et Vue génèrent des URL avec un hachage (#) comme www.example.com/#/about-us

Ces URL sont ignorées par les robots Google lors du processus d’indexation. Il est donc déconseillé d’utiliser #.

Utilisez plutôt des URL statiques comme http://www.example.com/about-us

4. Adhérez au protocole de liaison interne

Les liens internes aident Google à explorer efficacement le site et à mettre en évidence les pages importantes.

Une mauvaise structure de liens peut être préjudiciable au référencement, en particulier pour les sites contenant beaucoup de JS.

Un problème courant que nous avons rencontré est lorsque les sites de commerce électronique utilisent JS pour les liens que Google ne peut pas explorer, tels que les liens onclick ou de type bouton.

Regarde ça:

Crawler ceci

Si vous souhaitez que les robots Google découvrent et suivent vos liens, assurez-vous qu’ils sont en HTML brut.

Google recommande de relier les pages à l’aide de balises d’ancrage HTML avec des attributs href et demande aux webmasters d’éviter les gestionnaires d’événements JS.

5. Utilisez la pagination

La pagination est essentielle pour les sites Web de commerce électronique riches en JS avec des milliers de produits que les détaillants choisissent souvent de répartir sur plusieurs pages pour une meilleure UX.

Permettre aux utilisateurs de faire défiler à l’infini peut être bon pour l’expérience utilisateur, mais n’est pas nécessairement compatible avec le référencement. En effet, les bots n’interagissent pas avec ces pages et ne peuvent pas déclencher d’événements pour charger plus de contenu.

Finalement, Google atteindra une limite (arrêter le défilement) et partira. Ainsi, la plupart de votre contenu est ignoré, ce qui entraîne un mauvais classement.

Assurez-vous d’utiliser des liens pour permettre à Google de voir la deuxième page de pagination.

Par exemple, utilisez ceci :

6. Images de chargement paresseux

Bien que Google prenne en charge le chargement différé, il ne fait pas défiler le contenu lors de la visite d’une page.

Il redimensionne la fenêtre d’affichage virtuelle de la page, la rendant plus longue pendant le processus d’exploration. Et parce que l’écouteur d’événement « scroll » n’est pas déclenché, ce contenu n’est pas rendu.

Ainsi, si vous avez des images sous le pli, comme la plupart des sites Web de commerce électronique, il est essentiel de les charger paresseux, permettant à Google de voir tout votre contenu.

7. Autoriser les bots à explorer JS

Cela peut sembler évident, mais à plusieurs reprises, nous avons vu des sites de commerce électronique bloquer accidentellement l’exploration de fichiers JavaScript (.js).

Cela entraînera des problèmes de JS SEO, car les bots ne pourront pas rendre et indexer ce code.

Vérifiez votre fichier robots.txt pour voir si les fichiers JS sont ouverts et disponibles pour l’exploration.

8. Auditez votre code JS

Enfin, assurez-vous d’auditer votre code JavaScript afin de l’optimiser pour les moteurs de recherche.

Utilisez des outils tels que Google Webmaster Tools, Chrome Dev Tools et Ahrefs et un robot d’exploration SEO comme JetOctopus pour exécuter un audit JS SEO réussi.

Console de recherche Google

Cette plateforme peut vous aider à optimiser votre site et à surveiller vos performances organiques. Utilisez GSC pour surveiller l’activité de Googlebot et WRS.

Pour les sites Web JS, GSC vous permet de voir les problèmes de rendu. Il signale les erreurs d’exploration et émet des notifications pour les éléments JS manquants qui ont été bloqués pour l’exploration.

Outils de développement Chrome

Ces outils de développement Web sont intégrés à Chrome pour une utilisation facile.

La plate-forme vous permet d’inspecter le rendu HTML (ou DOM) et l’activité réseau de vos pages Web.

Depuis son onglet Réseau, vous pouvez facilement identifier les ressources JS et CSS chargées avant le DOM.

Outils de développement Chrome

Ahrefs

Ahrefs vous permet de gérer efficacement la création de backlinks, les audits de contenu, la recherche de mots-clés, etc. Il peut afficher des pages Web à grande échelle et vous permet de vérifier les redirections JavaScript.

Vous pouvez également activer JS dans les analyses d’audit de site pour débloquer plus d’informations.

ahrefs ajouter javascript pour l'audit du site

La barre d’outils Ahrefs prend en charge JavaScript et affiche une comparaison du HTML avec les versions rendues des balises.

JetOctopus SEO Crawler et analyseur de journaux

JetOctopus est un robot d’exploration SEO et un analyseur de journaux qui vous permet d’auditer sans effort les problèmes courants de référencement du commerce électronique.

Puisqu’il peut afficher et afficher JS en tant que bot Google, les spécialistes du marketing en ligne peuvent résoudre les problèmes de référencement JavaScript à grande échelle.

Son onglet JS Performance offre des informations complètes sur l’exécution de JavaScript – First Paint, First Contentful Paint et le chargement de la page.

Il partage également le temps nécessaire pour terminer toutes les requêtes JavaScript avec les erreurs JS qui nécessitent une attention immédiate.

L’intégration de GSC avec JetOctopus peut vous aider à voir la dynamique complète des performances de votre site.

Outil Ryte UX

Ryte est un autre outil capable d’explorer et de vérifier vos pages javascript. Il affichera les pages et vérifiera les erreurs, vous aidant à résoudre les problèmes et à vérifier la convivialité de vos pages dynamiques.

seoClarity

seoClarity est une plateforme d’entreprise avec de nombreuses fonctionnalités. Comme les autres outils, il propose un rendu dynamique, vous permettant de vérifier les performances du javascript sur votre site Web.

Résumé

Les sites de commerce électronique sont des exemples concrets de contenu dynamique injecté à l’aide de JS.

Par conséquent, les développeurs de commerce électronique s’extasient sur la façon dont JS leur permet de créer des pages de commerce électronique hautement interactives.

D’autre part, de nombreux professionnels du référencement redoutent JS car ils ont connu une baisse du trafic organique après que leur site a commencé à s’appuyer sur le rendu côté client.

Bien que les deux aient raison, le fait est que les sites Web dépendants de JS peuvent également bien fonctionner dans le SERP.

Suivez les conseils partagés dans ce guide pour vous rapprocher de l’utilisation de JavaScript de la manière la plus efficace possible tout en maintenant le classement de votre site dans le SERP.

Davantage de ressources:

  • 10 bases SEO incontournables pour les développeurs Web
  • Comment automatiser la création de pages de catégorie de commerce électronique avec Python
  • Référencement technique avancé : un guide complet

Image en vedette : Génération visuelle/Shutterstock

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici