“Comment bien référencer un site fait avec un framework javascript (angularJS, ReactJS, etc.) ?” 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 mieux référencer les pages web réalisées à partir de Frameworks Javascript comme AngularJS ou EmberJS crawlables… Intervenant : Philippe Yonnet, Directeur Général Search Foresight

1. Sites javascript et
compatibilité SEO
22/03/2018
1

2. Philippe Yonnet
CEO et fondateur – Search Foresight
2

3. Programme de l’atelier
45mn : 15 mn de presentation – 15 mn d’application – 15 mn de QA
3
Présentation de
l’agence
Présentation des bases
sur la technologie
derrière les frameworks
JS
Reconnaître les
implémentations
SSR
Les
bonnes pratiques
Tester les
implémentations CSR
#S4sight @s4sight
Conclusion

4. L’AGENCE SEARCH MARKETING
DU GROUPE MYMEDIA

5. Des experts certifiés
La garantie d’un conseil à la pointe du Search Marketing
Google Adwords 
Analytics
CESEO
Botify
Crawl  Analyse de logs
1ère agence certifiée
de France
• 15 experts certifiés Adwords
• 7 certifiés Google Analytics
• Agence agréée Google
Partner Premier
• Membre
« Google s’engage »
Bing
Google Partner
Experts certifiés
5

6. Une expertise technique
approfondie et operationnelle
Nous saurons vous aider à implémenter nos recommandations
Parietal Lobe
Moteurs de
recherche interne
Outils de
webanalyse
Plateformes
Ecommerce
CMS
6

7. Nous vous accompagnons dans votre
développement international
Des experts Search locaux pilotés par nos équipes
pour adresser vos problématiques SEO et SEA dans le monde
7
Un réseau d’experts
internationaux
• Langue Locale + Anglais/Français
• Des experts natifs et locaux
• Profils seniors : 5 ans d’expérience + certifications Search
+ formations SF
Plusieurs langues et zones
couvertes
• Principaux pays d'Europe (Allemagne, Italie,
Royaume-Uni, Espagne, Pays-Bas)
• Etats-Unis, Chine et Canada
• Partenaires ou sourcing ad-hoc sur les autres zones

8. Du SEO au SXO
Le Search est un carrefour entre vos utilisateurs ayant une intention
et les contenus et services dont votre marque dispose.
Inbound
Marketing
Construire un parcours Search optimisé
SEO
Développer une stratégie de contenus
INBOUND MARKETING & CONTENT MARKETING
Optimiser la conversion
CONVERSION RATE OPTIMIZATION
1 2
3
4
Utiliser les effets de leviers sociaux
SOCIAL MEDIA OPTIMIZATION
8

9. Notre centre de formation : SF University
Découvrir ou se perfectionner au SEO-SEA au travers de modules techniques ou marketing adaptés a tous.
 Organisme de formation agréé depuis 16 ans
 L’offre de formation Search Marketing la plus pointue du marché
 Plus de 600 participants en formations inter, intra, Académies &
Kickoff
 Cycles de formation sur mesure : Evaluer, Former et faire Evoluer
 Partenaires des réseaux et animations des sessions
 Certificat Grandes Ecoles
9
Formation INTER
Sessions organisées régulièrement sur Paris,
selon un calendrier fixé à l’avance.
Maximum une quinzaine de participants.
La formule la plus économique.
Formation INTRA
Formations sur-mesure destinées aux
salariés d’une même entreprise ayant pour
objectif d’être à l’écoute des besoins
spécifiques de l’entreprise.
Cycles de formations
avancés
•Formation SEO For Experts
•Formation SEO For GURUS
>> Devenez des professionnels du Search

10. SF vous partage sa passion du Search
Chaque semaine, de nouvelles ressources à votre disposition en exclusivité
10
Des prises de parole chaque semaine
Un accès en avant première aux web-conférences
Search Foresight et aux contenus de nos prises de
parole pour vous transmettre notre expérience
Des contenus de référence
Des contenus exclusifs chaque semaine :
Newsletter, Articles, Case study, Etudes…
Une communauté de passionnés
Partagez avec une communauté d’experts du Digital,
du Search, du Webmarketing…
Des évènements pointus
Echangez et networkez lors de nos évènements
exclusifs : Meet-up, Barcamp, Petits-déjeuners…

11. SF recrute
https://www.search-foresight.com/agence-seo/nos-jobs/
Retrouvez-nous au job dating organisé à l’occasion du SEO Campus à 18h15
11

12. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Framework JS et SEO
12

13. Euh, c’est quoi un framework JS ?
Une boîte à outils pour développeurs utilisant le langage Javascript comme langage de
développement
Conçu au départ pour créer des SPA : single page applications
Problème : les moteurs de recherche savent indexer des sites webs, avec des pages multiples, pas des
SPA
Les développeurs « front » ou « fullstasck » adorent le concept, car cela permet de faire tout
un site web en utilisant un seul langage de programmation : le Javascript (+HTML / CSS)
Quelques frameworks courants :
Angular JS, Ember JS, React JS, HapiJS

14. Les principaux frameworks JS
AngularJS
Le plus connu, appartenant à l’écosystème
Google
Différences entre version 1 et version 2 (la V2
peut être utilisée en « middleware » et « en
rendition hybride »
https://angularjs.org/
EmberJS
http://emberjs.com/
BackboneJS
http://backbonejs.org/
14

15. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
La problématique
15

16. Oups j’ai fait mon site en full Angular JS !
Et je le regrette déjà
16
Javascript activé Javascript désactivé
<body ng-controller="appController as app"
id="appController">
<a href="{{pathMap._home._hash}}"> </a>
<a id="triggerAutoRefreshTag"
onclick='angular.element("#appController").scope().autoRe
fresh(location.hash);'></a>
<app-head></app-head>
<app-head-mini></app-head-mini>
<div class="container main
{{app.isCurrentContext(pathMap._phoneDetails._formated
Hash) ||
app.isCurrentContext(pathMap._hotspotDetails._formated
Hash) ? 'phonedetails' : ''}}">
<app-navigator></app-navigator>
<app-title></app-title>
<banner></banner>
<app-container></app-container>
<store-container></store-container>
<phone-container></phone-container>
<support-container></support-container>
<plan-container></plan-container>
<as-container ng-if="appName=='spp'"></as-container>
<familyplans-container ng-
if="appName=='spp'"></familyplans-container>
<checkout-container></checkout-container>
<page></page>
Euh … où est le contenu ?

17. Un site full angular indexé
Angular JS c’est compliqué, cela ne renvoie pas le même code qu’un site « standard »
et les bots ne semblent pas comprendre ce qu’ils voient. Et pourtant….
17
… un site full angular JS peut être
indexé !

18. Par contre, côté visibilité, c’est plus vraiment ça
18

19. Ce que voit l’utilisateur
Tout le contenu est accessible
avec une navigation dans la
sidebar de gauche.
19

20. Ce que voit Googlebot
Et pourtant le code téléchargé ressemble à ça :
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<div class="wrapper">
<div ng-include="'app/layout/shell.html'"></div>
<div id="splash-page" ng-show="showSplash">
<div class="page-splash">
<div class="page-splash-message">
</div>
<div class="progress progress-striped active page-progress-bar">
<div class="bar"></div>
</div>
</div>
</div>
</div>
<script src="rsc/js/lib-adc3d5f6d9.js"></script>
<script src="rsc/js/app-f84e7b0c4f.js"></script>
</body>
</html>
La rendition est parfaite sur fetch as Googlebot
20

21. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Comment fait Google ?
21

22. Google utilise un headless browser
Googlebot + « web rendering service » (WRS)Le browser « à l’ancienne »

23. Le concept de "headless browser"
Un browser « headless » est un environnement
logiciel, programmable ou pilotable en ligne de
commande, qui est capable d’effectuer une rendition
complète d’une page HTML en exécutant tout le code
: HTML, CSS et Javascript
Il est qualifié de « headless » car il ne dispose pas de
GUI (d’interface utilisateur)
Grâce à un headless browser, on peut donc simuler
tout ce qui se passe dans un navigateur comme
Chrome ou Firefox. Et donc tester le code généré en
Ajax, ou par des framework Javascript
Remarque : ce type de crawl crée de « fausses visites »
dans vos outils de web analytics
Un bot sans tête mais avec des yeux !

24. PhantomJS et CasperJS
PhantomJS est le headless browser le plus populaire :
http://phantomjs.org/
Screaming Frog utilise PhantomJS
CasperJS est un webkit permettant de scraper le
contenu de pages web. Il utilise PhantomJS comme
headless browser
http://casperjs.org/

25. Google utilise Chrome 41 en mode headless
Expliqué ici :
https://developers.google.com/search/docs/guides/rendering
C’est aussi Chrome 41 qui est utilisé dans fetch as Google
25

26. Chrome 41 aujourd’hui mais demain ?
Chrome 41 date de mars 2015
Chrome 59 ? Future version pour Googlebot ?
Juin 2017
Pas de date annoncée pour une mise à jour
26

27. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Comprendre les architectures
logicielles
27

28. Client side ou server side rendering ?
SSR = OK, CSR = KO pour la performance et le SEO !
28

29. Les frameworks isomorphes en mode SSR
Ex :
Angular Universal
ReactJS
Utilisé en SSR, c’est
OK
Attention quand
même à ce que le
code HTML renvoyé
contienne
suffisamment de
contenu indexable !
29

30. Et la méthode à base de services de rendition ?
Si côté serveur, vous générez des snapshots
HTML, servis à tous les utilisateurs, alors
c’est du SSR, et c’est OK
Si vous servez les snapshots à Googlebot, et
du HTML généré en mode CSR : c’est KO
Remarque : la reco a changé
Snapshots HTML : OK, escaped_fragments : KO
30

31. Attention : les serveurs de rendition utilisent la
méthode obsolète pour rendre l’ajax crawlable
C’est-à-dire soit la méthode des escaped fragments avec hash bangs
Soit la méthode des escaped fragments avec balise meta
<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 : tout fonctionne correctement
C’est compatible avec la plupart des moteurs de recherche qui comptent : Bing, Yandex…
Sauf que demain…
www.example.com/ajax.html#!key=value
www.example.com/ajax.html?_escaped_fragment_=key=value

32. Et elle cessera de fonctionner …
Utilise la méthode des hashbangs pour faire un « cloaking » autorisé
Problème : à partir de T2 2017, Googlebot n’ira plus chercher les fragments HTML (et donc la
version de prérendition) mais directement le code généré en Ajax
Dans quelques semaines !
32

33. La méthode HTML 5 (sympa) du pushstate()
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.
Pour voir le concept en action :
https://pushstate.search-foresight.com
33
window.history.pushState('','','t
est/url/that-does-not-really-
exist')

34. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Auditer un site fait avec un
framework JS
34

35. Quelle méthodo pour auditer ?
Tester la crawlabilité
Screaming Frog en mode texte
Screaming Frog en mode JS
Comparer les deux listes d’urls
Prendre le résultat avec prudence : SF utilise
PhantomJS pas Chrome 41
Si Pb : retour sur les problèmes de crawlabilité
35

36. Tester une page avec "fetch as Google"
Tester l’indexabilité
Fetch as Google sur des
urls représentatives des
différents templates
Identifier les ressources
bloquées (possible aussi
avec pagespeed insights
Identifier les différences
Important : ne vous fiez
pas au cache de Google !
Si le test montre que Google ne parvient pas à « rendre » la page correctement : vous avez un problème

37. Tester l’indexabilité sur Bing
Si Bing indexe l’url : c’est ok. Sinon, l’implémentation n’est pas acceptable pour un site international
37

38. Comment interpréter les résultats ?
Le contenu est affiché quand vous désactivez JS et CSS
Le framework JS est utilisé côté serveur. C’est une page normale, OK
Le contenu est partiellement affiché quand vous désactivez JS et/ou CSS
Vérifiez que les balises SEO sont dans le code (title, meta desc, link rel, etc…)
Vérifiez que la navigation est dans le code (liens)
Vérifiez que les textes et images et videos à indexer sont dans le code
Si c’est le cas : OK
Le contenu utile disparait quand vous désactivez JS et CSS
C’est du CSR
Si le contenu n’est pas découvrable sans un clic supplémentaire : KO
Attention aux menus générés en JS
Si le contenu ne se génère qu’au bout de plus de 5sec : KO (dareboost est mon ami)
Si le contenu est présent dans le premier état de la page : partiellement OK
Indexable dans Google, pas dans les autres moteurs
Acceptable si pas d’enjeu SEO important (site corporate), à éviter sinon
38

39. Aider les dév : caniuse.com
Site qui permet d’identifier les fonctionnalités non supportées ou mal supportées par Chrome 41
Peut expliquer des anomalies dans l’indexation
39

40. On passe à la pratique ?
Apprenons à reconnaître les sites full javascript SEO friendly
40

41. Merci !
Et maintenant, vos
questions…
41

42. Contact
Philippe YONNET | CEO
philippe.yonnet@search-foresight.com
+33 1 74 18 29 40
Slideshare.net/S4sight
@S4sight
www.search-foresight.com
42