React s’est imposé comme l’un des principaux frameworks JavaScript utilisés sur une variété de sites web différents, et en particulier sur les sites de e-commerce.
En raison de la façon dont ils sont construits, les sites Web React ont des considérations spécifiques en matière d’optimisation des moteurs de recherche (SEO), avec un ensemble distinct de meilleures pratiques SEO pour les applications React à page unique (SPA).
Dans ce guide, nous allons voir comment s’assurer qu’un site de e-commerce React est correctement configuré pour le SEO, et quels sont les avantages et les inconvénients de l’utilisation de React sur un site e-commerce optimisé pour le référencement.
Qu’est-ce que React ?
React est une bibliothèque JavaScript qui peut être utilisée pour construire des interfaces utilisateur basées sur des composants d’interface utilisateur communs. Elle est maintenue par
Meta, la société mère de Facebook, ainsi que par une communauté de développeurs open-source comprenant des entreprises et des particuliers.
Parce qu’il est open-source, React est également libre d’utilisation. Il peut constituer le cadre de base d’une application monopage (SPAs mentionnées ci-dessus) ou d’une application mobile.
Pourquoi React est-il bon pour le e-commerce ?
React étant axé sur l’interface utilisateur, il s’agit d’un outil utile pour créer des sites de e-commerce fluides et transparents qui placent l’expérience utilisateur (UX) au cœur de la conception.
Le contenu est servi côté client et les pages n’ont pas besoin d’être rafraîchies, ce qui permet aux clients de naviguer plus rapidement et plus facilement sur un site Web, avec moins de retards du serveur pouvant affecter la vitesse de chargement des pages.
La polyvalence de React signifie qu’il peut être utilisé aussi bien sur des sites d’e-commerce desktop que sur des applications mobiles, ce qui en fait l’une des options les plus faciles pour les développeurs qui souhaitent créer des applications Web progressives.
Les moteurs de recherche peuvent-ils crawler les sites Web React ?
Comme pour tout site Web optimisé pour les recherches, il est important de comprendre comment les robots (et surtout Googlebot) voient le contenu d’un site React.
En général, Google parcourt le site en deux étapes, identifiant le contenu au fur et à mesure.
Exploration du code source
Tout d’abord, Googlebot va parcourir le site Web et récupérer le code source, y compris le HTML, les en-têtes de page, etc.
Rendu du DOM
Ensuite, Googlebot effectue le rendu du Domain Object Model (DOM), y compris tout le JavaScript utilisé sur la page. Vous pouvez l’identifier à l’aide des outils de développement intégrés de Chrome et des fonctions équivalentes dans les autres navigateurs.
React est un framework JavaScript côté client, ce qui signifie que Googlebot peut avoir des difficultés à identifier les pages. En effet, contrairement à un site Web traditionnel, React n’envoie pas de requêtes au serveur lors de la navigation d’une page à l’autre, ce qui rend difficile pour Google de voir les différentes pages.
Vous pouvez configurer React pour utiliser le rendu côté serveur, mais Googlebot ne rendra toujours pas les fichiers JavaScript et les autres ressources basées sur le serveur lors de la navigation sur votre site. Pour cette raison, il est important de configurer votre site e-commerce React pour le SEO conformément aux meilleures pratiques.
Problèmes de SEO courants avec React
Il existe plusieurs problèmes de SEO courants avec les sites de e-commerce React :
Contenu non découvert / lent à être indexé
Googlebot alloue un « budget de rendu » à chaque site Web qu’il crawle et s’en va généralement une fois que ce budget a été dépensé. Cela permet aux petits sites Web d’obtenir leur part d’attention de la part du robot d’exploration et d’éviter les boucles d’exploration infinies, par exemple sur les sites Web qui génèrent des URLs dynamiques pendant la navigation.
Les sites Web React fonctionnant comme des SPA, l’ensemble du site doit être rendu avant que tout son contenu puisse être crawlé. Cela peut retarder la découverte du contenu et consommer des ressources supplémentaires du côté du crawler, ce qui peut entraîner une diminution du nombre de pages crawlées et indexées.
Le rendu côté serveur et le pré-rendu peuvent soulager les robots d’une partie de la charge en ressources, ce qui permet d’améliorer la vitesse d’apparition des nouvelles pages dans l’index.
Les robots de recherche sont lents à remarquer le contenu mis à jour
Il s’agit d’une conséquence du problème précédent : lorsque vous modifiez une page, il peut s’écouler un certain temps avant que ces modifications ne soient prises en compte dans les résultats de recherche.
Là encore, cela est dû à la façon dont les pages sont rendues avec React, ce qui peut conduire à ce que les pages mises à jour passent inaperçues pendant plus longtemps en raison des ressources limitées des robots d’exploration de Google.
Des pages « profondes » rarement (ou jamais) explorées
Les pages enfouies profondément dans la hiérarchie de votre site ont moins de chances d’être atteintes par Googlebot, surtout s’il a déjà dépensé un budget de rendu important plus haut dans votre hiérarchie.
Une fois encore, le pré-rendu peut être un outil précieux pour aider les robots de recherche à pénétrer plus profondément dans la structure des dossiers de votre site Web, avant qu’ils n’épuisent le budget de crawl assignable.
[Ebook] Crawlability
Comment optimiser les sites e-commerce React
Grâce à quelques bonnes pratiques en matière de SEO de sites e-commerce React, vous pouvez donner à votre site – et à vos pages individuelles – de meilleures chances de figurer dans l’index de recherche.
URL de page unique
La contrepartie des meilleures pratiques au problème des URLs dynamiques mentionnées ci-dessus consiste à donner à chaque page sa propre URL unique et statique sur votre site Web. Le contenu est alors associé à un emplacement permanent unique – une URL canonique pour la page – que les moteurs de recherche peuvent explorer, indexer et classer en toute confiance dans leurs pages de résultats.
React Router est le moyen d’y parvenir sur les sites Web React. React Router peut donner à chaque page du site sa propre URL permanente, ainsi qu’aligner l’interface utilisateur avec une URL spécifique.
Isomorphic React
Isomorphic React est un moyen d’activer le rendu côté serveur, afin de soulager la pression sur les budgets de rendu des crawlers. Il fonctionne en détectant si JavaScript est désactivé côté client et en créant une forme de rendu côté serveur du HTML du site Web. Si le rendu côté client est disponible, le site Web se chargera comme un SPA React de la manière habituelle.
De cette manière, Isomorphic React résout les problèmes de visibilité pour les robots d’exploration, améliorant ainsi la facilité de découverte des pages, sans nuire à l’expérience React fluide et transparente pour les visiteurs humains dont le JavaScript côté client est activé.
Pré-rendu
Le pré-rendu est un autre moyen d’obtenir un résultat similaire à celui du React isomorphe. Il fonctionne en générant une version en cache du HTML rendu, à laquelle les robots d’exploration peuvent accéder à la place du code source non rendu.
Les visiteurs humains reçoivent le site web React côté client, ce qui leur donne à nouveau tous les avantages d’un SPA fluide et rapide comme l’éclair. Il existe de nombreux services de prérendu parmi lesquels vous pouvez choisir, notamment Google Puppeteer, Prerender.io et SEO4Ajax.
Optimisation des métadonnées
Enfin, veillez à ce que votre contenu comporte des métadonnées optimisées, qui restent un élément important du référencement sur page, même après toutes ces années.
En plus d’une URL unique et optimisée, chaque page doit avoir une balise titre unique et toute autre balise méta pertinente, aidant les pages à se démarquer et indiquant aux robots de recherche d’associer la page à un certain sujet ou à un mot clé principal.
React Helmet est un bon moyen d’y parvenir, en donnant un accès direct à la modification des métadonnées SEO sur les sites e-commerce React. De cette façon, vous pouvez combiner les meilleures pratiques de référencement de la vieille école et les mots-clés classiques des métadonnées, avec tous les avantages d’un site e-commerce React moderne et adapté aux mobiles.
