Comment rendre ReactJS SEO-friendly ?

Aujourd’hui, ReactJS est sur toutes les lèvres.

Tout a commencé avec l’arrivée des frameworks Javascript il y a environ 10 ans. Si Angular a ouvert la voie, il a rapidement été dépassé par d’autres frameworks JavaScript. Car, ceux-ci sont plus compatibles avec le SEO, comme React JS.

Au moment où j’écris ces mots, les applications monopages alimentées par React sont l’environnement de développement privilégié par les développeurs front-end.

D’ailleurs, environ 70% de tous les projets clients que j’ai audités ou consultés au cours des 5-6 dernières années étaient basés sur React JS.

Cela montre que les sites web propulsés par Javascript sont déjà une référence. Ainsi, si vous êtes un expert en SEO, il serait avisé de commencer à améliorer vos compétences dans ce domaine.

Ce guide vise à fournir des conseils utiles pour rendre le React JS compatible avec le SEO.

Qu’est-ce que le React JavaScript ?

React JS est une plateforme de développement front-end open-source créée par Facebook pour créer des interfaces utilisateur.

Aujourd’hui, React est la libairie JavaScript la plus populaire, avec plus de 150 millions de téléchargements mensuels. Elle constitue la base de nombreux frameworks et bibliothèques populaires, tels que Gatsby, Next.js et Redux.

Pourquoi React est-il puissant ?

React permet de créer des applications web offrant une expérience utilisateur riche grâce à l’utilisation de composants et de code réutilisables.

Il facilite la création rapide d’interfaces utilisateur complexes et d’applications web avec moins de code.

Grâce à React, les développeurs peuvent rapidement construire des interfaces utilisateur complexes à partir de composants individuels.

Enfin, il est conçu pour être rapide. Bien qu’il y ait quelques réserves à ce sujet.

Les développeurs adorent ReactJS

Au cours des cinq dernières années, j’ai énormément appris des développeurs grâce à mon implication dans des projets web à grande échelle basés sur React.

Les développeurs utilisent des morceaux de code réutilisables, appelés composants, pour construire des UI complexes dans React.

Ces composants sont un pilier qui soutient la puissance de React. Cela explique pourquoi ceux-ci se tournent vers lui pour la plupart des applications web à grande échelle. Cela inclut :

• Le fil d’Ariane ;
• Les liens globaux ;
• Les boutons d’appel à l’action ;
• Les zones de contenu standard ;
• Les liens de navigation principale.

De plus, les éléments de base pour créer des interfaces utilisateur (IU) en React comprennent des fichiers HTML et des éléments tels que des divs, des spans, des listes, etc., avec des attributs personnalisés appelés « props ».

Ces attributs fournissent des informations supplémentaires sur le comportement ou l’apparence de ces éléments à l’écran.

React est de nature composite. Il utilise le DOM virtuel pour simplifier la mise à jour de parties d’une application sans recharger la page entière. La bibliothèque responsable de cette fonctionnalité est ReactDOM.

Le DOM (Document Object Model) est une représentation structurée d’une page web et de son contenu. Il est actualisé par React pour offrir des expériences utilisateur plus rapides et fluides.

En un mot, React JS est une bibliothèque innovante qui facilite et accélère la création d’interfaces utilisateur pour les développeurs.

Bien que React JS soit une bibliothèque remarquable, l’optimisation des sites web React JS pour le SEO s’avère plus ardue que sur d’autres plateformes non-JavaScript basées sur LAMP, Ruby on Rails, etc.

Si vous souhaitez que votre application React JS soit bien classée dans les SERP et ait de bonnes chances d’être explorée et indexée, il est essentiel de suivre de bonnes pratiques SEO. En effet, ReactJS, tel qu’il est, n’est pas particulièrement propice au SEO.

Les étapes pour rendre React JS SEO-friendly

Le SEO pour les sites web utilisant React JavaScript requiert une combinaison d’approches techniques et orientées contenu.

Cela inclut de :

• Veiller à ce que le serveur fournisse du HTML rendu, également connu sous le nom de SSR (Server Side Rendering) ;
• S’assurer que tout le code soit valide et correctement formaté ;
• Établir des règles de base pour les URL dès le début du projet. Par exemple, des URL en minuscules, la séparation des mots par des tirets, des URL sans barre oblique finale ;
• Utiliser de manière appropriée les balises HTML telles que les H1 et H2 et l’HTML des images (texte alternatif, légendes, URL propres) ;
• Mettre en œuvre toutes les meilleures pratiques d’optimisations de page ;
• Minimiser tout fichier HTML, élément et attributs ;
• Coder les liens internes en HTML ;
• Optimiser la performance de vitesse globale.

Passer au rendu côté serveur (SSR)

Le Rendu Côté Serveur (SSR) est un processus qui génère le HTML sur le serveur avant de l’envoyer au navigateur de l’utilisateur. C’est un avantage pour les robots des moteurs de recherche comme Googlebot. Ils peuvent ainsi mieux comprendre le contenu et la structure de votre site.

La majorité des développeurs React utilisent un certain nombre de frameworks React pour activer le SSR. Le plus couramment utilisé et préféré pour ce faire est Next.js, bien qu’il existe d’autres options comme Gatsby, Grommet ou React Bootstrap.

NextJS, en particulier, facilite le Rendu Côté Serveur (SSR) et permet d’obtenir des temps de chargement plus rapides. Il transforme le code JavaScript en HTML, ce qui est essentiel pour le SEO.

Donc, si vous envisagez de construire votre prochain site en utilisant React JS et que vous souhaitez qu’il soit optimisé pour le SEO, pensez à Next JS !

Si Next JS n’est pas une option pour vous, peut-être parce que votre SPA React est déjà développé. Ainsi, vous avez la possibilité de faire un  pré-rendu avec des outils tels que Prerender.io et Rendertron.

Qu’est-ce que le rendu côté client, alors ?

Le Rendu Côté Client (RCC) est simplement le processus par lequel le fichier HTML est affiché dans le navigateur de l’utilisateur. C’est le comportement standard de ReactJS. Ici, pas besoin de pré générer le fichier HTML sur le serveur.

Par contre, cela peut poser des problèmes pour les robots des moteurs de recherche. Car, ils doivent exécuter le code Javascript avant d’accéder au contenu.

Googlebot, par exemple, peut attendre jusqu’à deux secondes pour que le fichier HTML soit généré et peut indexer le contenu à partir de ce fichier, mais ce n’est jamais aussi efficace qu’avec le SSR.

La création de HTML sémantique

Pour coder SEO-friendly sur les sites React, cela implique l’utilisation du HTML sémantique.

ReactJS rend l’utilisation du HTML sémantique facile grâce à JSX. Il permet de construire et de composer n’importe quel type d’éléments HTML valides, qu’ils soient sémantiques ou non. Voici un exemple :

Favoriser l’accessibilité lors du développement de sites web est une bonne pratique. Vous devriez donc réfléchir aux types d’éléments sémantiques à intégrer dans chaque composant React. Voici un court exemple pour une application React avec le HTML rendu :

Voici à quoi ressemblerait le HTML sémantique généré :

Voici comment fonctionne le scénario précédent :

• Le composant React appelé ‘App’ correspond à la structure du HTML fourni ;
• La fonction ‘renderPage’ utilise ‘renderToString’, une fonction de ‘react-dom/server’, pour transformer le composant ‘App’ en une chaîne de caractères. Cette chaîne peut être envoyée en réponse par le serveur ;
• Enfin, la fonction ‘renderPage’ est exportée pour être utilisée dans le code côté serveur. Elle permet de transformer le composant React en HTML.

Vous devez intégrer tout ceci dans la configuration de votre serveur pour gérer les demandes et fournir le HTML généré au client.

Le contenu apparaîtra alors de la manière suivante sur la page web front-end :

Navigation :

• Accueil
• Produits
• À propos
• Contact

Article :

• Titre : Mon site web parfait
• Section 1 : Excellente expérience utilisateur
  • Sous-titre : UX et Accessibilité
  • Contenu : Lorem ipsum tout sur l’accessibilité et l’UX ici
• Section 2 : Excellent SEO
  • Sous-titre : (Pas de sous-titre)
  • Contenu : La corrélation n’implique pas la causalité.
    • Source : L’art du SEO, une étude du monde réel
• Section 3 : Excellent contenu
  • Sous-titre : (Pas de sous-titre)
  • Contenu : Il s’agit probablement de tout le contenu.
• Téléchargement : Téléchargez cet article !

Pied de page :

• © 2024 Fait avec React – 1, rue de Napoléon, Paris 75008.

Astuce : Accessibilité des menus de navigation supérieure

La navigation mérite votre attention spéciale. Bien que le SSR React soit utilisé pour livrer le HTML directement depuis le serveur, les développeurs React ont tendance à développer des menus de navigation supérieure en Javascript.

Coder tout en HTML, en particulier les menus déroulants, peut être un peu plus délicat. Assurez-vous donc de soulever ce point assez tôt et de demander un menu de navigation supérieure entièrement accessible.

N’oubliez pas de le tester de manière appropriée en utilisant différents navigateurs avec le Javascript désactivé.

L’optimisation de tous les tags SEO essentiels

De l’importance des balises de titre aux balises alt des images, en passant par les méta-descriptions et l’url canonique, tous ces aspects nécessitent une vérification minutieuse.

Assurez-vous d’avoir un système permettant aux utilisateurs de modifier ces éléments et que l’interface utilisateur les récupère de manière appropriée.

Bien que tout cela semble élémentaire en SEO, ce sont des éléments qui méritent votre plus grande attention.

Dans le cadre de React, ces prérequis peuvent être satisfaits grâce à la bibliothèque react-helmet. Je vous encourage donc à vous familiariser avec elle et à en discuter avec vos développeurs.

La mise en œuvre du balisage de données structurées

Il est conseillé d’intégrer le balisage de données structurées (avis, événements, caractéristiques sectorielles, graphique, type de contenu) sur les sites Web ReactJs.

Le balisage de données structurées peut optimiser le SEO et faciliter la compréhension de votre site par les robots d’indexation. Il influence aussi la manière dont votre contenu est affiché dans les résultats de recherche Google.

Ce balisage peut être utilisé pour divers contenus comme les produits, les articles et les événements. Aussi, vous pouvez recourir à Schema.org pour le mettre en place sur votre site React JS.

Par exemple, ajouter un balisage de données structurées à une page peut aider les robots d’indexation à comprendre que votre site est lié à un magasin de détail spécifique.

Pour les réseaux sociaux, les protocoles Open Graph, comme ceux de Facebook et Twitter, peuvent également améliorer la compréhension de votre contenu web par Google et les utilisateurs.

L’élaboration de sitemaps HTML et XML

L’élaboration de sitemaps XML et HTML est avantageuse car elle ouvre plus de routes vers votre contenu. Même si vous utilisez des solutions comme le SSR, il est préférable de donner à Google une image complète de la structure de votre site à travers des sitemaps.

Un sitemap aide les moteurs de recherche à saisir le contenu de votre site web React JS, sa structure, son organisation et la fréquence de ses mises à jour.

Pour un site web complexe et de grande envergure, je conseille de mettre en place un multi-sitemap. Le sitemap principal comprendrait des références à d’autres sitemaps individuels. Ces sitemaps secondaires couvriraient chacun des silos ou segments du site web.

La division peut se faire par sujets, catégories, types de contenu ou toute autre forme de contenu structuré logiquement.

Il est essentiel de garder le sitemap à jour en y intégrant tous les URL de votre site web. Le sitemap peut ensuite être soumis aux principaux moteurs de recherche tels que Google, Bing et Yahoo.

Vous pouvez également identifier les pages HTML statiques sur votre site web React JS et les soumettre directement aux moteurs de recherche.

L’optimisation d’images

L’optimisation d’images est un aspect crucial du SEO React. Elle améliore le SEO et réduit les temps de chargement des pages. Assurez-vous donc que vos images soient bien compressées et de taille adéquate.

N’oubliez pas d’ajouter un texte alt descriptif pour chaque image. Cela aide les moteurs de recherche à comprendre le contenu de l’image. Aussi, votre site est plus accessible pour les utilisateurs malvoyants.

Le code Javascript peut être utilisé pour générer et ajouter un texte alt à vos images.

Pour les images, respectez les spécifications de taille et de dimension. De plus, évitez le chargement différé pour les images qui se trouvent au-dessus de la ligne de flottaison car cela peut affecter les performances.

La création de liens internes via HTML

Des pages web avec des liens internes solides sont plus aisément navigables et indexables pour les moteurs de recherche. Le maillage interne permet aux robots des moteurs de recherche de comprendre la structure de votre site web et les liens entre les pages.

Pour le SEO React, il est essentiel de s’assurer que les pages de votre site web sont liées entre elles et que le texte d’ancrage reflète le contenu de la page vers laquelle il pointe. Évitez les liens internes générés par JavaScript. Il est préférable de rester sur l’approche traditionnelle, favorable au SEO.

L’amélioration de la performance

La mise en place d’une application React SEO-friendly nécessite d’optimiser la performance et la sécurité. Il est important que vos pages se chargent rapidement pour les utilisateurs. Car, cela peut avoir un impact positif sur le SEO de votre site.

De plus, la sécurité de votre application est cruciale. Donc, l’utilisation du cryptage, du HTTPS et d’autres mesures sont recommandés.

Des outils comme Lighthouse peuvent être utilisés pour évaluer la performance et la sécurité de votre site. Il peut aussi offrir des suggestions pour optimiser le SEO de votre application React.

Considérez l’installation du module Webpack Bundle Analyzer avec NextJS. C’est un outil très apprécié par les développeurs. Il aide à optimiser la découpe des fichiers Javascript, entre autres.

Cela peut avoir un impact significatif sur la performance côté client. En outre, voici à quoi ressemble l’interface utilisateur de cet outil :

Un autre aspect à améliorer est le délai ou la latence sur le front-end JS. Utilisez Lighthouse et Webpagetest ou d’autres outils similaires, ou consultez vos rapports Web Core Vitals et tirez des conclusions après avoir analysé toutes les données.

L’implémentation d’un réseau de distribution de contenu

Un réseau de distribution de contenu (CDN) est une série de serveurs, répartis à travers le monde, qui délivrent du contenu aux utilisateurs en fonction de leur localisation géographique.

Utiliser un CDN peut améliorer le temps de chargement des pages et réduire la latence pour les utilisateurs partout dans le monde.

L’usage d’un CDN pour le référencement React aide aussi à minimiser le trafic réseau en mettant en cache le contenu HTML statique. Puis, il le distribue aux utilisateurs à partir de serveurs situés près de leur emplacement.

Le code Javascript peut également être configuré pour utiliser un CDN sur votre site web React JS via des services tiers, tels que Cloudflare.

Les avantages de faire de React JS SEO-friendly

Le SEO peut booster le classement et la visibilité de votre site web de diverses manières. L’on note :

• L’optimisation de l’accessibilité à votre site web ;
• Une meilleure prise en main de votre site web ;
• Un meilleur crawling et indexation du contenu de votre site par Google et les autres moteurs de recherches ;
• L’amélioration de l’expérience utilisateur (UX) ;
• L’augmentation de la visibilité sur les pages de résultats des moteurs de recherche (SERP).

Conclusion

Optimiser JavaScript React pour le SEO rendra votre site web plus accessible. Ce qui peut améliorer son classement. Cela peut également augmenter votre capacité à attirer un trafic pertinent.

En outre, cela peut améliorer l’expérience utilisateur, car des temps de chargement plus rapides et une meilleure structure de site facilitent la recherche.

Pour maintenir votre site web React optimisé pour le SEO, il est préférable de suivre plusieurs bonnes pratiques, comme l’utilisation du rendu côté serveur avec le framework NextJS.

NextJS offre une multitude de fonctionnalités SEO prêtes à l’emploi. Le vrai défi est d’effectuer des améliorations progressives dans l’optimisation du JavaScript afin d’accélérer votre site web.

Qu’avez-vous pensé de votre expérience avec React jusqu’à présent ? N’hésitez pas à partager vos réflexions ou à suggérer des ajouts à cet article.

FAQ

Alors que React Js devient de plus en plus populaire, de nombreuses questions se posent sur cette technologie. C’est parce qu’elle nécessite une compréhension élevée, et chaque cas nécessite une attention particulière. Voici quelques-unes des questions fréquemment posées :