Javascript : Comment tester l'implémentation SSR et/ou Pre-rendering avec Oncrawl ?

Diagnostiquer les problèmes de référencement avec l'implémentation JavaScript d'un site n'est pas toujours facile. Lorsque vous optez pour le rendu côté serveur ou le pré-rendu pour les bots, la tâche peut devenir encore plus complexe.
Vous devez vous assurer que la version servie aux bots Google est complète, que tous les éléments javascript ont été exécutés côté serveur et sont présents dans le html crawlé par le bot.
Dans cet article, nous allons voir comment tester rapidement et facilement votre rendu JS de toutes vos pages grâce à Oncrawl.

SEO et JS

Avant de commencer la pratique, passons rapidement en revue l'intérêt en SEO du Server Side Rendering (SSR) et du Pre-rendering des éléments javascript d'un site.

JS et Google : bonnes pratiques

Par défaut, le rendu HTML de javascript est fait par le client, c'est-à-dire votre navigateur web. Lorsque vous demandez une page contenant des éléments JS, c'est votre navigateur qui exécute ce code javascript pour afficher la page complète. C'est ce qu'on appelle le rendu côté client (CSR).

Pour Google c'est un problème car cela demande beaucoup de temps et surtout de ressources. Il l'oblige à parcourir votre page deux fois, une fois pour récupérer le code, puis une seconde fois après avoir rendu le HTML du JS.

Conséquence directe de la RSE pour votre référencement, le contenu complet de vos pages ne sera pas visible immédiatement par Google et donc cela peut retarder l'indexation de celles-ci. De plus, le budget de crawl qui est accordé à votre site est également impacté car vos pages doivent être crawlées deux fois.

Le SSR (rendu côté serveur)

Dans le cas de SSR, le rendu HTML du javascript se fait côté serveur pour tous les visiteurs du site, humains et bots. En conséquence, Google n'a pas besoin de gérer le contenu en JS car il récupère directement le html complet au moment du crawl. Cela corrige le défaut de javascript dans le référencement.

En revanche, le coût des ressources pour réaliser ce rendu côté serveur peut être important. C'est là qu'intervient la troisième option, le pré-rendu.

Pré-rendu

Dans cette configuration hybride, l'exécution du JS se fait côté client pour tous les visiteurs (CSR) à l'exception des bots des moteurs de recherche. Un contenu HTML pré-rendu est servi aux bots de Google afin de conserver les avantages SEO du SSR mais aussi les avantages économiques du CSR.

Cette pratique qui à première vue pourrait être considérée comme du cloaking (offrir différentes versions aux bots et aux visiteurs d'une page web) est en fait une idée de Google qui est fortement recommandée. On devine facilement pourquoi.

Comment tester le rendu Javascript avec Oncrawl ?

Il existe de nombreuses façons de diagnostiquer les erreurs de référencement dans la mise en œuvre de JS. En utilisant Oncrawl vous pourrez tester automatiquement toutes vos pages sans avoir à faire de comparaisons manuelles.

Oncrawl est capable de crawler un site en exécutant javascript côté client. L'idée est de lancer deux crawls et de générer une comparaison entre :

• Un crawl avec le rendu JS activé
• Un crawl avec le rendu JS désactivé

Ensuite de mesurer à travers plusieurs métriques les différences entre ces deux crawls, signe qu'une partie du javascript n'est pas exécutée côté serveur.

Notez qu'en cas de pré-rendu, la deuxième exploration doit être effectuée avec un agent utilisateur Google afin d'explorer la version pré-rendu du site.

Ce test peut se faire en trois étapes :

1. Créer les profils de crawl
2. Crawlez le site avec chaque profil et générez un crawl over crawl
3. Analysez les résultats

Créer les profils de crawl

Le profil avec JS

Depuis la page de votre projet, cliquez sur "+ Configurer un nouveau crawl" .

Cela vous amènera à la page des paramètres d'exploration. Vos paramètres d'analyse par défaut s'affichent. Vous pouvez soit les modifier, soit créer une nouvelle configuration de crawl.

Un profil d'analyse est un ensemble de paramètres qui a été enregistré sous un nom pour une utilisation future.

Pour créer un nouveau profil de crawl, cliquez sur le bouton bleu "+ Créer un profil de crawl" dans le coin supérieur droit.

Nommez-le « Crawl with JS » et copiez votre profil de crawl habituel (le Default par exemple).

Pour activer le JS sur ce nouveau profil, vous devez afficher les paramètres supplémentaires qui sont cachés par défaut. Pour y accéder, cliquez sur le bouton "Afficher les paramètres supplémentaires" en haut de la page.

Ensuite, allez dans les paramètres supplémentaires et cliquez sur "Activer" dans l'option Crawl JS.

Note : Pensez à adapter votre vitesse de crawl à la capacité des serveurs de votre site, car Oncrawl fera beaucoup plus d'appels par URL afin d'exécuter les éléments en Javascript. La vitesse idéale est celle que votre serveur et l'architecture de votre site peuvent le mieux supporter. Si la vitesse de crawl d'OnCrawl est trop rapide, votre serveur peut ne pas être en mesure de suivre.

Le profil sans JS

Pour ce deuxième profil de crawl, suivez les mêmes étapes et décochez la case JS enable .

Remarque : il est important d'avoir deux profils avec un périmètre identique pour que la comparaison ait un sens.

Si votre site est en rendu côté serveur, passez à l'étape suivante.

Si votre site est en pré-rendu basé sur les robots Google, vous devez nous envoyer une demande de modification de l'agent utilisateur pour le crawl. Une fois le profil créé, envoyez-nous un message via Intercom directement dans l'application afin que nous puissions remplacer l'Oncrawl User Agent par un Google bot User Agent.

Commencez votre essai gratuit de 14 jours

Découvrez par vous-même pourquoi Oncrawl est la plateforme SEO technique et data la plus reconnue du marché ! Aucune carte de crédit requise et aucune condition : seulement 14 jours d'essai complet.

Commencez votre essai

Lancez vos crawls et générez un Crawl over Crawl

Une fois les deux profils créés, il ne vous reste plus qu'à crawler votre site avec ces deux profils à tour de rôle. Pour vous faciliter la tâche, vous pouvez utiliser la fonction de programmation du crawl.

Planifier une exploration

• Sur la page du projet, cliquez sur l'onglet "Explorations planifiées" en haut de la boîte de suivi de l'exploration.

• Cliquez sur « + Planifier un crawl » pour planifier un nouveau crawl.
• Vous devrez alors choisir :
  • Le profil de crawl que vous souhaitez utiliser pour le futur crawl
  • La fréquence de répétition du crawl, choisissez "Juste une fois".
• La date, l'heure (au format 24 heures) et le fuseau horaire (par ville) auxquels vous souhaitez que l'exploration commence.
• Cliquez sur "Planifier l'exploration" .

Une fois que les deux analyses de vos crawls sont disponibles, vous devez générer un crawl over crawl.

Générer un Crawl over Crawl

• Depuis la page d'accueil du projet, lancez un crawl over crawl :
  • Sous "Tâches", cliquez sur l'onglet "Running Crawl over Crawls" .

• • Cliquez sur « + Démarrer le crawl sur le crawl » .
  • Sélectionnez les deux crawls que vous souhaitez comparer.

Lorsque vous cliquez sur « + Run Crawl Over Crawl » , Oncrawl analyse les différences entre les deux crawls existants et ajoute le rapport Crawl Over Crawl aux résultats d'analyse des deux crawls.
Vous pouvez suivre la progression de ce crawl over crawl dans l'onglet "Start crawl over crawl" sur la page d'accueil du projet. Comme le crawl est déjà terminé, le sur-crawl ignorera l'état "Crawling" et commencera directement avec "Analysis".

Analysez les résultats

Accédez au rapport crawl over crawl sur les trois vues suivantes :

• Structure
• Contenu
• Maillage interne

Vous pouvez également télécharger notre tableau de bord personnalisé.

Quels indicateurs consulter ?

Page explorée, Nombre moyen de mots par page et Rapport texte/code moyen

Le premier indicateur Page crawlée vous indique immédiatement si les deux profils ont crawlé le même nombre de pages.
Si la différence n'est pas significative, vous pouvez vérifier deux indicateurs sur la page :

• Nombre moyen de mots par page
• Rapport texte/code moyen

Ces deux métriques mettront en évidence une différence de contenu html avec ou sans exécution javascript côté client.

S'il y a moins de mots par page en moyenne, cela signifie qu'une partie du contenu de la page n'est pas disponible sans rendu JS.

De même, si le rapport texte/rapport est inférieur, cela signifie qu'une partie du contenu de la page n'est pas disponible sans le rendu JS.

Le rapport texte/code mesure la quantité de contenu d'une page qui est visible (texte) et la quantité de contenu codé (code). Plus le pourcentage rapporté est élevé, plus la page contient de texte par rapport à la quantité de code.

Profondeur, Inrank et Inlinks

Vous pouvez alors regarder les métriques liées à votre maillage interne qui sont plus sensibles. Qu'une petite partie du contenu de la page ne soit pas disponible sans rendu JS n'est pas forcément problématique pour votre référencement, mais si cela impacte votre maillage interne, les conséquences sur la crawlabilité de votre site et le budget de crawl sont plus importantes.

Comparez la profondeur moyenne, l'Inrank moyen, le nombre moyen d'Inlinks et de liens sortants internes.

Une profondeur moyenne croissante, un inrank moyen décroissant et un nombre moyen d'inlinks et outlinks décroissant sont des indicateurs de l'existence de blocs maillés gérés en JS non pré-rendus côté serveur. Par conséquent, certains des liens ne sont pas immédiatement disponibles pour le bot Google.

Cela peut avoir des conséquences sur tout ou partie de votre site. Il faut alors étudier ces modifications par groupe de pages pour identifier si certains types de pages sont défavorisés par ce maillage javascript.

L'explorateur de données vous permettra de jouer avec les filtres pour mettre en avant ces éléments.

Allez plus loin avec l'explorateur de données et les détails de l'URL

Dans l'explorateur de données

Lorsque vous regardez les données Crawl over Crawl dans l'explorateur de données, vous verrez deux colonnes d'URL : une pour les URL Crawl 1 et une pour les URL Crawl 2.
Vous pouvez ensuite ajouter chacune des métriques mentionnées ci-dessus (pages crawlées, nombre de mots, ration de texte à code, profondeur, inrank, inlinks) deux fois chacune pour afficher la valeur de Crawl 1 et Crawl 2 côte à côte.
En utilisant les filtres, vous pourrez identifier les URL avec les plus grandes différences.

Détails de l'URL

Si vous avez identifié des différences entre la version SSR et/ou pré-rendu et la version rendue côté client, vous devrez entrer plus en détail pour comprendre quels éléments JS ne sont pas optimisés pour le référencement.

En cliquant sur une page dans l'explorateur de données, vous passez aux détails de l'URL et vous pouvez ensuite afficher le code source tel qu'il est vu par Oncraw en cliquant sur l'onglet "Afficher la source".

Vous pouvez ensuite récupérer le code HTML en cliquant sur Copier le source HTML.
En haut à gauche, vous pouvez passer d'un crawl à l'autre pour récupérer l'autre version du code.

En utilisant un outil de comparaison de code html, vous pouvez comparer les deux versions d'une page, avec JS et sans JS exécuté côté client. Pour le reste, c'est à vous !