L’occasion de faire le point sur la façon dont Google prend en compte les contenus générés en javascript, l’Ajax, et sur les différentes méthodes pour rendre les pages web réalisées à partir de frameworks javascript comme AngularJS ou EmberJS crawlables. Intervenant : Jean Orphée Sane - Analyste SEO - Search Foresight

1. Les bonnes pratiques SEO avec
les frameworks JavaScript
25 mars 2017

2. Contexte
2
La popularité des Frameworks JavaScript ne cesse de croître malgré des infrastructures complexes et incompatibles avec
les moteurs.
Ces fonctions prédéfinis présentent de nombreux avantages :
• Un seul langage pour créer un site.
• Amélioration de l’ergonomie et de l’expérience utilisateur.

3. 3
Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Qu’est ce qu’un framework
JavaScript ?

4. Fonctionnement des infrastructure Javascript
Un site classique qui suit le modèle de communication client-serveur.
Une application fondée sur JavaScript (Ajax et autres) 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é.

5. Single page application
5
Les Framework JavaScript permettent de créer des applications web accessibles via une page web unique, on parle
alors de SPA (Single Page Application).
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.

6. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Les challenges
6

7. Challenges SEO
7
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. Bien souvent 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.
• 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 ?
Je parle couramment HTML
mais en Js et en Ajax je suis
moyen.

8. Challenge SEO
8
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.

9. Challenge SEO
9
Challenge n°4 :
• Et notre visibilité SEO on en fait quoi ?
OUPSS

10. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Google et le javascript
10

11. Google et le JavaScript
11
Aujourd’hui, on sait que Google interprète le JS qui génère des title, meta description, robots meta tags.
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.
Concernant l’AJAX, il s’agit d’une tout autre histoire.

12. Google et AJAX
12
Pour mieux crawler et indexer l’Ajax, Google proposait en 2009 la technique du hashbang (#!). Mais aujourd’hui, 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.
Pour le SEO le pushstate est parfait car les moteurs peuvent lire ces URL et les différencier les unes des autres.

13. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Positionner son site

14. 1/ Fetch as Google
14
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.

15. 2/ Auditer son site
15
La solution réside dans le headless browser : Un Headless Browser ou navigateur sans tête est un navigateur web sans
interface graphique utilisable uniquement 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.
Phantom JS et Casper JS sont des headless browser, le dernier a la particularité d’être un scrapper.

16. Crawl JavaScript sous Screaming Frog et Botify
16
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.

17. 3/ Rendre son site SEO friendly
17
Solution 1 : coder 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.

18. 3/ Rendre son site SEO friendly
18
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.
Souvent, l’arbitrage est d’envoyer les snapshots aux bots des
moteurs de recherche uniquement.

19. 3/ Rendre son site SEO friendly
19
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.

20. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Frameworks javascript :
The next generation
20

21. Framework JavaScript : The next generation
21
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.

22. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Conclusion
22

23. 23
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.

24. Merci !