Le jeudi 7 avril à 11h45, Madeline Pinthon a donné une conférence sur les bonnes pratiques du Javascript pour indexer les pages sur les moteurs de recherche.
2. Qui suis-je ?
Madeline Pinthon
Consultante SEO chez iProspect
• Diplômée d’Audencia Nantes
• 4 ans chez l’annonceur
• 1 an chez iProspect
J’en profite pour remercier :
• Mes collèges & clients
• Les events SEO (teknseo, seocamp, visibilite
live camp, google black day)
• www.scripts-seo.com
• Les SEO sur twitter, skype,…
3. 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
6. 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. 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. 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. Les conseils de John
Don't cloak to Googlebot. Use
"feature detection" &
"progressive enhancement"
techniques to make your
content available to all users.“
10. Les conseils de John
Use rel=canonical when serving
content from multiple URLs is
required.
“
11. 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. 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. 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. 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. Les conseils de John
Google supports the use of
JavaScript to provide titles,
description & robots meta tags,
structured data, and other meta-
data.“
16. 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.
“
18. 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. Exemple
C’est bien le DOM qui est pris en compte, et non pas le code source.
Code source DOM
Google
20. 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
25. 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. 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. 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é
33. 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.
35. 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. 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. 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
39. 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.
41. Quelques enseignements
• Le DOM prime. Ne vous fiez plus au code source.
• Si des instructions contradictoires sont données sur l’indexation, la négation l’emporte, JS executé 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. 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. 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
45. L’outil « explorer comme Google »
Google Search Console et l’outil Explorer commeGoogle (Affichage)
Les tests sont nécessaires mais pas suffisants !
47. SEOTools for excel
Excel seo tools et PhantomJS : http://seotoolsforexcel.com/phantomjs-cloud/
Il faut juste connaître le xpath.
48. Un crawler qui exécute le JS ?
Pas de produit sur le marché actuellement…
(coucou Botify,onCrawl, etc.)
49. 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/
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.
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/