Les bonnes pratiques SEO avec

les frameworks JavaScript

25 mars 2017

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.

3Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics

Qu’est ce qu’un frameworkJavaScript ?

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

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.

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

Les challenges

6

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.

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.

Challenge SEO

9

Challenge n°4 :

• Et notre visibilité SEO on en fait quoi ?

OUPSS

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

Google et le javascript

10

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.

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.

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

Positionner son site

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.

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.

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.

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.

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.

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.

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

Frameworks javascript :The next generation

20

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.

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

Conclusion

22

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.

Merci !