Indexation et Javascript,
où en est-on ?
Seocamp’us Paris - 7 avril 2016 - Madeline Pinthon
@iProspectFR #seocamp
Qui suis-je ?
Madeline Pinthon
Consultante SEO chez iProspect
www.canyouseome.com
• Diplômée d’Auden...
@iProspectFR #seocamp
Comment se déroulera la conférence
L’évolution de la communication de Google
Point
Un
Des paroles au...
Ce que dit Google
@iProspectFR #seocamp
Avant, il fallait désactiver le javascript
@iProspectFR #seocamp
La communication de Google évolue
Avril 2014
Question : how doesGoogle
handle content loaded via
Jav...
2015
En bloquant les ressources,
votre classement risque de ne
pas être optimal
RAPPORT RESSOURCES
BLOQUES
Octobre 2015
We...
Février 2016
Accélerer le mobile…avec du
JSON-LD
AMP
mars 2016
Message de John Mueller
résumant les recommandations
de Goo...
@iProspectFR #seocamp
Les conseils de John
Don't cloak to Googlebot. Use
"feature detection" &
"progressive enhancement"
t...
@iProspectFR #seocamp
Les conseils de John
Use rel=canonical when serving
content from multiple URLs is
required.
“
@iProspectFR #seocamp
Les conseils de John
Avoid the AJAX-Crawling
scheme on new sites. Consider
migrating old sites that ...
@iProspectFR #seocamp
Les conseils de John
Avoid using "#" in URLs (outside
of "#!"). Googlebot rarely
indexes URLs with "...
@iProspectFR #seocamp
Les conseils de John
Use Search Console's Fetch and
Render tool to test how
Googlebot sees your page...
@iProspectFR #seocamp
Les conseils de John
Limit the number of embedded
resources, in particular the
number of JavaScript ...
@iProspectFR #seocamp
Les conseils de John
Google supports the use of
JavaScript to provide titles,
description & robots m...
@iProspectFR #seocamp
Les conseils de John
Finally, keep in mind that other
search engines and web services
accessing your...
De la théorie à la pratique
@iProspectFR #seocamp
Réecrire les title
Lorsqu’on réécrit les balises title en javascript, est-ce pris en compte ?
Le DOM...
@iProspectFR #seocamp
Exemple
C’est bien le DOM qui est pris en compte, et non pas le code source.
Code source DOM
Google
@iProspectFR #seocamp
Modifier et/ou insérer des paragraphes
Lorsqu’on ajoute dynamiquement du contenu avec du javascript,...
@iProspectFR #seocamp
Sans JS
CFPJ : formation communication orale
@iProspectFR #seocamp
Avec JS
@iProspectFR #seocamp
Dans google…
@iProspectFR #seocamp
Autres tests…de 2013
http://www.klikki.com/blog/google-able-index-content-fetched-using-ajax
Injecte...
@iProspectFR #seocamp
Injection d’un contenu bloqué
Injecter du contenu, en provenance d’une URL bloquée par le robots.txt...
@iProspectFR #seocamp
Injection l’affichage demande un clic
Un contenu a été injecté mais il s’affiche après un clic
KO, l...
@iProspectFR #seocamp
D’autres tests en 2015
http://www.centrical.com/test/google-json-ld-and-javascript-crawling-and-inde...
@iProspectFR #seocamp
Les liens javascript
Des liens insérés en JS sont-ils crawlés ?
Les liens ont été crawlés.
@iProspectFR #seocamp
Sans JS
(Merci Walid, http://www.trafic-organique.com/javascript-seo.html )
@iProspectFR #seocamp
Avec JS
@iProspectFR #seocamp
Les redirections
Comment sont considérées les redirections javascript ?
Les redirections sont bien p...
@iProspectFR #seocamp
Illustration dans search console
Malgré un code 200, Google voit la redirection.
@iProspectFR #seocamp
Les redirections avec temps d’attente ?
Une redirection javascript qui se déclenche après un timer ?...
@iProspectFR #seocamp
Encore des tests
http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157
@iProspectFR #seocamp
Désindexer un contenu
Nous avons injecté dynamiquement une balise noindex.
Le contenu a-t-il été dés...
@iProspectFR #seocamp
Mise en place simple d’un script qui injecte la meta robots
Sur
www.canyouseome.com/
page-c/, il n’y...
@iProspectFR #seocamp
Retirer une balise noindex
Nous avons mis un script pour retirer la balise meta robots :
KO, la page...
@iProspectFR #seocamp
Résultat
Sur http://canyouseome.com/page-d/, la balise meta robots est présente dans le code source ...
@iProspectFR #seocamp
Un site fait avec AngularJS s’indexe-t-il ?
Le JavaScript utilisé dans Angular ou d’autres framework...
En conclusion
@iProspectFR #seocamp
Quelques enseignements
• Le DOM prime. Ne vous fiez plus au code source.
• Si des instructions contr...
@iProspectFR #seocamp
Un site doit-il passer sur un framework JS (type Angular)?
Le site a-t-il une certaine autorité ?
Bi...
@iProspectFR #seocamp
Ne négligez pas l’accessibilité
• Utilisez les sitemaps
• Ajoutez des micro données
• Le DOM et le r...
Quels outils SEO pour
exécuter le JS ?
@iProspectFR #seocamp
L’outil « explorer comme Google »
Google Search Console et l’outil Explorer commeGoogle (Affichage)
...
@iProspectFR #seocamp
PhantomJS
Le meilleur outil…. PhantomJS.
Mais il faut aimer la technique !
@iProspectFR #seocamp
SEOTools for excel
Excel seo tools et PhantomJS : http://seotoolsforexcel.com/phantomjs-cloud/
Il fa...
@iProspectFR #seocamp
Un crawler qui exécute le JS ?
Pas de produit sur le marché actuellement…
(coucou Botify,onCrawl, et...
@iProspectFR #seocamp
GoogleTag Manager
Peut devenir unCMS (réécrire des titres, injecter du contenu, etc.)
http://startup...
Merci !
(et bon appétit)
Rejoignez-nous, on recrute !
madeline.pinthon@iprospect.com
Prochain SlideShare
Chargement dans…5
×

Seocamp2016 : javascript et indexation, où en est-on ?

1 049 vues

Publié le

Google annonce comprendre le JavaScript mais qu'en est-il exactement ?
Plus d'information : http://www.iprospect.com/fr/fr/le-blog/indexation-javascript/

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

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive
  • https://support.google.com/webmasters/answer/81766
  • https://webmasters.googleblog.com/2014/03/musical-artists-your-official-tour.html
    JSON et knowledge graph

    https://www.youtube.com/watch?v=_6mtiwQ3nvw

    https://googlewebmastercentral.blogspot.fr/2014/05/understanding-web-pages-better.html


  • https://webmasters.googleblog.com/2015/01/new-structured-data-testing-tool.html
    https://googlewebmastercentral.blogspot.fr/2015/03/easier-website-development-with-web.html
    https://googlewebmastercentral.blogspot.fr/2015/10/deprecating-our-ajax-crawling-scheme.html

  • https://www.ampproject.org/docs/guides/discovery.html
    https://plus.google.com/+JohnMueller/posts/LT4fU7kFB8W
  • When using AMP, the AMP HTML page must be static as required by the spec, but the associated web page can be built using JS/PWA techniques. Remember to use a sitemap file with correct "lastmod" dates for signaling changes on your website.
  • When using AMP, the AMP HTML page must be static as required by the spec, but the associated web page can be built using JS/PWA techniques. Remember to use a sitemap file with correct "lastmod" dates for signaling changes on your website.
  • http://www.klikki.com/blog/google-able-index-content-fetched-using-ajax
  • http://www.klikki.com/blog/google-able-index-content-fetched-using-ajax
  • http://www.klikki.com/blog/google-able-index-content-fetched-using-ajax
  • Fetch as Google :
    Encourageant mais n’est pas forcément conforme au comportement de Google.
    Il faut demander l’affchage. Si l’affichage est OK, il y a de grandes chances que le site soit OK….mais ce n’est pas sûr à 100% non plus.
    Le crawl fetch est légèrement différent.

    Le code source est bel et bien le code source, pas le dom => on ne voit pas ce qui est vraiment interprété.

    C’est nécessaire mais pas suffisant.
  • https://builtvisible.com/javascript-framework-seo/
    http://www.angularjsseo.com/
    https://weluse.de/blog/angularjs-seo-finally-a-piece-of-cake.html
    http://www.ng-newsletter.com/posts/serious-angular-seo.html
    http://stackoverflow.com/questions/13499040/how-do-search-engines-deal-with-angularjs-applications
    https://googlewebmastercentral.blogspot.no/2014/05/understanding-web-pages-better.html
    http://rogeralsing.com/2013/08/11/angularjs-and-seo-part-1/
    http://rogeralsing.com/2013/08/11/angularjs-and-seo-part-2/
    http://ng-learn.org/2014/05/SEO-Google-crawl-JavaScript/
    https://www.kcoleman.me/blog/2014/10/03/angularjs-rails-seo/
    https://www.kcoleman.me/blog/2014/10/07/angularjs-rails-and-seo-part-2/
    http://www.algoworks.com/blog/a-developers-guide-to-perform-seo-on-angularjs-web-apps
    https://mobinni.io/2015/06/03/a-comprehensive-view-on-seo-in-angularjs/
    http://iranreyes.com/complete-guide-to-seo-with-angularjs/
     
    Prerender Your AngularJS Apps To Boost SEO
    https://www.youtube.com/watch?v=iYEQMJc1yak
    AngularJS Israel - Solving Angular & SEO with Oleg Belausov
    https://www.youtube.com/watch?v=a7rWmNBhHCg
    SEO and JavaScript: New Challenges
    https://www.youtube.com/watch?v=0jtrAUM3i_I
     
    https://www.seo4ajax.com/
    https://www.deepcrawl.com/knowledge/best-practice/angular-js-and-seo/

    https://www.seroundtable.com/google-seo-javascript-angular-hangout-20292.html
    http://www.bee4.fr/blog/seo/google-ajax-angularjs-phantomjs/
    https://www.searchenginejournal.com/warning-youre-killing-seo-efforts-using-angular-js/142031/
    http://www.doz.com/search-engine/angularjs-index-seo
    http://www.ocpsoft.org/java/seo-friendly-angularjs-with-html5-pushstate-rewrite-and-twelve-lines-of-code/
    http://blog.octo.com/seo-spa-angular/

    https://www.grobmeier.de/seo-and-angular-20012016.html
    https://plus.google.com/events/ci85lav8bdnjl356n5o0fkegb44
    http://www.rimmkaufman.com/blog/google-crawling-javascript/13052015/




  • Seocamp2016 : javascript et indexation, où en est-on ?

    1. 1. Indexation et Javascript, où en est-on ? Seocamp’us Paris - 7 avril 2016 - Madeline Pinthon
    2. 2. @iProspectFR #seocamp Qui suis-je ? Madeline Pinthon Consultante SEO chez iProspect www.canyouseome.com • Diplômée d’Audencia Nantes • 4 ans chez l’annonceur (Agriaffaires) • 1 an chez iProspect J’en profite pour remercier : • Mes collègues & clients • Les events SEO (teknseo, seocamp, visibilite live camp, google black day) • www.scripts-seo.com • Les SEO sur twitter, skype,…
    3. 3. @iProspectFR #seocamp Comment se déroulera la conférence L’évolution de la communication de Google Point Un Des paroles aux actes (les tests) Point deux Les outils utiles Point Trois
    4. 4. Ce que dit Google
    5. 5. @iProspectFR #seocamp Avant, il fallait désactiver le javascript
    6. 6. @iProspectFR #seocamp La communication de Google évolue Avril 2014 Question : how doesGoogle handle content loaded via Javascript ? VIDEO DE MATT CUTTS Mars 2014 Le JSON peut alimenter le knowledge graph WEBMASTER Mai 2014 “we decided to try to understand pages by executing JavaScript.” UNDERSTANDINGWEB PAGES BETTER
    7. 7. 2015 En bloquant les ressources, votre classement risque de ne pas être optimal RAPPORT RESSOURCES BLOQUES Octobre 2015 We are generally able to render and understand your web pages like modern browsers. DEPRECATING AJAX CRAWLING SCHEME Octobre 2015 GTMV2 Lancement deAngularJS 2.0 LANCEMENT DE NOUVEAUX OUTILS Janvier 2015 La nouvelle version comprend le JSON-LD NOUVEL OUTIL DETEST DES RICH SNIPPETS Avril 2015 Google doit interpréter les CSS pour voir si un site est mobile- friendly MOBILEGEDDON
    8. 8. Février 2016 Accélerer le mobile…avec du JSON-LD AMP mars 2016 Message de John Mueller résumant les recommandations de Google sur le Javascript. SYNTHESE DES CONSEILS SUR L’INDEXATION DU JS
    9. 9. @iProspectFR #seocamp Les conseils de John Don't cloak to Googlebot. Use "feature detection" & "progressive enhancement" techniques to make your content available to all users. Avoid redirecting to an “unsupported browser” page. “
    10. 10. @iProspectFR #seocamp Les conseils de John Use rel=canonical when serving content from multiple URLs is required. “
    11. 11. @iProspectFR #seocamp Les conseils de John Avoid the AJAX-Crawling scheme on new sites. Consider migrating old sites that use this scheme soon. Remember to remove "meta fragment" tags when migrating. Don't use a "meta fragment" tag if the "escaped fragment" URL doesn't serve fully rendered content. “
    12. 12. @iProspectFR #seocamp Les conseils de John Avoid using "#" in URLs (outside of "#!"). Googlebot rarely indexes URLs with "#" in them. Use "normal" URLs with path/filename/query- parameters instead, consider using the History API for navigation. “
    13. 13. @iProspectFR #seocamp Les conseils de John Use Search Console's Fetch and Render tool to test how Googlebot sees your pages. Note that this tool doesn't support "#!" or "#" URLs.“
    14. 14. @iProspectFR #seocamp Les conseils de John Limit the number of embedded resources, in particular the number of JavaScript files and server responses required to render your page. A high number of required URLs can result in timeouts & rendering without these resources being available “
    15. 15. @iProspectFR #seocamp Les conseils de John Google supports the use of JavaScript to provide titles, description & robots meta tags, structured data, and other meta- data.“
    16. 16. @iProspectFR #seocamp Les conseils de John Finally, keep in mind that other search engines and web services accessing your content might not support JavaScript at all, or might support a different subset. “
    17. 17. De la théorie à la pratique
    18. 18. @iProspectFR #seocamp Réecrire les title Lorsqu’on réécrit les balises title en javascript, est-ce pris en compte ? Le DOM est pris en compte. Le title du code source n’est plus visible.
    19. 19. @iProspectFR #seocamp Exemple C’est bien le DOM qui est pris en compte, et non pas le code source. Code source DOM Google
    20. 20. @iProspectFR #seocamp Modifier et/ou insérer des paragraphes Lorsqu’on ajoute dynamiquement du contenu avec du javascript, ces contenus sont-ils indexés ? Les pages peuvent se positionner sur les contenus injectés
    21. 21. @iProspectFR #seocamp Sans JS CFPJ : formation communication orale
    22. 22. @iProspectFR #seocamp Avec JS
    23. 23. @iProspectFR #seocamp Dans google…
    24. 24. @iProspectFR #seocamp Autres tests…de 2013 http://www.klikki.com/blog/google-able-index-content-fetched-using-ajax Injecter du contenu Le contenu était bien indexé
    25. 25. @iProspectFR #seocamp Injection d’un contenu bloqué Injecter du contenu, en provenance d’une URL bloquée par le robots.txt Le contenu était bien indexé
    26. 26. @iProspectFR #seocamp Injection l’affichage demande un clic Un contenu a été injecté mais il s’affiche après un clic KO, le contenu n’avait pas été indexé
    27. 27. @iProspectFR #seocamp D’autres tests en 2015 http://www.centrical.com/test/google-json-ld-and-javascript-crawling-and-indexing-test.html Plusieurs tests réalisés : injection avant et apres le chargement du DOM, en asyncrhone ou apres httpRequest. Le contenu était bien indexé
    28. 28. @iProspectFR #seocamp Les liens javascript Des liens insérés en JS sont-ils crawlés ? Les liens ont été crawlés.
    29. 29. @iProspectFR #seocamp Sans JS (Merci Walid, http://www.trafic-organique.com/javascript-seo.html )
    30. 30. @iProspectFR #seocamp Avec JS
    31. 31. @iProspectFR #seocamp Les redirections Comment sont considérées les redirections javascript ? Les redirections sont bien prises en compte… et assimilées à des 301
    32. 32. @iProspectFR #seocamp Illustration dans search console Malgré un code 200, Google voit la redirection.
    33. 33. @iProspectFR #seocamp Les redirections avec temps d’attente ? Une redirection javascript qui se déclenche après un timer ? Ca passe également ! Et elle peut également avoir le même effet qu’une 301.
    34. 34. @iProspectFR #seocamp Encore des tests http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157
    35. 35. @iProspectFR #seocamp Désindexer un contenu Nous avons injecté dynamiquement une balise noindex. Le contenu a-t-il été désindexé ? OK, la page a disparu des SERP
    36. 36. @iProspectFR #seocamp Mise en place simple d’un script qui injecte la meta robots Sur www.canyouseome.com/ page-c/, il n’y a aucune balise meta robots dans le code source. Elle est par contre présente dans le DOM.
    37. 37. @iProspectFR #seocamp Retirer une balise noindex Nous avons mis un script pour retirer la balise meta robots : KO, la page n’a pas été réindexée
    38. 38. @iProspectFR #seocamp Résultat Sur http://canyouseome.com/page-d/, la balise meta robots est présente dans le code source mais pas dans le DOM.
    39. 39. @iProspectFR #seocamp Un site fait avec AngularJS s’indexe-t-il ? Le JavaScript utilisé dans Angular ou d’autres framework JS est complexe. Google a encore bien du mal l’interpréter. L’escaped fragment reste une manière efficace de donner le contenu à Google et d’indexer les pages. Plusieurs tests à suivre : http://ng.jscrawlability.com/ (angular), http://react.jscrawlability.com/ (react)
    40. 40. En conclusion
    41. 41. @iProspectFR #seocamp Quelques enseignements • Le DOM prime. Ne vous fiez plus au code source. • Si des instructions contradictoires sont données sur l’indexation (noindex), la négation l’emporte, JS exécuté ou code source (c’est un peu moins vrai pour le nofollow). • Google ne fait pas d’interaction. • Tant que le rendu est du html propre, il n’y a pas de problème d’indexation. • Le javascript ne doit pas non plus être trop complexe. Il ne doit pas y avoir trop de fichiers à charger. • Si vous ne voulez pas que le JS soit interprété : bloquez l’accès à Google (en passant par un domaine externe bloqué par un robots.txt par exemple)
    42. 42. @iProspectFR #seocamp Un site doit-il passer sur un framework JS (type Angular)? Le site a-t-il une certaine autorité ? Bing apporte-t-il une part conséquente de trafic ? Etes-vous prêt à traverser une zone de turbulence ? Les équipes techniques sont-elles sensibles au SEO ? Oui Non Oui Non Oui Oui Ok (mais bon courage !) Oui (ou pas du tout) Votre site a-t-il beaucoup de pages ? Non Non
    43. 43. @iProspectFR #seocamp Ne négligez pas l’accessibilité • Utilisez les sitemaps • Ajoutez des micro données • Le DOM et le rendu final doit être du HTML classique
    44. 44. Quels outils SEO pour exécuter le JS ?
    45. 45. @iProspectFR #seocamp L’outil « explorer comme Google » Google Search Console et l’outil Explorer commeGoogle (Affichage) Les tests sont nécessaires mais pas suffisants !
    46. 46. @iProspectFR #seocamp PhantomJS Le meilleur outil…. PhantomJS. Mais il faut aimer la technique !
    47. 47. @iProspectFR #seocamp SEOTools for excel Excel seo tools et PhantomJS : http://seotoolsforexcel.com/phantomjs-cloud/ Il faut juste connaître le xpath.
    48. 48. @iProspectFR #seocamp Un crawler qui exécute le JS ? Pas de produit sur le marché actuellement… (coucou Botify,onCrawl, etc.)
    49. 49. @iProspectFR #seocamp GoogleTag Manager Peut devenir unCMS (réécrire des titres, injecter du contenu, etc.) http://startup-metrics.fr/gtm-tips-3-javascript-seo-friendly-avec-google-tag-manager-le-cas-resultats-du- bac/
    50. 50. Merci ! (et bon appétit)
    51. 51. Rejoignez-nous, on recrute ! madeline.pinthon@iprospect.com

    ×