Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur Général Search Foresight

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité

Consultez-les par la suite

1 sur 42 Publicité

Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur Général Search Foresight

Télécharger pour lire hors ligne

“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

“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

Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (19)

Similaire à Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur Général Search Foresight (20)

Publicité

Plus par Peak Ace (20)

Plus récents (20)

Publicité

Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur Général Search Foresight

  1. 1. Sites javascript et compatibilité SEO 22/03/2018 1
  2. 2. Philippe Yonnet CEO et fondateur – Search Foresight 2
  3. 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. 4. L’AGENCE SEARCH MARKETING DU GROUPE MYMEDIA
  5. 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. 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. 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. 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. 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. 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. 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. 12. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Framework JS et SEO 12
  13. 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. 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. 15. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics La problématique 15
  16. 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. 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. 18. Par contre, côté visibilité, c’est plus vraiment ça 18
  19. 19. Ce que voit l’utilisateur Tout le contenu est accessible avec une navigation dans la sidebar de gauche. 19
  20. 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. 21. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Comment fait Google ? 21
  22. 22. Google utilise un headless browser Googlebot + « web rendering service » (WRS)Le browser « à l’ancienne »
  23. 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. 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. 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. 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. 27. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Comprendre les architectures logicielles 27
  28. 28. Client side ou server side rendering ? SSR = OK, CSR = KO pour la performance et le SEO ! 28
  29. 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. 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. 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. 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. 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. 34. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Auditer un site fait avec un framework JS 34
  35. 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. 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. 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. 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. 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. 40. On passe à la pratique ? Apprenons à reconnaître les sites full javascript SEO friendly 40
  41. 41. Merci ! Et maintenant, vos questions… 41
  42. 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

×