A présent, Googlebot execute le javascript et "voit" une version de la page très proche de la version vue par un utilisateur. Dans cette conférence, nous allons voir ce que cela implique pour le SEO. On parlera des frameworks JS, SSR, hydration, performance, des Core Web Vitals
4. Jadis…
Un site 100% généré en Javascript ne pouvait pas voir son contenu indexé…
5. Googlebot + WRS
Depuis déjà de nombreuses années,
Google crawlait le web en utilisant un
Googlebot traditionnel + un « Web
Rendering Service » WRS pour
accéder aux contenus générés en
Javascript
Information lâchée en 2017
WRS était basé sur Chrome 41
la rendition était très différente de ce que
voyaient les utilisateurs
Le délai pour voir son contenu généré
en Javascript parsé et indexé était long
Plusieurs jours
Jamais
Jamais correctement…
6. C’est quoi Googlebot Evergreen ?
Mai 2019 : nouvelle version de
Googlebot, basée sur Chromium,
mais un Chromium (à peu près) à
jour
https://webmasters.googleblog.com/2019
/05/the-new-evergreen-googlebot.html
Août 2019 : tous les outils de la
GSC et tous les outils de test
utilisent Googlebot Evergreen
Automne 2019 : réduction nette du
délai pour la phase de rendering
7. Le user agent a changé…
Mais avec retard (décembre 2019)
Avant :
Mozilla/5.0 AppleWebKit/537.36
(KHTML, like Gecko; compatible;
Googlebot/2.1;
+http://www.google.com/bot.html)
Safari/537.36
Après :
Mozilla/5.0 AppleWebKit/537.36
(KHTML, like Gecko; compatible;
Googlebot/2.1;
+http://www.google.com/bot.html)
Chrome/W.X.Y.Z Safari/537.36
7
8. Détecter Googlebot
Liste officielle des user agents :
https://support.google.com/webmasters/answer/1061943?
hl=fr
Chaque fois que vous voyez Chrome/W.X.Y.Z dans
les chaînes du user-agent, W.X.Y.Z est un espace
réservé qui correspond à la version du navigateur
Chrome utilisée par ce user-agent (par exemple,
41.0.2272.96). Ce numéro de version augmente au fil
du temps afin de représenter la dernière version de
Chromium utilisée par Googlebot.
Si vous effectuez une recherche dans vos journaux
ou si vous filtrez votre serveur afin d'identifier un
user-agent avec ce format, il est conseillé d'utiliser
des caractères génériques pour le numéro de version
au lieu de spécifier un numéro de version précis.
Google recommande de chercher la correspondance avec
la chaine générique « Googlebot »
Sinon la « feature detection » mais c’est techniquement
plus pointu
8
9. Bingbot utilise aussi Chromium
… et en mode « evergreen » : Bingbot est basé sur Edge basé sur Chromium
Nouveaux User Agents (déc
2019) :
Desktop
Mozilla/5.0 AppleWebKit/537.36
(KHTML, like Gecko; compatible;
bingbot/2.0;
+http://www.bing.com/bingbot.htm)
Chrome/W.X.Y.Z Safari/537.36
Edg/W.X.Y.Z
Mobile
Mozilla/5.0 (Linux; Android 6.0.1;
Nexus 5X Build/MMB29P)
AppleWebKit/537.36 (KHTML, like
Gecko) Chrome/W.X.Y.Z Mobile
Safari/537.36 Edg/W.X.Y.Z
(compatible; bingbot/2.0;
+http://www.bing.com/bingbot.htm)
9
11. Le nouveau fonctionnement :
Une indexation en deux étapes
1. Crawl traditionnel
+indexation
2. Rendition et indexation
12. Le processus complet
Au début, il fallait
attendre
longtemps (des
heures) entre la
phase d’indexation
du HTML seul et la
phase d’indexation
du contenu généré
par le WRS
12
13. Ce que vous voyez dans les logs…
… n’est que l’appel du code HTML
13
14. Un délai d’attente réduit pour la rendition
On ne compte plus en heures et en jours
Chiffres de novembre 2019
5 secondes de délai médian
90% des pages sont rendues
en quelques minutes
seulement
Attention : si vous
compliquez la tâche des
crawlers, l’indexation
complète demandera des
jours !
14
15. Attention aux limitations de Googlebot
Ce n’est pas exactement votre browser
Il respecte le robots.txt
Attention aux ressources bloquées
Il ne supporte pas les règles de
mise en cache http…
Il ne supporte pas les
fonctionnalités basées sur un
stockage local
Sessions et variables locales
Il abandonne très vite…
Attention aux timeouts
15
17. Générer le contenu en JS est possible
Ok pour Googlebot et Bingbot
Toujours KO pour les autres bots
Un site full JS peut maintenant :
être exploré correctement,
être indexé correctement,
et se positionner normalement
Attention :
Si votre site est lent, mal codé, mal
architecturé => le référencement
sera dégradé
Remarque : les sites « à
l’ancienne » en SSR ne posent
pas de problèmes
18. Les contre indications
Votre code JS consomme trop de
temps CPU
Trop de « time outs »
Vos ressources sont lentes à charger
Méfiez vous des scripts tiers, des
trackers
Votre contenu ne peut pas être mis
en cache longue durée
Vous n’avez pas d’urls
« normales » et une structure de
sites avec des pages multiples et
une arborescence
18
19. Attention aux liens en JS
N’utilisez pas de syntaxes en « fragments » derrière un #
Utilisez des urls « normales »,
que vous pouvez générer avec
la méthode Javascript
Pushstate()
19
20. Pas de SPA, un site avec des pages !
Un moteur de recherche indexe des
pages webs, pas des bouts de
contenus
Indiquez clairement les
associations « url <-> contenus »
avec des urls normales
Vos pages web, même virtuelles, doivent
avoir un contenu unique, des meta SEO
et title uniques etc.
Simulez ou conservez une
arborescence de sites web : le
maillage interne contient des
signaux importants pour le SEO
20
21. Reco pour sites utilisant
des frameworks JS
Hybrid Rendering
Ou
Universal avec Hydration
21
22. Le « dynamic rendering » perd de son intérêt
C’est une béquille qui peut servir
si vous ne savez pas faire de
l’hybrid rendering, ou de
l’Universal avec Hydration
Mais sinon, le bot se débrouille…
22
23. Attention à l’ « obfuscation » des liens
On ne peut pas non plus cacher à coup sûr du contenu via du code JS
Approche déconseillée :
Coût / bénéfices défavorable, sauf
exception
Google ne détecte pas tout ce qui
se comporte comme un lien, et ne
teste pas tous les liens pour
économiser du temps
Mais certaines techniques ne
marchent plus, et certains liens
bien « masqués » sont découverts!
Si vous faites cela, testez bien
votre méthode avant !
Mais essayez aussi de trouver une autre
approche… plus durable et performante
23
24. Quid des contenus masqués en JS ?
Contenus masqués :
Contenus dans des onglets ou des
accordéons
C’est parsé par Googlebot
Avec le mobile first indexing, ces
contenus sont pris en
compte(indexés) normalement
Ce n’était pas le cas côté desktop
24
25. Attention aux contenus externes…
Google voit le contenu généré par des scripts tiers de commentaires etc…
Générer des avis ou des commentaires ou du
contenu via des APIs côté client ou pire, en
utilisant des iFrames, rend leur contenu difficile à
indexer
Faites le côté serveur
Attention à ce que ces scripts affichent
25
26. Remarque : les download times GSC
Ils mesurent le temps de téléchargement du code, pas un délai de rendition
TTLB sur le fichier HTML
Très différent de Google
PageSpeed
Pour faciliter la vie du crawler,
l’attention aux « Core Web
Vitals » devient indispensable
26
28. Auditer un site à l’heure de Googlebot evergreen
Deux crawls :
En mode « classique » (HTML)
En mode « headless browser » :
exécution du JS
On compare les deux bases d’urls
crawlées
Si ça matche : c’est bon
Si les deux se complètent : c’est bon
Si les deux se contredisent : c’est pas
bon
28
29. Tester avec la GSC
Votre crawler SEO simule Googlebot, ce n’est pas Googlebot
Vérifier vos templates avec la
GSC
On peut tester le rendu de la
page et même le code HTML
d’une page avec l’inspection
d’URL, pour détecter le contenu
que Googlebot n’a pas pu ou eu
l’autorisation de charger
29
30. Conclusion
Avec Googlebot Evergreen, Google voit le même site que vos internautes
À peu de choses près (attention au robots.txt, aux ressources en timeout, aux variables
locales…)
On peut donc avoir un bon référencement pour un site full JS
Plus de contre-indications absolues
Cela rend obsolètes pas mal de recommandations SEO
Mais il y’a de nouveaux obstacles techniques au crawl et à l’indexation à
connaître
Ne laissez pas vos développeurs préférés se lâcher et coder un site web en oubliant les
fondamentaux !
Apprenez vite ces limitations, et comment les diagnostiquer
Et vous avez besoin d’un code ultraperformant !
Sinon, si vous dépendez du SEO de votre site, faites le « à l’ancienne » (en SSR avec un minimum de
JS)