SlideShare une entreprise Scribd logo
1  sur  18
Télécharger pour lire hors ligne
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
1
GOOGLE & AJAX
Agence Conseil en stratégie digitale
SEO, CRO, Inbound Marketing, Analytics
/ 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
/ 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
+ = ?
/ 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 »
/ 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
/ 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.
2
ANGULAR JS ET
FRAMEWORK JAVASCRIPT
Agence Conseil en stratégie digitale
SEO, CRO, Inbound Marketing, Analytics
/ 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>
/ 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
/ 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
/ 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
/ 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.
/ 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
3
CONCLUSION
Agence Conseil en stratégie digitale
SEO, CRO, Inbound Marketing, Analytics
/ 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
/ 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.
Merci
- 18 -Search Foresight 2014 © Agence Conseil en Stratégie Digitale

Contenu connexe

Tendances

Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJsRadhoueneRouached
 
Débuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJSDébuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJSFrédéric DUPERIER
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontendyllieth
 
SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)Rui Carvalho
 
comprendre angularJS en 10 minutes
comprendre angularJS en 10 minutescomprendre angularJS en 10 minutes
comprendre angularJS en 10 minutesDavid Bo
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)Yacine Rezgui
 
Comparatif des frameworks js mv
Comparatif des frameworks js mvComparatif des frameworks js mv
Comparatif des frameworks js mvMael Monnier
 
De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)Laurent Duveau
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2Laurent Duveau
 
Hello AngularJS - Back to the future
Hello AngularJS - Back to the futureHello AngularJS - Back to the future
Hello AngularJS - Back to the futureOuadie LAHDIOUI
 
De Google+ à twitter en passant par le Cloud
De Google+ à twitter en passant par le CloudDe Google+ à twitter en passant par le Cloud
De Google+ à twitter en passant par le CloudNicolas FRANCOIS
 
Soirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVCSoirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVCSOAT
 
Geek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.jsGeek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.jsOLBATI
 

Tendances (20)

Angular 2
Angular 2Angular 2
Angular 2
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
 
Débuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJSDébuter avec Rails::API & AngularJS
Débuter avec Rails::API & AngularJS
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
 
SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)SPA avec Angular et SignalR (FR)
SPA avec Angular et SignalR (FR)
 
AngularJS
AngularJSAngularJS
AngularJS
 
comprendre angularJS en 10 minutes
comprendre angularJS en 10 minutescomprendre angularJS en 10 minutes
comprendre angularJS en 10 minutes
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)
 
Comparatif des frameworks js mv
Comparatif des frameworks js mvComparatif des frameworks js mv
Comparatif des frameworks js mv
 
De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
Hello AngularJS - Back to the future
Hello AngularJS - Back to the futureHello AngularJS - Back to the future
Hello AngularJS - Back to the future
 
De Google+ à twitter en passant par le Cloud
De Google+ à twitter en passant par le CloudDe Google+ à twitter en passant par le Cloud
De Google+ à twitter en passant par le Cloud
 
Introduction à Vaadin
Introduction à VaadinIntroduction à Vaadin
Introduction à Vaadin
 
Présentation Angular 2
Présentation Angular 2 Présentation Angular 2
Présentation Angular 2
 
ngconf 2016 (french)
ngconf 2016 (french)ngconf 2016 (french)
ngconf 2016 (french)
 
jQuery vs AngularJS
jQuery vs AngularJS jQuery vs AngularJS
jQuery vs AngularJS
 
Soirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVCSoirée 3T Soat - Asp.net MVC
Soirée 3T Soat - Asp.net MVC
 
Geek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.jsGeek Time Mai 2017 : Vue.js
Geek Time Mai 2017 : Vue.js
 
Node.js
Node.jsNode.js
Node.js
 

En vedette

Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017Peak Ace
 
Accelerated Mobile Pages
Accelerated Mobile PagesAccelerated Mobile Pages
Accelerated Mobile PagesPhilippe YONNET
 
Building SEO friendly SPA using PhantomJS, Node.js, Angular.js and HTML5
Building SEO friendly SPA using PhantomJS, Node.js, Angular.js and HTML5Building SEO friendly SPA using PhantomJS, Node.js, Angular.js and HTML5
Building SEO friendly SPA using PhantomJS, Node.js, Angular.js and HTML5Naveen S.R
 
Quelle stratégie SEO restera efficace dans les mois qui viennent
Quelle stratégie SEO restera efficace dans les mois qui viennentQuelle stratégie SEO restera efficace dans les mois qui viennent
Quelle stratégie SEO restera efficace dans les mois qui viennentPhilippe YONNET
 
Content Management Systems and Refactoring - Drupal, WordPress and eZ Publish
Content Management Systems and Refactoring - Drupal, WordPress and eZ PublishContent Management Systems and Refactoring - Drupal, WordPress and eZ Publish
Content Management Systems and Refactoring - Drupal, WordPress and eZ PublishJani Tarvainen
 
Why you should come to DrupalSouth
Why you should come to DrupalSouthWhy you should come to DrupalSouth
Why you should come to DrupalSouthChris Ward
 
SimpleDb, an introduction
SimpleDb, an introductionSimpleDb, an introduction
SimpleDb, an introductionPaolo Negri
 
A Documentation Crash Course, LinuxCon 2016
A Documentation Crash Course, LinuxCon 2016A Documentation Crash Course, LinuxCon 2016
A Documentation Crash Course, LinuxCon 2016Chris Ward
 
Electron - Solving our cross platform dreams?
Electron - Solving our cross platform dreams?Electron - Solving our cross platform dreams?
Electron - Solving our cross platform dreams?Chris Ward
 
Entrez dans le mouvement Maker à l’aide des technologies Microsoft
Entrez dans le mouvement Maker à l’aide des technologies MicrosoftEntrez dans le mouvement Maker à l’aide des technologies Microsoft
Entrez dans le mouvement Maker à l’aide des technologies MicrosoftFabrice BARBIN
 
Scaling Social Games
Scaling Social GamesScaling Social Games
Scaling Social GamesPaolo Negri
 
Mongrel2, a short introduction
Mongrel2, a short introductionMongrel2, a short introduction
Mongrel2, a short introductionPaolo Negri
 
Offre développeur Javascript Back-end
Offre développeur Javascript Back-endOffre développeur Javascript Back-end
Offre développeur Javascript Back-endSite Analyzer
 
Erlang introduction geek2geek Berlin
Erlang introduction geek2geek BerlinErlang introduction geek2geek Berlin
Erlang introduction geek2geek BerlinPaolo Negri
 
Contentful Berlin Offices
Contentful Berlin OfficesContentful Berlin Offices
Contentful Berlin OfficesIrina Botea
 
Automate your docs, automate yourself
Automate your docs, automate yourselfAutomate your docs, automate yourself
Automate your docs, automate yourselfChris Ward
 
The Anatomy of Content Management (workshop by J Gollner at Intelligent Conte...
The Anatomy of Content Management (workshop by J Gollner at Intelligent Conte...The Anatomy of Content Management (workshop by J Gollner at Intelligent Conte...
The Anatomy of Content Management (workshop by J Gollner at Intelligent Conte...Joe Gollner
 
AWS Lambda in infrastructure
AWS Lambda in infrastructureAWS Lambda in infrastructure
AWS Lambda in infrastructurePaolo Negri
 
Le futur de Drupal et des applications web
Le futur de Drupal et des applications webLe futur de Drupal et des applications web
Le futur de Drupal et des applications webJulien Dubreuil
 
Distributed and concurrent programming with RabbitMQ and EventMachine Rails U...
Distributed and concurrent programming with RabbitMQ and EventMachine Rails U...Distributed and concurrent programming with RabbitMQ and EventMachine Rails U...
Distributed and concurrent programming with RabbitMQ and EventMachine Rails U...Paolo Negri
 

En vedette (20)

Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
 
Accelerated Mobile Pages
Accelerated Mobile PagesAccelerated Mobile Pages
Accelerated Mobile Pages
 
Building SEO friendly SPA using PhantomJS, Node.js, Angular.js and HTML5
Building SEO friendly SPA using PhantomJS, Node.js, Angular.js and HTML5Building SEO friendly SPA using PhantomJS, Node.js, Angular.js and HTML5
Building SEO friendly SPA using PhantomJS, Node.js, Angular.js and HTML5
 
Quelle stratégie SEO restera efficace dans les mois qui viennent
Quelle stratégie SEO restera efficace dans les mois qui viennentQuelle stratégie SEO restera efficace dans les mois qui viennent
Quelle stratégie SEO restera efficace dans les mois qui viennent
 
Content Management Systems and Refactoring - Drupal, WordPress and eZ Publish
Content Management Systems and Refactoring - Drupal, WordPress and eZ PublishContent Management Systems and Refactoring - Drupal, WordPress and eZ Publish
Content Management Systems and Refactoring - Drupal, WordPress and eZ Publish
 
Why you should come to DrupalSouth
Why you should come to DrupalSouthWhy you should come to DrupalSouth
Why you should come to DrupalSouth
 
SimpleDb, an introduction
SimpleDb, an introductionSimpleDb, an introduction
SimpleDb, an introduction
 
A Documentation Crash Course, LinuxCon 2016
A Documentation Crash Course, LinuxCon 2016A Documentation Crash Course, LinuxCon 2016
A Documentation Crash Course, LinuxCon 2016
 
Electron - Solving our cross platform dreams?
Electron - Solving our cross platform dreams?Electron - Solving our cross platform dreams?
Electron - Solving our cross platform dreams?
 
Entrez dans le mouvement Maker à l’aide des technologies Microsoft
Entrez dans le mouvement Maker à l’aide des technologies MicrosoftEntrez dans le mouvement Maker à l’aide des technologies Microsoft
Entrez dans le mouvement Maker à l’aide des technologies Microsoft
 
Scaling Social Games
Scaling Social GamesScaling Social Games
Scaling Social Games
 
Mongrel2, a short introduction
Mongrel2, a short introductionMongrel2, a short introduction
Mongrel2, a short introduction
 
Offre développeur Javascript Back-end
Offre développeur Javascript Back-endOffre développeur Javascript Back-end
Offre développeur Javascript Back-end
 
Erlang introduction geek2geek Berlin
Erlang introduction geek2geek BerlinErlang introduction geek2geek Berlin
Erlang introduction geek2geek Berlin
 
Contentful Berlin Offices
Contentful Berlin OfficesContentful Berlin Offices
Contentful Berlin Offices
 
Automate your docs, automate yourself
Automate your docs, automate yourselfAutomate your docs, automate yourself
Automate your docs, automate yourself
 
The Anatomy of Content Management (workshop by J Gollner at Intelligent Conte...
The Anatomy of Content Management (workshop by J Gollner at Intelligent Conte...The Anatomy of Content Management (workshop by J Gollner at Intelligent Conte...
The Anatomy of Content Management (workshop by J Gollner at Intelligent Conte...
 
AWS Lambda in infrastructure
AWS Lambda in infrastructureAWS Lambda in infrastructure
AWS Lambda in infrastructure
 
Le futur de Drupal et des applications web
Le futur de Drupal et des applications webLe futur de Drupal et des applications web
Le futur de Drupal et des applications web
 
Distributed and concurrent programming with RabbitMQ and EventMachine Rails U...
Distributed and concurrent programming with RabbitMQ and EventMachine Rails U...Distributed and concurrent programming with RabbitMQ and EventMachine Rails U...
Distributed and concurrent programming with RabbitMQ and EventMachine Rails U...
 

Similaire à Google : Prise en charge de l'Ajax et de l'Angular JS

Google et le Javascript - Petit déjeuner du 29 mars 2017
Google et le Javascript - Petit déjeuner du 29 mars 2017Google et le Javascript - Petit déjeuner du 29 mars 2017
Google et le Javascript - Petit déjeuner du 29 mars 2017Peak Ace
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Peak Ace
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Peak Ace
 
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...Peak Ace
 
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...Peak Ace
 
Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?Madeline Pinthon
 
Seo 10 clés pour plaire à Google
Seo   10 clés pour plaire à GoogleSeo   10 clés pour plaire à Google
Seo 10 clés pour plaire à GoogleKeyweo
 
Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016
Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016
Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016iProspect France
 
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...Peak Ace
 
Search : la todo list 2017 - Petit déjeuner 29 septembre 2016 Lille
Search : la todo list 2017 - Petit déjeuner 29 septembre 2016 Lille Search : la todo list 2017 - Petit déjeuner 29 septembre 2016 Lille
Search : la todo list 2017 - Petit déjeuner 29 septembre 2016 Lille Peak Ace
 
Google AMP 1 an après : quel bilan, quelles perspectives ?
Google AMP 1 an après : quel bilan, quelles perspectives ?Google AMP 1 an après : quel bilan, quelles perspectives ?
Google AMP 1 an après : quel bilan, quelles perspectives ?Virginie Clève - largow ☕️
 
SEO: Piloter les comportement des moteurs de recherche
SEO: Piloter les comportement des moteurs de rechercheSEO: Piloter les comportement des moteurs de recherche
SEO: Piloter les comportement des moteurs de recherchePeak Ace
 
Evolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEOEvolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEODimitri Brunel
 
Référencement naturel SEO et Référencement payant SEA
Référencement naturel SEO et Référencement payant SEARéférencement naturel SEO et Référencement payant SEA
Référencement naturel SEO et Référencement payant SEAOlivier Perbet
 
Le searchdexing - utiliser son moteur de recherche interne pour le SEO
Le searchdexing - utiliser son moteur de  recherche interne pour le SEOLe searchdexing - utiliser son moteur de  recherche interne pour le SEO
Le searchdexing - utiliser son moteur de recherche interne pour le SEOPeak Ace
 
Webschool du Jura - Le référencement par Dole Solus Informatiques
Webschool du Jura - Le référencement par Dole Solus InformatiquesWebschool du Jura - Le référencement par Dole Solus Informatiques
Webschool du Jura - Le référencement par Dole Solus Informatiquesmariejura
 
Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022
Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022
Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022Adrien Russo
 
Navigation à facettes et SEO
Navigation à facettes et SEONavigation à facettes et SEO
Navigation à facettes et SEOPeak Ace
 
référencement naturel (SEO) : comment améliorer sa visibilité sur les moteurs...
référencement naturel (SEO) : comment améliorer sa visibilité sur les moteurs...référencement naturel (SEO) : comment améliorer sa visibilité sur les moteurs...
référencement naturel (SEO) : comment améliorer sa visibilité sur les moteurs...supporticom
 

Similaire à Google : Prise en charge de l'Ajax et de l'Angular JS (20)

Google et le Javascript - Petit déjeuner du 29 mars 2017
Google et le Javascript - Petit déjeuner du 29 mars 2017Google et le Javascript - Petit déjeuner du 29 mars 2017
Google et le Javascript - Petit déjeuner du 29 mars 2017
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
 
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
 
Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?
 
Seo 10 clés pour plaire à Google
Seo   10 clés pour plaire à GoogleSeo   10 clés pour plaire à Google
Seo 10 clés pour plaire à Google
 
Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016
Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016
Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016
 
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
Search : la todo list 2017 pour ne rien oublier dans votre roadmap - Petit dé...
 
Search : la todo list 2017 - Petit déjeuner 29 septembre 2016 Lille
Search : la todo list 2017 - Petit déjeuner 29 septembre 2016 Lille Search : la todo list 2017 - Petit déjeuner 29 septembre 2016 Lille
Search : la todo list 2017 - Petit déjeuner 29 septembre 2016 Lille
 
Comment favoriser le référencement
Comment favoriser le référencementComment favoriser le référencement
Comment favoriser le référencement
 
Google AMP 1 an après : quel bilan, quelles perspectives ?
Google AMP 1 an après : quel bilan, quelles perspectives ?Google AMP 1 an après : quel bilan, quelles perspectives ?
Google AMP 1 an après : quel bilan, quelles perspectives ?
 
SEO: Piloter les comportement des moteurs de recherche
SEO: Piloter les comportement des moteurs de rechercheSEO: Piloter les comportement des moteurs de recherche
SEO: Piloter les comportement des moteurs de recherche
 
Evolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEOEvolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEO
 
Référencement naturel SEO et Référencement payant SEA
Référencement naturel SEO et Référencement payant SEARéférencement naturel SEO et Référencement payant SEA
Référencement naturel SEO et Référencement payant SEA
 
Le searchdexing - utiliser son moteur de recherche interne pour le SEO
Le searchdexing - utiliser son moteur de  recherche interne pour le SEOLe searchdexing - utiliser son moteur de  recherche interne pour le SEO
Le searchdexing - utiliser son moteur de recherche interne pour le SEO
 
Webschool du Jura - Le référencement par Dole Solus Informatiques
Webschool du Jura - Le référencement par Dole Solus InformatiquesWebschool du Jura - Le référencement par Dole Solus Informatiques
Webschool du Jura - Le référencement par Dole Solus Informatiques
 
Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022
Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022
Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022
 
Navigation à facettes et SEO
Navigation à facettes et SEONavigation à facettes et SEO
Navigation à facettes et SEO
 
référencement naturel (SEO) : comment améliorer sa visibilité sur les moteurs...
référencement naturel (SEO) : comment améliorer sa visibilité sur les moteurs...référencement naturel (SEO) : comment améliorer sa visibilité sur les moteurs...
référencement naturel (SEO) : comment améliorer sa visibilité sur les moteurs...
 

Plus de Peak Ace

SEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptx
SEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptxSEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptx
SEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptxPeak Ace
 
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptxSEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptxPeak Ace
 
Guide shopify & seo: fausse bonne idée?
Guide shopify & seo: fausse bonne idée?Guide shopify & seo: fausse bonne idée?
Guide shopify & seo: fausse bonne idée?Peak Ace
 
Petit dejeuner sf 180419 actualite seo sea
Petit dejeuner sf 180419   actualite seo seaPetit dejeuner sf 180419   actualite seo sea
Petit dejeuner sf 180419 actualite seo seaPeak Ace
 
Event sf 180419 changement de marque et de domaine
Event sf 180419 changement de marque et de domaineEvent sf 180419 changement de marque et de domaine
Event sf 180419 changement de marque et de domainePeak Ace
 
Event sf 180419 gerer les contenus pagines
Event sf 180419 gerer les contenus paginesEvent sf 180419 gerer les contenus pagines
Event sf 180419 gerer les contenus paginesPeak Ace
 
Event sf 180419 les bonnes pratiques en netlinking
Event sf 180419 les bonnes pratiques en netlinkingEvent sf 180419 les bonnes pratiques en netlinking
Event sf 180419 les bonnes pratiques en netlinkingPeak Ace
 
Amazon : au cœur de votre stratégie SEO 2019 - Philippe Yonnet - Petit déjeun...
Amazon : au cœur de votre stratégie SEO 2019 - Philippe Yonnet - Petit déjeun...Amazon : au cœur de votre stratégie SEO 2019 - Philippe Yonnet - Petit déjeun...
Amazon : au cœur de votre stratégie SEO 2019 - Philippe Yonnet - Petit déjeun...Peak Ace
 
Contenu et SEO : quelles tendances pour 2019 ? - Julien Callaou - petit déjeu...
Contenu et SEO : quelles tendances pour 2019 ? - Julien Callaou - petit déjeu...Contenu et SEO : quelles tendances pour 2019 ? - Julien Callaou - petit déjeu...
Contenu et SEO : quelles tendances pour 2019 ? - Julien Callaou - petit déjeu...Peak Ace
 
Comment privilégier l’expérience utilisateur (UX) au cœur de votre stratégie ...
Comment privilégier l’expérience utilisateur (UX) au cœur de votre stratégie ...Comment privilégier l’expérience utilisateur (UX) au cœur de votre stratégie ...
Comment privilégier l’expérience utilisateur (UX) au cœur de votre stratégie ...Peak Ace
 
Comment structurer ses campagnes adwords pour tirer le meilleur parti de l’au...
Comment structurer ses campagnes adwords pour tirer le meilleur parti de l’au...Comment structurer ses campagnes adwords pour tirer le meilleur parti de l’au...
Comment structurer ses campagnes adwords pour tirer le meilleur parti de l’au...Peak Ace
 
Actualités SEO SEA - Tiphaine Coupeau - Petit déjeuner 26-02-2019 Paris
Actualités SEO SEA - Tiphaine Coupeau - Petit déjeuner 26-02-2019 ParisActualités SEO SEA - Tiphaine Coupeau - Petit déjeuner 26-02-2019 Paris
Actualités SEO SEA - Tiphaine Coupeau - Petit déjeuner 26-02-2019 ParisPeak Ace
 
Comment optimiser votre site pour être visible sur les requêtes saisonnières ...
Comment optimiser votre site pour être visible sur les requêtes saisonnières ...Comment optimiser votre site pour être visible sur les requêtes saisonnières ...
Comment optimiser votre site pour être visible sur les requêtes saisonnières ...Peak Ace
 
Le futur du SEO : l’optimisation pour les moteurs de réponse (AEO) - petit dé...
Le futur du SEO : l’optimisation pour les moteurs de réponse (AEO) - petit dé...Le futur du SEO : l’optimisation pour les moteurs de réponse (AEO) - petit dé...
Le futur du SEO : l’optimisation pour les moteurs de réponse (AEO) - petit dé...Peak Ace
 
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre parisPeak Ace
 
Comment exploiter et atteindre la position 0 ou featured snippets de Google ...
Comment exploiter et atteindre la position 0 ou featured snippets de Google  ...Comment exploiter et atteindre la position 0 ou featured snippets de Google  ...
Comment exploiter et atteindre la position 0 ou featured snippets de Google ...Peak Ace
 
Actualité des moteurs de recherche et du référencement (SEO & SEA) - petit dé...
Actualité des moteurs de recherche et du référencement (SEO & SEA) - petit dé...Actualité des moteurs de recherche et du référencement (SEO & SEA) - petit dé...
Actualité des moteurs de recherche et du référencement (SEO & SEA) - petit dé...Peak Ace
 
La nouvelle Google Search Console - petit déjeuner 15-11-2018 Nantes
La nouvelle Google Search Console - petit déjeuner 15-11-2018 Nantes La nouvelle Google Search Console - petit déjeuner 15-11-2018 Nantes
La nouvelle Google Search Console - petit déjeuner 15-11-2018 Nantes Peak Ace
 
Comment tirer le meilleur parti possible du content marketing - petit déjeune...
Comment tirer le meilleur parti possible du content marketing - petit déjeune...Comment tirer le meilleur parti possible du content marketing - petit déjeune...
Comment tirer le meilleur parti possible du content marketing - petit déjeune...Peak Ace
 
Migration les pièges a éviter - petit déjeuner 15-11-2018 Nantes
Migration les pièges a éviter - petit déjeuner 15-11-2018 Nantes Migration les pièges a éviter - petit déjeuner 15-11-2018 Nantes
Migration les pièges a éviter - petit déjeuner 15-11-2018 Nantes Peak Ace
 

Plus de Peak Ace (20)

SEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptx
SEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptxSEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptx
SEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptx
 
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptxSEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
 
Guide shopify & seo: fausse bonne idée?
Guide shopify & seo: fausse bonne idée?Guide shopify & seo: fausse bonne idée?
Guide shopify & seo: fausse bonne idée?
 
Petit dejeuner sf 180419 actualite seo sea
Petit dejeuner sf 180419   actualite seo seaPetit dejeuner sf 180419   actualite seo sea
Petit dejeuner sf 180419 actualite seo sea
 
Event sf 180419 changement de marque et de domaine
Event sf 180419 changement de marque et de domaineEvent sf 180419 changement de marque et de domaine
Event sf 180419 changement de marque et de domaine
 
Event sf 180419 gerer les contenus pagines
Event sf 180419 gerer les contenus paginesEvent sf 180419 gerer les contenus pagines
Event sf 180419 gerer les contenus pagines
 
Event sf 180419 les bonnes pratiques en netlinking
Event sf 180419 les bonnes pratiques en netlinkingEvent sf 180419 les bonnes pratiques en netlinking
Event sf 180419 les bonnes pratiques en netlinking
 
Amazon : au cœur de votre stratégie SEO 2019 - Philippe Yonnet - Petit déjeun...
Amazon : au cœur de votre stratégie SEO 2019 - Philippe Yonnet - Petit déjeun...Amazon : au cœur de votre stratégie SEO 2019 - Philippe Yonnet - Petit déjeun...
Amazon : au cœur de votre stratégie SEO 2019 - Philippe Yonnet - Petit déjeun...
 
Contenu et SEO : quelles tendances pour 2019 ? - Julien Callaou - petit déjeu...
Contenu et SEO : quelles tendances pour 2019 ? - Julien Callaou - petit déjeu...Contenu et SEO : quelles tendances pour 2019 ? - Julien Callaou - petit déjeu...
Contenu et SEO : quelles tendances pour 2019 ? - Julien Callaou - petit déjeu...
 
Comment privilégier l’expérience utilisateur (UX) au cœur de votre stratégie ...
Comment privilégier l’expérience utilisateur (UX) au cœur de votre stratégie ...Comment privilégier l’expérience utilisateur (UX) au cœur de votre stratégie ...
Comment privilégier l’expérience utilisateur (UX) au cœur de votre stratégie ...
 
Comment structurer ses campagnes adwords pour tirer le meilleur parti de l’au...
Comment structurer ses campagnes adwords pour tirer le meilleur parti de l’au...Comment structurer ses campagnes adwords pour tirer le meilleur parti de l’au...
Comment structurer ses campagnes adwords pour tirer le meilleur parti de l’au...
 
Actualités SEO SEA - Tiphaine Coupeau - Petit déjeuner 26-02-2019 Paris
Actualités SEO SEA - Tiphaine Coupeau - Petit déjeuner 26-02-2019 ParisActualités SEO SEA - Tiphaine Coupeau - Petit déjeuner 26-02-2019 Paris
Actualités SEO SEA - Tiphaine Coupeau - Petit déjeuner 26-02-2019 Paris
 
Comment optimiser votre site pour être visible sur les requêtes saisonnières ...
Comment optimiser votre site pour être visible sur les requêtes saisonnières ...Comment optimiser votre site pour être visible sur les requêtes saisonnières ...
Comment optimiser votre site pour être visible sur les requêtes saisonnières ...
 
Le futur du SEO : l’optimisation pour les moteurs de réponse (AEO) - petit dé...
Le futur du SEO : l’optimisation pour les moteurs de réponse (AEO) - petit dé...Le futur du SEO : l’optimisation pour les moteurs de réponse (AEO) - petit dé...
Le futur du SEO : l’optimisation pour les moteurs de réponse (AEO) - petit dé...
 
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris
 
Comment exploiter et atteindre la position 0 ou featured snippets de Google ...
Comment exploiter et atteindre la position 0 ou featured snippets de Google  ...Comment exploiter et atteindre la position 0 ou featured snippets de Google  ...
Comment exploiter et atteindre la position 0 ou featured snippets de Google ...
 
Actualité des moteurs de recherche et du référencement (SEO & SEA) - petit dé...
Actualité des moteurs de recherche et du référencement (SEO & SEA) - petit dé...Actualité des moteurs de recherche et du référencement (SEO & SEA) - petit dé...
Actualité des moteurs de recherche et du référencement (SEO & SEA) - petit dé...
 
La nouvelle Google Search Console - petit déjeuner 15-11-2018 Nantes
La nouvelle Google Search Console - petit déjeuner 15-11-2018 Nantes La nouvelle Google Search Console - petit déjeuner 15-11-2018 Nantes
La nouvelle Google Search Console - petit déjeuner 15-11-2018 Nantes
 
Comment tirer le meilleur parti possible du content marketing - petit déjeune...
Comment tirer le meilleur parti possible du content marketing - petit déjeune...Comment tirer le meilleur parti possible du content marketing - petit déjeune...
Comment tirer le meilleur parti possible du content marketing - petit déjeune...
 
Migration les pièges a éviter - petit déjeuner 15-11-2018 Nantes
Migration les pièges a éviter - petit déjeuner 15-11-2018 Nantes Migration les pièges a éviter - petit déjeuner 15-11-2018 Nantes
Migration les pièges a éviter - petit déjeuner 15-11-2018 Nantes
 

Google : Prise en charge de l'Ajax et de l'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