Début mars, le SEOCamp accueillait Cédric Rambaud et Philippe Yonnet pour une conférence sur l’approche SEO à adopter face à des sites full JavaScript.
Au cours de cette conférence, ils ont expliqué comment se comportaient les moteurs de recherche face à ces sites et surtout comment il est possible de se positionner avec cette technologie.
D’abord, malgré sa complexité et son incompatibilité avec les moteurs la popularité des Framework JavaScript ne cesse de croître. Ces fonctions prédéfinis présentent de nombreux avantages :

  • Technologie moderne proposant de nouveau design et des interfaces riches.
  • Plus une application qu’un site web.
  • Amélioration de l’ergonomie et de l’expérience utilisateur.
  • Un seul langage pour créer un site.

Mais qu’en est-il pour nous les SEO ?

Fonctionnement des infrastructures JavaScripts.

Contrairement à un site classique qui suit le modèle de communication client-serveur, une application fondée sur JavaScript (Ajax et autres applications web) suit le modèle du “client-side rendering” à savoir :

La première requête charge le layout de la page, le CSS et le JavaScript. Il est fréquent qu’une partie ou tout le contenu ne soit pas chargé. Ensuite, le JavaScript envoie une seconde requête au serveur qui répond en JSON pour enfin générer le HTML approprié.

Client side rendering (sous Ajax)

Client side rendering (sous Ajax)

Les Framework JavaScript permettent de créer des applications web accessibles via une page web unique, on parle alors de SPA (Single Page Application) c’est le cas de Twitter par exemple, qui est une application mobile et desktop.

L’architecture version SPA supporte la rendition côté serveur c’est à dire que l’utilisateur obtiendra une page complète dès que le SPA est chargé pour la première fois.

architecture version SPA

Architecture version SPA

Cependant, ce modèle n’est pas compatible au SEO car les robots envoient des signaux qui sont associés à plusieurs pages.

Aujourd’hui, côté client 4 solutions s’affrontent BackBone, Knockout.JS, Ember.JS et AngularJS portées par Google.

Js coté client explosion angular

angular JS est le framework JS le plus populaire .

Ce modèle de développement soulève plusieurs problèmes.

 

Challenge n°1  :

Pour explorer un site full JS le bot télécharge le code HTML et analyse le contenu présent dans le code.

Le contenu en JS et Ajax est ignoré dans la plupart des cas à l’exception de Googlebot avec son headless browser.

 

Challenge n°2 :

Quoi indexer ? Le contenu change régulièrement en fonction des interactions.

Quels signaux ? Comment analyser les liens et le contenu d’une page ?

À quoi rattacher ces signaux ? Si la notion d’une page reliée à une URL a disparu, comment continuer à utiliser l’algorithme actuel ?

Challenge n°3 :

La rendition d’un site en full AngularJS n’est possible que si le JS est activé, dans le cas contraire le site est tout simplement invisible. Il est aussi difficile aux moteurs de recherche d’accéder aux contenus de ces sites pour les indexer, car le code source n’affiche que des variables.

Js active

Quand le JS est activé dans le navigateur.

sans js

Quand le JS est désactivé

code source full js

Un body full JS

Il n’est donc pas étonnant de constater un impact non négligeable sur la visibilité SEO de ces sites …

chute visibilite

Baisse de visibilité

Google et le JavaScript

Aujourd’hui, on sait que Google interprète le JS qui génère des title, meta description, robots meta tags : test à l’appui .

  • Google comprend les fichiers CSS et JS pour identifier une page mobile friendly ou détecter des éléments cachés.
  • Google sait lire les événements Onclick,
  • Google peut donc suivre les contenus générés dynamiquement dans le JS pour les indexer.

Mais de là à penser que Google peut tout lire est faux.  Dans le cas de l’Ajax qui ne nécessite pas événements pour être chargé, le moteur ne détecte aucun signal pour savoir comment déclencher l’Ajax.

Pour mieux crawler et indexer l’Ajax, Google proposait en 2009 la technique du hashbang  (#!). Techniquement, lorsque le robot rencontre une URL avec un hashbang il va crawler cette page et remplacer le hashbang par _escaped_fragment_ puis il va indexer la page sous sa forme d’origine. Mais aujourd’hui, cette technique est obsolète car Google prétend pouvoir lire les contenus générés en Ajax…

La méthode du pushstate proposé par l’IP history de HTML5 est une solution plus pérenne car les URL de navigation dynamique restent identiques. Elle a aussi l’avantage de permettre la navigation même lorsque l’internaute désactive le JavaScript car elle est incluse dans le HTML5. Concrètement, pushstate() change le chemin de l’URL qui apparaît dans la barre d’adresse de l’utilisateur. Pour le SEO c’est parfait, les moteurs peuvent lire ces URL et les différencier les unes des autres.

Il faut savoir que Google recommande aussi l’implémentation du Pushstate pour rendre son scroll infini SEO friendly.

Positionner un site utilisant un Framework JavaScript

Crawler et d’indexer un site réalisé avec un Framework JavaScript est possible, mais ce qui nous intéresse va être de positionner nos pages.

1/ Auditer son site

Dans un premier temps, si le test Fetch as Google ne parvient pas à rendre la page comme prévu. Il y a un problème.

La solution réside dans le headless browser : Un browser “headless” est un environnement logiciel pilotable en ligne de commande disposant d’un API JavaScript capable de rendre une page HTML complète en exécutant le HTML, CSS et JS tout comme un navigateur. On parle de headless car il ne dispose pas de GUI (d’interface utilisateur).

On peut simuler tout ce qui se passe dans le navigateur et donc tester les codes générés par les Framework JS et Ajax.

Remarque : ce type de crawl crée de “fausses visites” dans les outils de webanalytics (car ils exécutent tous les scripts sans exception).

Phantom JS et Casper JS sont des headless browser, le dernier a la particularité d’être un scrapper.

Vous pouvez aussi auditer avec Screaming Frog en mode “crawl JavaScript”.

Screaming Frog est un crawler orienté SEO, il dispose depuis peu d’un mode “headless browser” basé sur PhantomJS. Il peut ainsi crawler un site full Angular.

sfrog js

Cocher les JS, CSS et images dans la configuration spider

sfrog js crawl

Configurer la rendition JS, l’user agent et la taille d’ecran

Depuis janvier 2017 Botify offre également cette possibilité.

botify-logo

Logo Botify

2/ Comment rendre ces sites SEO friendly ?

Solution 1 : coder différemment avec une stratégie d’amélioration progressive.

Le principe de l’amélioration progressive consiste à construire son site en 3 couches :

  • Le contenu stocké dans le code HTML (contenu et fonctionnalités accessibles pour tous).
  • La mise en forme est définie par les feuilles de style en cascade externes (CSS).
  • Les fonctionnalités écrites dans un script externe comme JavaScript.

Solution 2 : Créer des snapshots HTML soi-même. Cette méthode est préconisée par Google pour l’Ajax.

En résumé, le code JS est exécuté via un headless browser côté serveur, afin de générer le HTML produit par le code JS.

Ce code est “capturé” avant d’être envoyé, comme une page HTML normale, au navigateur de l’internaute.

Néanmoins, cette méthode fait perdre une partie de l’intérêt du “client side rendering”, la page devient statique.

Souvent, l’arbitrage est d’envoyer les snapshots aux bots des moteurs de recherche uniquement.

Solution 3 : Utiliser un serveur de prérendition tiers. Les outils de pré-rendu de document facilitent le crawl de notre site.  Un serveur de prérendition permet de pré rendre vos pages statiques, dès que l’outil détecte qu’un crawler vient sur votre site, il lui affichera le rendu final HTML statique.

Les principaux outils de prérendition tiers sont : Prerender, SEO 4 Ajax (Cocorico !), Brombone.

Attention cette technique peut ressembler à du cloaking même si ce n’est pas le cas.

Aussi, les serveurs de rendition utilisent la méthode obsolète pour rendre l’Ajax crawlable. À savoir :

  • Soit la méthode des escaped fragments avec hash bangs (comme vu précédemment).
  • Soit la méthode des escaped fragments avec balise méta : <meta name=”fragment” content=”!”>

Attention, cette méthode en HTML5 utilisant la méthode pushstate() est aussi obsolète que l’autre. Pour le moment cette méthode fonctionne y compris sur les différents moteurs de recherche. Mais jusqu’à quand ?

Framework JavaScript : The next generation

L’avenir est aux Frameworks JavaScript “isomorphes” capables d’une rendition hybride (coté serveur et/ou client).

Avec ReactJS ou HapiJS, on peut donc générer le HTML avant de l’envoyer au navigateur. Il devient possible de créer des sites web avec des Framework JS, sans générer de problèmes avec le SEO.

Cependant, mal utilisés, ces Frameworks JS de dernière génération peuvent poser les mêmes problèmes que ceux expérimentés avec la première génération.

Notre mise en garde

Le développement en Framework JS est un casse-tête qui n’est pas insoluble, mais qui demande de solides compétences techniques côté SEO et développeurs.

Et dans tous les cas, c’est à réserver à des situations où le trafic SEO n’est pas stratégique pour le site :

On peut rendre les sites faits avec ces technologies crawlables et indexables.

Mais si l’on veut atteindre des positions sur des requêtes concurrentielles, il vaut mieux compter sur un site web en serveur side rendering à l’ancienne.