Dans la liste récemment publiée par Forbes des principales statistiques sur les sites web pour 2024, nous avons appris qu'il y a environ 1,09 milliard de sites web actuellement en vie sur Internet ( !). Parmi ce milliard de sites web, comment les utilisateurs (et les clients potentiels) trouveront-ils votre site web ? Le plus souvent, ils commenceront par utiliser un moteur de recherche. Toutefois, pour que le moteur de recherche conduise les utilisateurs vers votre site, vous devez faire vos devoirs en matière de référencement.
Le référencement permet à votre site web d'être bien classé dans les moteurs de recherche. S'il est correctement mis en œuvre, le référencement génère du trafic vers votre site. Cependant, les sites construits sur des frameworks JavaScript modernes, tels que React ou Vue.js, s'appuient fortement sur le rendu côté client, et les moteurs de recherche ont souvent du mal à indexer correctement ces types de sites. Vous vous retrouvez donc avec une faible visibilité dans les résultats de recherche.
Cela nous amène au prerendering. Le prérendu consiste à générer une version HTML statique de vos pages web qu'un moteur de recherche peut facilement explorer et indexer. Cette technique peut avoir un impact considérable sur le succès de votre site en matière de référencement.
Dans cet article, nous verrons comment les services de prerendering de Prerender.io peuvent vous aider à surmonter les obstacles au référencement lorsque vous utilisez ces frameworks. Nous vous indiquerons également la marche à suivre pour mettre en œuvre le prerendering au niveau du serveur web ou de l'application.
Allons-y.
Le défi du référencement avec les frameworks JavaScript
Pourquoi le référencement est-il un défi lorsqu'il s'agit d'utiliser des frameworks comme React ou Vue.js ? Les moteurs de recherche traditionnels sont conçus pour lire du HTML statique. D'autres peuvent gérer une partie du JavaScript et rendre les pages partiellement, mais ils ont leurs limites. Lorsque votre site est fortement axé sur le rendu côté client, un moteur de recherche n'explorera et ne rendra probablement pas la page dans son intégralité, de sorte qu'il ne verra pas le contenu complet et réel pour l'indexation.
À titre d'exemple, Google fournit les conseils suivants aux créateurs de sites rendus côté client :
Le rendu dynamique était une solution de contournement et non une solution à long terme pour les problèmes liés au contenu généré par JavaScript dans les moteurs de recherche. Nous vous recommandons plutôt d'utiliser le rendu côté serveur, le rendu statique ou l'hydratation comme solution.
Quel est l'impact sur votre référencement ? Naturellement, une indexation partielle ou tardive aura une incidence sur le classement de votre site web dans les moteurs de recherche. En conséquence, votre site risque d'apparaître tardivement dans les résultats de recherche, ce qui se traduit par des occasions manquées de trafic organique. L'indexation incomplète ou tardive peut signifier qu'un moteur de recherche doit effectuer une deuxième exploration de votre site, ce qui entraînera des retards supplémentaires.
Si l'on examine à nouveau le conseil de Google ci-dessus, on constate qu'il est recommandé d'utiliser un "rendu statique" - et, dans une certaine mesure, c'est ce que le prerendering permet d'obtenir.
Comment Prerender.io résout ce problème
Le prerendering comble essentiellement le fossé entre les capacités dynamiques des frameworks JavaScript modernes et le besoin d'un contenu HTML statique avec lequel les robots des moteurs de recherche peuvent travailler. Voyons comment cela fonctionne avec Prerender.io.
Prerender.io exécute le JavaScript sur vos pages dans un navigateur sans tête, rendant le contenu complet. Ensuite, il enregistre ce contenu rendu en tant que HTML statique. Lorsqu'un robot de moteur de recherche explore votre site et demande une certaine page, vous demandez à Prerender.io de servir le HTML pré-rendu au lieu de votre page riche en JavaScript. De cette façon, les moteurs de recherche peuvent accéder rapidement et facilement au contenu complet de vos pages pour l'indexation, sans avoir besoin de traiter un JavaScript complexe.
Quels sont les avantages de cette approche ?
- Amélioration du référencement: Parce que Prerender.io peut fournir aux moteurs de recherche un rendu HTML complet, votre contenu sera indexé correctement et rapidement. Cela améliore votre classement dans les moteurs de recherche et augmente la visibilité de votre site.
- Chargement plus rapide des pages: Lorsque vous utilisez Prerender.io pour servir du HTML statique à un robot de moteur de recherche, vous réduisez la charge sur vos serveurs. Les crawlers d'innombrables moteurs de recherche étant constamment en activité, le fait de décharger leurs requêtes vers Prerender.io peut améliorer les temps de chargement des pages et l'expérience utilisateur pour vos utilisateurs réels.
- Une meilleure expérience pour l'utilisateur: Un chargement plus rapide des pages et une indexation plus précise augmentent les chances des utilisateurs de trouver rapidement votre site et de bénéficier d'une expérience de navigation plus positive.
Nous avons examiné le quoi, le comment et le pourquoi. Passons maintenant à l'essentiel.
Implémentation de Prerender.io dans votre application Web
Pour intégrer Prerender.io dans votre application web, les deux approches les plus simples sont de le faire au niveau du serveur web ou au niveau du code de l'application. Examinons chacune d'entre elles plus en détail.
Approche 1 : Au niveau du serveur web
Si vous déployez une application Node.js sur Linode, vous utilisez probablement l'applicationNode.js one-click marketplace pour vous aider à démarrer rapidement. Après avoir créé un nouveau Linode, l'application vous aidera à lancer Nginx, Node.js, NPM et PM2.
Pour utiliser Prerender.io avec Nginx, vous pouvez suivre le guide d'intégration pour Nginx. Tout d'abord, vous allez créer une copie de sauvegarde du fichier nginx.conf de votre système. Vous utiliserez le module ngx_http_map_module pour créer certaines variables basées sur les valeurs d'autres variables.
Vous allez éditer votre fichier nginx.conf pour y insérer des sections du fichier de configuration de l'exemple Nginx de Prerender.io. Tout d'abord, vous ajouterez les blocs suivants à votre section http.
map $http_user_agent $prerender_ua { |
Le premier map ci-dessus examine l'agent utilisateur d'une requête HTTP. Si l'agent utilisateur figure dans la liste des robots des moteurs de recherche, il déclenche diverses autres variables et configurations pour préparer la redirection vers Prerender.io.
Ensuite, dans le cadre de la location ajoutez ce qui suit pour réécrire l'URL et ajouter le préfixe prerenderio/ chemin :
if ($prerender = 1) { |
Enfin, ajoutez le bloc d'emplacement pour le prerenderio/ chemin :
location /prerenderio { |
Ce site location indique à Prerender.io de rendre la page de destination prévue et de servir le HTML statique. Pour l'authentification, assurez-vous de remplacer YOUR_TOKEN avec votre jeton de compte Prerender.io. Dans le cas où Prerender.io a déjà rendu cette page dans le passé, il peut servir une version en cache (en fonction de la façon dont vous mettre en place la mise en cache dans votre compte Prerender.io).
Le guide d'intégration Nginx de Prerender.io est très complet. Si vous utilisez Apache au lieu de Nginx, vous pouvez vous référer au guide d'intégration du serveur web Apache .
Les quatre étapes de base pour intégrer Prerender.io
D'une manière générale, quelle que soit l'approche, l'intégration de Prerender.io dans votre application implique les étapes suivantes :
- Détecter les robots d'indexation. Inspecter l'en-tête de l'agent utilisateur dans les requêtes. Dans l'exemple de Nginx ci-dessus, il suffit de regarder l'en-tête
$http_user_agentvariable. - Redirection vers prerender.io. Transférer les requêtes des robots vers Prerender.io pour le rendu.
- Modifier les chemins d'accès aux requêtes. Assurez-vous que vos chemins d'accès sont correctement formatés pour Prerender.io, qui s'attend à ce que l'URL complète soit le chemin d'accès.
- Gérer la mise en cache. Trouvez l'équilibre entre l'utilisation de Prerender.io pour servir des pages HTML statiques en cache (pour plus de rapidité) et l'utilisation de Prerender.io pour recacher le contenu mis à jour de votre site (pour plus de fraîcheur). Voir les conseils de Prerender.io sur la mise en cache.
Approche 2 : Dans le code de votre application (Node.js Express)
Si votre application utilise un framework JavaScript (tel que React, Vue.js ou Angular) pour le front-end, vous pouvez configurer le serveur d'application de votre front-end pour qu'il exécute les quatre étapes de base énumérées ci-dessus.
Si vous utilisez Express pour servir votre front-end, vous pouvez profiter de l'intergiciel préconstruit de Prerender.io, qui fera tout cela pour vous. Vous pouvez consulter le guide d'intégration Node de Prerender.io pour plus de détails. Pour résumer, voici ce que cela implique :
Installez le paquetage Node.js :
npm install prerender-node --save |
Ajoutez le code suivant à votre fichier principal index.js ou app.js où votre application Express Server est définie :
app.use(require('prerender-node').set('prerenderToken', 'YOUR_TOKEN')); |
Là encore, pour l'authentification, veillez à remplacer YOUR_TOKEN avec votre jeton de compte Prerender.io.
Redémarrez ensuite votre serveur Express.
C'est tout ce qu'il y a à faire !
Conclusion
Le pré-rendu de vos pages peut vous aider à résoudre les problèmes de référencement lorsque vous utilisez des frameworks JavaScript modernes et le rendu côté client. Prerender.io rend vos pages à l'avance et fournit ensuite ce HTML statique aux robots des moteurs de recherche. De cette façon, vous pouvez vous assurer que votre contenu est entièrement accessible aux robots des moteurs de recherche, ce qui se traduit par une indexation précise et un meilleur classement dans les résultats de recherche. En résolvant ce problème de référencement, votre site web bénéficiera d'une meilleure visibilité et d'un trafic organique accru.
En associant ces techniques de pré-rendus aux solutions de Cloud Computing faciles à gérer d'Akamai, vous obtiendrez en un rien de temps des sites optimisés pour le référencement. Pour plus de conseils et de guides sur la façon de tirer le meilleur parti des services de cloud computing d'Akamai lors du déploiement de vos applications, consultez notre riche bibliothèque de documents.
Commentaires