seocamp2016 : javascript et indexation, où en est-on ?
TRANSCRIPT
![Page 1: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/1.jpg)
Indexation et Javascript, où en est-on ?Seocamp’us Paris - 7 avril 2016 - Madeline Pinthon
![Page 2: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/2.jpg)
@iProspectFR #seocamp
Qui suis-je ?Madeline PinthonConsultante SEO chez iProspectwww.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,…
![Page 3: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/3.jpg)
@iProspectFR #seocamp
Comment se déroulera la conférence
L’évolution de la communication de GooglePoint Un
Des paroles aux actes (les tests)Point deux
Les outils utilesPoint Trois
![Page 4: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/4.jpg)
Ce que dit Google
![Page 5: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/5.jpg)
@iProspectFR #seocamp
Avant, il fallait désactiver le javascript
![Page 6: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/6.jpg)
@iProspectFR #seocamp
La communication de Google évolue
Avril 2014Question : how does Google
handle content loaded via Javascript ?
VIDEO DE MATT CUTTS
Mars 2014Le JSON peut alimenter le knowledge graph
WEBMASTER
Mai 2014“we decided to try to understand pages by executing JavaScript.”
UNDERSTANDING WEB PAGES BETTER
![Page 7: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/7.jpg)
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 2015GTM V2Lancement de AngularJS 2.0
LANCEMENT DE NOUVEAUX OUTILS
Janvier 2015
La nouvelle version comprend le JSON-LD
NOUVEL OUTIL DE TEST DES RICH SNIPPETS
Avril 2015Google doit interpréter les
CSS pour voir si un site est mobile-friendly
MOBILEGEDDON
![Page 8: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/8.jpg)
Février 2016Accé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
![Page 9: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/9.jpg)
@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.
“
![Page 10: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/10.jpg)
@iProspectFR #seocamp
Les conseils de John
Use rel=canonical when serving content from
multiple URLs is required.“
![Page 11: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/11.jpg)
@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.
“
![Page 12: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/12.jpg)
@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.
“
![Page 13: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/13.jpg)
@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. “
![Page 14: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/14.jpg)
@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
“
![Page 15: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/15.jpg)
@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. “
![Page 16: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/16.jpg)
@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.
“
![Page 17: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/17.jpg)
De la théorie à la pratique
![Page 18: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/18.jpg)
@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.
![Page 19: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/19.jpg)
@iProspectFR #seocamp
Exemple
C’est bien le DOM qui est pris en compte, et non pas le code source.
Code source DOM
![Page 20: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/20.jpg)
@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
![Page 21: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/21.jpg)
@iProspectFR #seocamp
Sans JS
CFPJ : formation communication orale
![Page 22: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/22.jpg)
@iProspectFR #seocamp
Avec JS
![Page 23: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/23.jpg)
@iProspectFR #seocamp
Dans google…
![Page 24: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/24.jpg)
@iProspectFR #seocamp
Autres tests…de 2013
http://www.klikki.com/blog/google-able-index-content-fetched-using-ajaxInjecter du contenu
Le contenu était bien indexé
![Page 25: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/25.jpg)
@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é
![Page 26: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/26.jpg)
@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é
![Page 27: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/27.jpg)
@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é
![Page 28: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/28.jpg)
@iProspectFR #seocamp
Les liens javascript
Des liens insérés en JS sont-ils crawlés ?
Les liens ont été crawlés.
![Page 29: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/29.jpg)
@iProspectFR #seocamp
Sans JS
(Merci Walid, http://www.trafic-organique.com/javascript-seo.html )
![Page 30: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/30.jpg)
@iProspectFR #seocamp
Avec JS
![Page 31: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/31.jpg)
@iProspectFR #seocamp
Les redirections
Comment sont considérées les redirections javascript ?
Les redirections sont bien prises en compte…et assimilées à des 301
![Page 32: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/32.jpg)
@iProspectFR #seocamp
Illustration dans search console
Malgré un code 200, Google voit la redirection.
![Page 33: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/33.jpg)
@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.
![Page 34: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/34.jpg)
@iProspectFR #seocamp
Encore des tests
http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157
![Page 35: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/35.jpg)
@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
![Page 36: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/36.jpg)
@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.
![Page 37: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/37.jpg)
@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
![Page 38: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/38.jpg)
@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.
![Page 39: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/39.jpg)
@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)
![Page 40: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/40.jpg)
En conclusion
![Page 41: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/41.jpg)
@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)
![Page 42: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/42.jpg)
@iProspectFR #seocamp
Un site doit-il passer sur un framework JS (type Angular)?
Le site a-t-il une certaine autorité ?
C’est une mauvaise
idée… (pour le moment)
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
OuiOk (mais bon
courage !)
Oui (ou pas du tout)
Pas
spécia
lement
…
Votre site a-t-il beaucoup de pages ?
NonNon
![Page 43: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/43.jpg)
@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
![Page 44: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/44.jpg)
Quels outils SEO pour exécuter le JS ?
![Page 45: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/45.jpg)
@iProspectFR #seocamp
L’outil « explorer comme Google »
Google Search Console et l’outil Explorer comme Google (Affichage)
Les tests sont nécessaires mais pas suffisants !
![Page 46: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/46.jpg)
@iProspectFR #seocamp
PhantomJS
Le meilleur outil…. PhantomJS.
Mais il faut aimer la technique !
![Page 47: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/47.jpg)
@iProspectFR #seocamp
SEO Tools for excel
Excel seo tools et PhantomJS : http://seotoolsforexcel.com/phantomjs-cloud/
Il faut juste connaître le xpath.
![Page 48: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/48.jpg)
@iProspectFR #seocamp
Un crawler qui exécute le JS ?
Pas de produit sur le marché actuellement…
(coucou Botify,onCrawl, etc.)
![Page 49: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/49.jpg)
@iProspectFR #seocamp
Google Tag Manager
Peut devenir un CMS (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/
![Page 50: Seocamp2016 : javascript et indexation, où en est-on ?](https://reader030.vdocuments.us/reader030/viewer/2022033107/5871cabe1a28ab423c8b4ecf/html5/thumbnails/50.jpg)
Merci ! (et bon appétit)