Historiquement, les robots d’indexation des moteurs de recherche, comme celui de Google, n’étaient pas en mesure d’explorer et d’indexer le contenu généré dynamiquement via JavaScript. Ils ne pouvaient traiter que le contenu statique du code source HTML.

Toutefois, cette réalité a évolué en raison de l’expansion des sites Web reposant fortement sur JavaScript et des frameworks tels que Angular, React et Vue.JS, ainsi que des applications à page unique (SPA) et des applications web progressives (PWA). Google a révisé son ancienne méthodologie d’exploration AJAX et traite désormais les pages web à la manière d’un navigateur moderne avant de les indexer.

Bien que Google soit généralement capable d’explorer et d’indexer la plupart des contenus JavaScript, il recommande toujours l’utilisation du rendu côté serveur ou du pré-rendu, plutôt que de se reposer sur une approche côté client. Cela est dû à la complexité du traitement de JavaScript et au fait que tous les robots d’indexation ne sont pas nécessairement en mesure de le traiter efficacement ou instantanément.

Au vu de cette évolution et des avancées des moteurs de recherche, il est crucial de pouvoir lire le DOM après l’exécution de JavaScript pour comprendre les écarts par rapport à la réponse HTML initiale lors de l’évaluation des sites web.

Les bases du SEO avec JavaScript

L’audit d’un site web requiert une compréhension de sa structure et la connaissance de l’usage ou non d’un JavaScript côté client pour les contenus ou les liens essentiels. Les frameworks JavaScript peuvent varier considérablement, et leurs impacts sur le référencement peuvent différer de ceux d’un site HTML traditionnel.

Bien que Google puisse généralement explorer et indexer JavaScript, il existe des principes fondamentaux et des limitations qu’il convient de comprendre.

1. Toutes les ressources d’une page (JS, CSS, images) doivent être disponibles pour être explorées, rendues et indexées.
2. Google exige toujours des URL propres et uniques pour une page et des liens dans des balises d’ancrage HTML appropriées (vous pouvez proposer un lien statique, ainsi que l’appel d’une fonction JavaScript).
3. Les bots ne cliquent pas comme un utilisateur et ils ne chargent pas des événements supplémentaires après le rendu (un clic, un survol ou un défilement par exemple).
4. L’instantané de la page rendue est pris lorsqu’il est établi que l’activité du réseau s’est arrêtée, ou au-delà d’un certain seuil de temps. Si le rendu d’une page prend beaucoup de temps, il risque d’être ignoré et les éléments ne seront pas vus et indexés.
5. En règle générale, Google rendra toutes les pages, mais il ne mettra pas en file d’attente les pages dont la réponse HTTP initiale ou le code HTML statique contient la mention « noindex ».
6. Le rendu de Google est distinct de l’indexation. Google explore d’abord le code HTML statique d’un site web et reporte le rendu jusqu’à ce qu’il dispose de ressources. Ce n’est qu’à ce moment-là qu’il découvrira le contenu et les liens supplémentaires disponibles dans le code HTML rendu. Historiquement, cela pouvait prendre une semaine, mais Google a apporté des améliorations significatives au point que le temps médian est maintenant réduit à seulement quelques secondes.
   

Il est essentiel de connaître ces éléments dans le cadre du référencement JavaScript.

Google conseille d’utiliser l’amélioration progressive, c’est-à-dire de construire la structure et la navigation du site en utilisant uniquement le langage HTML, puis d’améliorer l’apparence et l’interface du site à l’aide de JavaScript.

Plutôt que de s’appuyer sur le JavaScript côté client, Google recommande le rendu côté serveur, le rendu statique ou l’hydration comme solution permettant d’améliorer les performances pour les utilisateurs et les robots des moteurs de recherche.

• Le rendu côté serveur (SSR) et le pré-rendu exécutent les pages en JavaScript et fournissent une version HTML initiale de la page aux utilisateurs et aux moteurs de recherche.
• L’hydratation et le rendu hybride (également appelé « isomorphe ») sont des situations où le rendu peut être côté serveur pour le chargement initial de la page,...