Slides présentées lors du Petit Déjeuner Search Foresight du 19 novembre 2015. Google vient d'annoncer qu'ils cessaient de promouvoir la méthode des "hashbangs" et des "escaped fragments" pour rendre les sites faits en ajax crawlables. Comment interpréter ce revirement, et comment Google se comporte vraiment avec des sites faits en Ajax. Point sur les bonnes pratiques dans ce domaine, en particulier pour les sites faits avec des technologies nouvelles comme Angular JS

1. Agence Conseil en stratégie digitale
SEO, CRO, Inbound Marketing, Analytics
10ème EDITION –
PETIT DÉJEUNER
SEARCH FORESIGHT
PARIS – 19 NOVEMBRE 2015
GOOGLE : PRISE EN CHARGE DE
L’AJAX ET DE L’ANGULARJS

2. 1
GOOGLE & AJAX
Agence Conseil en stratégie digitale
SEO, CRO, Inbound Marketing, Analytics

3. / En 2009 : Hashbang et escaped fragment
 En 2009, Google propose l’utilisation du
hashbang (escaped fragment) pour
mieux gérer l’AJAX.
 Principe : Utilisation habituelle du #
(hash) pour afficher un élément d’une
page côté client.
Ajout du ! (bang) pour le rendre
compréhensible par le moteur.
 Lorsqu’il rencontre une URL avec un
hashbang (#!) le moteur va la crawler en
remplaçant cet élément par un
_escaped_fragment_
 Puis il va indexer la page sous sa forme
originale.
- 3 -Search Foresight 2014 © Agence Conseil en Stratégie Digitale
GOOGLE ET L’AJAX

4. / En 2015 : Fin du Hashbang
 En 2015, Google ne recommande plus l’utilisation du hashbang.
 POURQUOI ?  Google indique être capable de crawler les pages qui utilisent du
Javascript pour générer du contenu.
 La seule condition sine qua non est de ne pas bloquer l’accès au CSS et au JS au moteur.
- 4 -Search Foresight 2014 © Agence Conseil en Stratégie Digitale
GOOGLE ET L’AJAX
+ = ?

5. / Faut-il laisser Google faire tout le travail ?
 Réponse facile : OUI. // Réponse
intelligente : NON.
 Google apprend encore à lire le
javascript, il trébuche et fait des erreurs.
 Le laisser s’occuper seul de la lecture de
pages dynamiques c’est le pousser dans
ses retranchements.
 Google recommande l’utilisation de
l’history API pushState() en HTML5 pour
s’assurer une meilleure explorabilité de
la part du moteur.
- 5 -Search Foresight 2014 © Agence Conseil en Stratégie Digitale
GOOGLE ET L’AJAX
« Si vous mettez du contenu dans un
tableau javascript qui s’affiche uniquement
lorsque l’on clique sur ‘…’, ce contenu ne
sera pas indexé par Google »

6. / Fonctionnement du PushState() HTML5
 Il s’agit d’une fonction javascript directement incluse dans le HTML5.
Concrètement, pushState() change le chemin de l’url qui apparait dans la barre
d’adresse de l’utilisateur.
 Quel intérêt pour le SEO ? Les moteurs seront capables de lire ces URL et de
les différencier des autres.
 Quand l’utiliser ? À chaque fois que l’on identifie un état qui correspond :
– À l’équivalent d’une page HTML complète (90% / 100% différente dans son contenu de l’état
précédent)
– À une page suffisamment différente pour justifier « son bookmarkage » dans un favori, dans un
lien externe, dans un retour en arrière dans l’historique
 Alors, on pousse l’url correspondant à cet état via la méthode pushstate après
déclenchant de l’évènement ou de l’action conduisant à ce changement d’état.
- 6 -Search Foresight 2014 © Agence Conseil en Stratégie Digitale
GOOGLE ET L’AJAX

7. / PushState() HTML5 Exemple
- 7 -Search Foresight 2014 © Agence Conseil en Stratégie Digitale
GOOGLE ET L’AJAX
 NB : exemple vidéo de l’application du pushstate(). Le ‘what’s this’ à droite ne change pas au clic sur le menu. L’URL
quant à elle est bien modifiée.

8. 2
ANGULAR JS ET
FRAMEWORK JAVASCRIPT
Agence Conseil en stratégie digitale
SEO, CRO, Inbound Marketing, Analytics

9. / De quoi parle-t-on ?
 Framework javascript créés pour construire des SPA (single page application).
 Application web via une seule page qui permet de ne pas charger de nouvelle page
pour une action.
 Problème posé : le code HTML est encapsulé dans du Javascript. Le contenu est parfois
directement généré par du javascript.
 Exemple de code HTML pour l’Angular JS :
- 9 -Search Foresight 2014 © Agence Conseil en Stratégie Digitale
ANGULAR JS
<a href="#" class="home" ng-click="active='home'">Home</a>
<a href="#" class="projects" ng-click="active='projects'">Projects</a>
<a href="#" class="services" ng-click="active='services'">Services</a>

10. / Angular JS mais pas seulement
 AngularJS est l’un des framework javascript les plus utilisés en ce moment mais il en existe
d’autres qui présentent les mêmes problématiques !
- 10 -Search Foresight 2014 © Agence Conseil en Stratégie Digitale
ANGULAR JS

11. / Lecture par Google – 2 cas de figure
 1er cas de figure : Google peut lire et interpréter le code et ainsi indexer
correctement les pages.  Question en suspens : Sera-t-il capable d’explorer
ces pages à chaque fois ?
 2e cas de figure : Google n’arrive pas à lire et interpréter le code et n’indexe
donc pas les pages.  Question : Peut-on prévenir ce problème ?
 Deux véritables façons de gérer cette problématique d’AngularJS :
1) Recetter notre site en Angular
2) Rendre un snapshot HTML à Google
- 11 -Search Foresight 2014 © Agence Conseil en Stratégie Digitale
ANGULAR JS

12. / Recetter notre site
 Pour bien recetter un site : il faut le crawler !
 Un crawler normal tel que Screaming Frog ne sait pas lire et interpréter le Javascript.
 Il faut alors crawler notre site avec un headless browser  Fonctionne comme un navigateur,
mais en ligne de commande.
 Un headless browser nous rendra ce qu’il voit. S’il voit bien ce que nous voulons (liens, etc.)
alors potentiellement Google aussi.
 À l’inverse, s’il ne voit pas les liens, etc. alors peut-être que Google non plus.
 Recette qui n’est pas 100 % viable et trop aléatoire.
- 12 -Search Foresight 2014 © Agence Conseil en Stratégie Digitale
ANGULAR JS

13. / Rendre un Snapshot HTML à Google
 C’est LA véritable façon de gérer un site fait en AngularJS.
- 13 -Search Foresight 2014 © Agence Conseil en Stratégie Digitale
ANGULAR JS
Le middleware créé vos snapshots puis..
Le middleware va
automatiquement télécharger
l’ensemble de vos pages à l’aide
d’un sitemap XML. Tous les appels
Ajax, le DOM, etc sont exécutés
via une simulation de navigateur.
Ensuite le middleware sauvegarde
le rendu dans une page HTML
statique SEO friendly.
… sert le Snapshot via un proxy
Quand Google voudra crawler
votre site, le middleware va alors
lui fournir le contenu HTML statique
grâce à un proxy. C’est la seule
étape qui nécessitera une attention
particulière afin de bien router les
snapshots au crawler de Google !
Vous êtes maintenant visible!
Google va maintenant voir une
page déjà chargée de ses
composants AJAX et JS ! Votre
page est en HTML pour le crawler
et peut maintenant s’indexer
correctement. On peut
maintenant travailler le SEO du
site.

14. / Middleware ?
 Utiliser son propre middleware. Eg : Un serveur avec Phantom JS qui génère des
snapshot de toutes nos pages + KPIs (res’time, meta, etc.).
 Fastidieux et compliqué.
 Utiliser un service open source comme Prerender.io qui fait tout ce travail de
rendering de façon efficace.
- 14 -Search Foresight 2014 © Agence Conseil en Stratégie Digitale
ANGULAR JS
OR

15. 3
CONCLUSION
Agence Conseil en stratégie digitale
SEO, CRO, Inbound Marketing, Analytics

16. / AJAX et ANGULARJS
 Google peut mieux interpréter le javascript aujourd’hui.
 La fin du hashbang ne signifie pas la prise en charge totale des contenus
dynamiques par Google.
 L’utilisation de l’angularJS n’est pas recommandée, mais il existe des solutions
pour la rendre SEO friendly.
 Tout cela nous amène à la nouvelle recommandation de Google : Codez
votre site en amélioration progressive.
- 16 -Search Foresight 2014 © Agence Conseil en Stratégie Digitale
CONCLUSION

17. / L’amélioration progressive
- 17 -Search Foresight 2014 © Agence Conseil en Stratégie Digitale
CONCLUSION
 Concevoir le site pour que
l’essentiel (le contenu) soit dans
du code simple, qu’il soit le
centre du développement du
site.
 Viendront ensuite s’ajouter les
couches CSS et JS pour embellir
le contenu.
 C’est LA méthode recommandée par
Google pour que le contenu d’un site
soit bien exploré et indexé  Se
concentrer sur l’essentiel.

18. Merci
- 18 -Search Foresight 2014 © Agence Conseil en Stratégie Digitale