Agence Conseil en stratégie digitale
SEO, CRO, Inbound Marketing, Analytics
10ème EDITION –
PETIT DÉJEUNER
SEARCH FORESIGH...
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...
/ En 2015 : Fin du Hashbang
 En 2015, Google ne recommande plus l’utilisation du hashbang.
 POURQUOI ?  Google indique ...
/ Faut-il laisser Google faire tout le travail ?
 Réponse facile : OUI. // Réponse
intelligente : NON.
 Google apprend e...
/ Fonctionnement du PushState() HTML5
 Il s’agit d’une fonction javascript directement incluse dans le HTML5.
Concrètemen...
/ PushState() HTML5 Exemple
- 7 -Search Foresight 2014 © Agence Conseil en Stratégie Digitale
GOOGLE ET L’AJAX
 NB : exem...
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 v...
/ Angular JS mais pas seulement
 AngularJS est l’un des framework javascript les plus utilisés en ce moment mais il en ex...
/ Lecture par Google – 2 cas de figure
 1er cas de figure : Google peut lire et interpréter le code et ainsi indexer
corr...
/ Recetter notre site
 Pour bien recetter un site : il faut le crawler !
 Un crawler normal tel que Screaming Frog ne sa...
/ Rendre un Snapshot HTML à Google
 C’est LA véritable façon de gérer un site fait en AngularJS.
- 13 -Search Foresight 2...
/ Middleware ?
 Utiliser son propre middleware. Eg : Un serveur avec Phantom JS qui génère des
snapshot de toutes nos pag...
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 pri...
/ L’amélioration progressive
- 17 -Search Foresight 2014 © Agence Conseil en Stratégie Digitale
CONCLUSION
 Concevoir le ...
Merci
- 18 -Search Foresight 2014 © Agence Conseil en Stratégie Digitale
Prochain SlideShare
Chargement dans…5
×

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

1 199 vues

Publié le

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

Publié dans : Internet
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 199
Sur SlideShare
0
Issues des intégrations
0
Intégrations
85
Actions
Partages
0
Téléchargements
15
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 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. 2. 1 GOOGLE & AJAX Agence Conseil en stratégie digitale SEO, CRO, Inbound Marketing, Analytics
  3. 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. 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. 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. 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. 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. 8. 2 ANGULAR JS ET FRAMEWORK JAVASCRIPT Agence Conseil en stratégie digitale SEO, CRO, Inbound Marketing, Analytics
  9. 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. 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. 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. 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. 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. 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. 15. 3 CONCLUSION Agence Conseil en stratégie digitale SEO, CRO, Inbound Marketing, Analytics
  16. 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. 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. 18. Merci - 18 -Search Foresight 2014 © Agence Conseil en Stratégie Digitale

×