Meilleures pratiques de référencement pour les sites de commerce électronique React

React est devenu l'un des principaux frameworks JavaScript utilisés sur une variété de sites Web différents, et en particulier sur les sites de commerce électronique.

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 verrons comment garantir qu'un site de commerce électronique React est correctement configuré pour le référencement, et certains des avantages et des inconvénients de l'utilisation de React sur un site Web de commerce électronique optimisé pour la recherche.

Qu'est-ce que React ?

React est une bibliothèque JavaScript qui peut être utilisée pour créer des interfaces utilisateur basées sur des composants d'interface utilisateur courants. Il est géré par la société mère de Facebook, Meta, ainsi que par une communauté open source de développeurs 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 (SPA mentionnés ci-dessus) ou d'une application mobile.

Pourquoi React est-il bon pour le commerce électronique ?

L'accent mis par React sur l'interface utilisateur signifie qu'il s'agit d'un outil utile pour créer des sites Web de commerce électronique 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 actualisées, ce qui permet aux clients de naviguer plus rapidement et plus facilement sur un site Web, avec moins de retards du serveur pour affecter les vitesses de chargement des pages.

La polyvalence de React signifie qu'il peut être utilisé sur les sites de commerce électronique de bureau et les applications mobiles, ce qui en fait l'une des options les plus simples pour les développeurs qui souhaitent créer des applications Web progressives.

Les moteurs de recherche peuvent-ils explorer les sites Web React ?

Comme pour tout site Web optimisé pour la recherche, il est important de comprendre comment les robots (et en particulier Googlebot) voient le contenu d'un site React.

En général, Google explore le site Web en deux étapes, identifiant le contenu au fur et à mesure.

Explorer le code source

Tout d'abord, Googlebot explore le site Web et récupère le code source, y compris le code HTML, les en-têtes de page, etc.

Rendre le DOM

Deuxièmement, Googlebot affiche le modèle d'objet de domaine (DOM), y compris tout code JavaScript utilisé sur la page. Vous pouvez l'identifier à l'aide des outils de développement intégrés de Chrome et des fonctionnalités équivalentes dans d'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 n'affichera 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 Web de commerce électronique React pour le référencement conformément aux meilleures pratiques.

Problèmes de référencement courants avec React

Il existe plusieurs problèmes de référencement courants avec les sites Web de commerce électronique React :

Contenu non découvert/lent à indexer

Googlebot alloue un « budget de rendu » à chaque site Web qu'il explore et quitte généralement une fois ce budget dépensé. Cela garantit que les sites Web plus petits obtiennent leur part de l'attention du robot d'exploration et évite les boucles d'exploration infinies, par exemple sur les sites Web qui génèrent des URL dynamiques pendant la navigation.

Étant donné que les sites Web React fonctionnent comme des SPA, l'intégralité du site doit être rendue avant que tout son contenu puisse être exploré. Cela peut retarder la découverte de contenu et consommer des ressources supplémentaires du côté du robot, ce qui peut entraîner une diminution du nombre de pages explorées et indexées.

Le rendu et le pré-rendu côté serveur peuvent alléger une partie de la charge de ressources des robots, ce qui contribue à améliorer la vitesse à laquelle les nouvelles pages apparaissent dans l'index.

Les robots de recherche tardent à remarquer le contenu mis à jour

Il s'agit d'une conséquence du problème ci-dessus : lorsque vous modifiez une page, cela peut prendre un certain temps avant que ces modifications ne soient transmises aux résultats de la recherche.

Encore une fois, cela est dû à la façon dont les pages sont rendues lors de l'utilisation de React, ce qui peut conduire à ce que les pages mises à jour passent inaperçues plus longtemps par les ressources finies des robots d'exploration de Google.

Les pages "profondes" ont rarement (ou jamais) été explorées

Les pages enfouies profondément dans la hiérarchie de votre site sont moins susceptibles d'être atteintes par Googlebot, surtout s'il a déjà dépensé un budget de rendu important plus haut dans votre hiérarchie.

Encore une fois, 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 ne soient à court de budget d'exploration attribuable.

[Ebook] Crawlabilité

Assurez-vous que vos sites Web répondent aux exigences des moteurs de recherche en matière d'exploration afin d'améliorer les performances de référencement.

Lire l'ebook

Comment optimiser les sites e-commerce React

Avec quelques bonnes pratiques pour le référencement du commerce électronique React, vous pouvez donner à votre site – et à vos pages individuelles – une meilleure chance de figurer dans l'index de recherche.

URL de pages uniques

La contrepartie de la meilleure pratique au problème des URL dynamiques mentionné ci-dessus consiste à donner à chaque page sa propre URL unique et statique sur votre site Web. Le contenu est ensuite associé à un seul emplacement permanent - 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 que l'alignement de l'interface utilisateur avec une URL spécifique.

Réaction isomorphe

Isomorphic React est un moyen d'activer le rendu côté serveur, pour soulager la pression sur les budgets de rendu des crawlers. Il fonctionne en détectant lorsque JavaScript est désactivé côté client et en créant une forme de rendu côté serveur du code HTML du site Web. Si le rendu côté client est disponible, le site Web se chargera en tant que React SPA de la manière habituelle.

Ce faisant, Isomorphic React surmonte les problèmes de visibilité pour les robots de recherche, améliorant la découvrabilité des pages, sans nuire à l'expérience React fluide et transparente pour les visiteurs humains avec JavaScript côté client activé.

Pré-rendu

Le pré-rendu est un autre moyen d'obtenir un résultat similaire à Isomorphic React. Cela fonctionne en générant une version en cache du HTML rendu, auquel les crawlers peuvent ensuite accéder à la place du code source non rendu.

Les visiteurs humains reçoivent le site Web React côté client, leur offrant à nouveau tous les avantages d'un SPA fluide et ultra-rapide. Il existe de nombreux services de pré-rendu parmi lesquels choisir, notamment Google Puppeteer, Prerender.io et SEO4Ajax.

Optimisation des métadonnées

Enfin, assurez-vous que votre contenu a des métadonnées optimisées - toujours un élément important dans le référencement sur la page, même après toutes ces années.

En plus d'une URL unique et optimisée, chaque page doit avoir une balise de 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 pour modifier le référencement des métadonnées sur les sites Web de commerce électronique React. De cette façon, vous pouvez combiner les meilleures pratiques de référencement à l'ancienne et les mots-clés de métadonnées classiques, avec tous les avantages d'un site Web de commerce électronique React moderne et adapté aux mobiles.