fabernovel loader

Nov 14, 2017 | 6 min de lecture

Tech

SEO : où en sommes-nous avec la gestion du JavaScript ? (partie 1)

Steve Mayenobe

Senior SEO Specialist


FABERNOVEL DATA & MEDIA
too long; didn't read
  • Si historiquement les robots d'exploration ne se concentraient que sur le HTML, depuis une petite dizaine d'années, Google change la donne et tente d'intégrer le JavaScript et CSS dans l'analyse.
  • Cependant cette intégration représente un coût (temps et argent) pour Google, qui par conséquent ne va pas hésiter à accorder moins de temps à certaines pages d'un site, impactant le référencement de ces dernières
  • Pour Google, les interactions avec le DOM (Document Objet Model) restent difficiles, rendant illisible la lecture de certaines pages, impactant négativement le référencement
  • Google met en garde contre l'utilisation de JavaScript trop complexe et préconise le respect des principes de l'amélioration progressive
  • Finalement, des solutions existent pour pallier aux problématiques évoquées. La solution idéale porte même un nom : l’isomorphisme
Historiquement les robots d'exploration des moteurs de recherche chargés d'analyser le contenu des pages n'interprétaient pas le Javascript, se concentrant essentiellement sur le HTML. Cependant, depuis un peu moins de 10 ans Google change la donne et accélère ses capacités en tentant d’analyser l'ensemble des fichiers, y compris les JavaScript et CSS. Mais quels sont impacts en terme de référencement naturel ?

Robots d’exploration : HTML, mais pas que…

Du HTML au JavaScript

Historiquement les robots d’exploration des moteurs de recherche chargés d’analyser le contenu des pages n’interprétaient pas le Javascript, se concentrant essentiellement sur le HTML. Cependant, depuis un peu moins de 10 ans Google change la donne et accélère ses capacités en tentant d’analyser l’ensemble des fichiers, y compris les JavaScript et CSS.

Cette évolution suit plus logiquement les tendances observées sur le web en terme de conception de sites web favorisant de plus en plus les interactions avec l’utilisateur. C’est ici que les bibliothèques JavaScript et frameworks entrent en jeu pour proposer de nouvelles expériences, plus fluides, plus rapides… en somme, plus « User-Friendly ». C’est dans ce contexte que Google initie un framework basé sur l’utilisation intensive de Javascript, AngularJS, imposant par la même un nouveau défi à Google. En effet, s’ils ne s’occupent que de l’observation des fichiers HTML, les robots d’exploration passent donc à côté d’une partie importante du contenu des sites web dernière génération. Il est donc désormais nécessaire d’imposer l’exploration de l’ensemble des fichiers disponibles, ceux qui permettent notamment de construire le DOM (Document Object Model) final d’une page.

Mais comment se fait l’exploration des pages ?

Le process d’exploration

(1) Lors de la saisie d’une URL dans le navigateur, celui-ci se charge d’effectuer une connexion avec le serveur du site web correspondant.

(2) Le serveur renvoie alors le document HTML au navigateur pour que celui-ci l’analyse. Historiquement les robots d’exploration n’allaient pas plus loin, et se cantonaient à la simple analyse du contenu HTML laissant ainsi de côté les autres liens (CSS, JS, etc) présent dans le code source.

(3) Désormais, une fois le document HTML analysé par le navigateur, de nouvelles requêtes sont effectuées par ce dernier pour obtenir l’ensemble des ressources associées  (CSS, JS, Données issues d’API, JSON etc). Dans le cadre d’un framework javascript, le HTML étant vide, impossible pour un robot de télécharger ces éléments complémentaires.

(4) Le serveur fait alors parvenir l’ensemble au navigateur qui peut enfin les associer pour construire l’ensemble des composantes de la page, ce que l’on appellera donc le Document Object Model (DOM).

(5) Ce DOM sera le document avec lequel l’internaute va pouvoir interagir. L’internaute, par ses interactions avec la page (clics sur certaines fonctionnalités/boutons, etc), peut déclencher de nouvelles requêtes pour obtenir une interface avec de nouveaux contenus.

Si Googlebot a dû apprendre à gérer ces trois dernières étapes pour s’assurer de capter l’ensemble des contenus diffusés, on peut s’interroger sur la difficulté qu’a représenté cette transition.

L’intégration du JavaScript, quelles conséquences ?

Le coût du changement pour Google

Pour Google, l’exploration du web n’est pas gratuite ! Elle représente un coût, aussi bien d’un point de vue financier qu’en terme de temps passé sur les sites. C’est d’ailleurs la raison pour laquelle les robots n’explorent qu’un nombre de pages et de ressources limité chaque jour sur votre site. De même, les théories voudraient que les robots ne s’orientent sur le JavaScript que très ponctuellement et de manière aléatoire, pour s’assurer que l’affichage du site web reste globalement le même, avec et sans les fonctionnalités supplémentaires offertes par le JavaScript. Cette démarche s’inscrit dans la volonté de Google de couper court les initiatives de certains éditeurs qui utilisaient le JavaScript dans l’optique de tromper Google, en présentant un contenu différent aux robots et aux internautes.

Quand le référencement naturel est menacé

Outre Google, l’intégration du JavaScript par les robots d’exploration n’est pas sans conséquence sur votre site dans la mesure où (comme nous l’avons mentionné précédemment) l’analyse du JavaScript correspond à du temps, et donc un coût, supplémentaire que l’on impose à Google qui en conséquent ne va pas hésiter à accorder moins de temps sur d’autres pages de votre site impactant ainsi le référencement de ces dernières.

De même, si l’analyse et l’interprétation d’un fichier JavaScript en temps que tel ne pose plus de soucis pour Google, en revanche, interagir avec le DOM, pour exécuter d’autres fonctionnalités, effectuer une requête, ou faire apparaître de nouveaux contenus, demeure une tâche bien plus complexe, voire impossible (e.g. les appels aux contenus distants sont asynchrones, ce qui demande au bot de patienter le temps que le site aient récupéré le contenu pour construire les pages. Parfois plusieurs appels sont nécessaires pour bâtir l’intégralité de la page. Mais comment le bot peut-il être sûr que tout est arrivé ?). Aussi, des frameworks comme AngularJS (pourtant porté par Google) ou des librairies comme ReactJS viennent compliquer, parfois même entraver, la phase d’exploration, en affichant certains contenus seulement après l’exécution de JavaScript, rendant illisible ces derniers par Google :

Exemple de vision de Googlebot sur un site proposant du ReactJS. Le contenu de flux de produits n’est pas affiché directement depuis le HTML proposé par le serveur, il est généré par le navigateur dans un second temps par des événements JavaScripts

Par ailleurs, l’exécution du JavaScript n’étant déjà pas systématique dans un souci d’économie, si elle nécessite en plus des interactions complexes (e.g. chargement d’un contenu dépendant de l’historique des interactions de l’internaute), il y a de fortes chances pour que votre référencement s’en trouve affecté et que votre concurrent qui propose un site plus simple à explorer obtienne les faveurs du moteur de recherche.

Voir au-delà du maillage interne

Pour explorer le web, les robots d’exploration circulent de pages en pages via des liens hypertextes. Si une page n’est pas correctement identifiable dans votre code source via un lien hypertexte, elle ne sera que peu (pas ?) explorée. Or, rappelons l’un des principes fondamental du SEO : l’intérêt que les moteurs de recherche apportent à une page est proportionnel à son nombre de liens entrants (internes ou externes au site). Bien malheureusement avec JavaScript, un bouton sans lien HTML apparent n’est pas un lien explorable. Une page non explorée ne sera donc pas analysée. Une page non analysée ne sera finalement pas référencée.

Ce qu’en dit Google

Même si nous savions que depuis 2010 Google avait les capacités d’observer le rendu final d’une page directement depuis les résultats de la recherche, Javascript et CSS compris, via Google Instant Preview, le moteur de recherche l’officialise seulement en 2015, mais met néanmoins en garde contre l’utilisation de JavaScript trop complexe et préconise le respect des principes de l’amélioration progressive pour construire un site, et s’assurer de la bonne interprétation des pages.

L’amélioration progressive consiste à créer des sites web prenant avant tout en compte l’accessibilité et la compréhension du contenu par tous les navigateurs, pour y ajouter ensuite des améliorations visuelles et/ou sémantiques pour les navigateurs capables de les intégrer.

En d’autres termes, il s’agit donc de créer des pages “web-basiques” (couche sémantique (XHTML, XML)) qui pourront être agrémentées de nouveaux éléments selon l’équipement de l’internaute : couche visuelle (CSS), puis une couche événementielle (JavaScript, AJAX).

 

Google oui, mais les autres ?

Nous parlons ici surtout de Google qui a su (en partie) s’adapter aux évolutions technologiques. Mais les moteurs comme Baidu (Chine), Yandex (Russie), Bing et bien d’autres n’ont pas encore communiqué sur ce sujet. Leur faible capacité à lire et interpréter le JavaScript est donc importante à souligner, même si nous savons qu’il y a de fortes chances que l’ensemble des autres ressources soient potentiellement analysées pour construire la page dans son rendu final. Attention donc si le marché sur lequel vous cherchez à référencer votre site n’a pas pour habitude d’utiliser Google.

 

Finalement, que faire ?

Finalement, on ne pourra que vous conseiller une chose : faciliter la vie des robots d’exploration afin d’avoir un site plus SEO-friendly que celui de vos concurrents.

Être SEO-friendly ne signifie pas pour autant bannir l’utilisation de technologies s’appuyant essentiellement sur du JavaScript comme AngularJS. La preuve en est, fabernovel.com a été conçu sous Angular ! Aussi, des solutions existent pour pallier aux problématiques évoquées. La solution idéale porte même un nom : l’isomorphisme.

Ces sujets vous interessent ? Vous souhaitez mettre en place une stratégie SEO performante et pérenne ?

Contactez-nous !
logo business unit

FABERNOVEL DATA & MEDIA

est une agence de performance multi-spécialiste, qui transforme la complexité du digital en pure performance. Experte en acquisition de trafic, optimisation de la conversion, et traitement et analyse de la donnée, FABERNOVEL DATA & MEDIA identifie et active les solutions les plus adaptées et innovantes pour ses clients.

à lire