Cette conférence évoque les raisons pour lesquelles il est important de s'intéresser au SEO JavaScript, rappelle les problèmes connus et propose des solutions spécifiques à certains cas d'usage.
4. Paris 2022 #SEOCAMPus
Standardisation de JavaScript
4
● Quand vient le choix des frameworks
web, les développeurs préfèrent
largement les frameworks JS
● Parmi eux, React est préféré,
s’ensuivent Angular et Vue
● La communauté ne cesse de grandir,
la facilité de développement s’accroît :
JavaScript n’est pas prêt de disparaître
dans l’univers du web
5. Paris 2022 #SEOCAMPus
Google appelle à la performance
5
● Google soutient des projets
permettant d’améliorer l’expérience
utilisateur des internautes
● Les principaux projets soutenus sont
des outils et frameworks web
JavaScript
6. Paris 2022 #SEOCAMPus
Astro : un framework embryonnaire soutenu
par Google
6
● Aujourd’hui très peu utilisé (moins de
500 sites à travers le monde, selon
Builwith)
● Soutenu en 2022 par le Chrome’s Web
Framework Fund
● Particulièrement adapté pour les sites
e-Commerce, corporate et
informationnels
“The all-in-one web framework for building fast, content-focused websites”
11. Paris 2022 #SEOCAMPus
Indexation
11
● Délai d’indexation du contenu JS
● Potentielle non indexation : l’indexation
n’est pas garantie, de nombreux problèmes
peuvent intervenir durant la phase de
rendu
● Rendre les pages d’un site basé
essentiellement sur JS prend plus de
temps
12. Paris 2022 #SEOCAMPus
Indexation
12
Le directeur R&D chez Onely, Tomek Rudzki, a suivi une cinquantaine de sites
populaires pour un total de 9 803 pages web.
13. Paris 2022 #SEOCAMPus
Google dit rendre correctement JavaScript
13
● Le moteur Chromium est
performant par rapport aux
concurrents
● Le WRS (Web Rendering Service)
s’améliore chaque année
● Mais reste encore imparfait :
contenus JS non indexés, délais,
time-out, ne simule pas
correctement un réel navigateur
14. Paris 2022 #SEOCAMPus
Mais il recommande quand même de le
rendre pour lui
14
“Gardez à l'esprit que l'affichage côté serveur ou le pré-affichage est
recommandé, car il permet aux utilisateurs et aux robots d'exploration
d'accéder à votre site plus rapidement. De plus, tous les robots n'utilisent
pas forcément JavaScript.” *
* https://developers.google.com/search/docs/advanced/javascript/javascript-seo-basics
15. Paris 2022 #SEOCAMPus
Performances
15
Deux problèmes majeurs liés à l’usage
des frameworks JavaScript :
● Bundles volumineux
● Code inutilisé
Solutions :
● Code spliting
● Tree shaking (suppression du code
mort)
16. Paris 2022 #SEOCAMPus
Contenus cachés pour les robots
16
● Injection de code HTML via un “clic”,
“survol” (hover) ou scroll
● Vérifier les menus accordéons,
facettes, liens, boutons, etc
18. Paris 2022 #SEOCAMPus
Principes premiers du SEO
18
1
Pour générer du trafic et des
conversions organiques
3 Donc, indexée
5 Crawlabilité
2
Une page doit être positionnée
4
Crawlée
19. Paris 2022 #SEOCAMPus
Comment Google “index” une page HTML ?
19
File d’attente & Crawl
Google découvre une URL, il peut (ou non)
la crawler. C'est-à-dire, la parcourir,
extraire ses liens et ses autres contenus
HTML, JS, CSS, images, vidéos.
Délivrer les résultats
Google fait enfin correspondre la requête
de l’internaute avec les résultats les plus
pertinents de l’index, selon plusieurs
centaines de facteurs de ranking.
Traitement & Indexation
Phase de traitement : Google analyse les
contenus, la duplication et d’autres
facteurs. Pour ensuite indexer ou non la
page.
20. Paris 2022 #SEOCAMPus
Comment Google “index” du contenu JS ?
20
Première vague d’indexation
Seconde vague d’indexation
21. Paris 2022 #SEOCAMPus
La notion de seconde vague
21
Au centre des débats
https://youtu.be/o73WuZ_7AHA
22. Paris 2022 #SEOCAMPus
De la notion du budget de crawl…
22
C’est un peu comme ouvrir une enveloppe, et s’arrêter là
23. Paris 2022 #SEOCAMPus
à celle de “render budget”
23
C’est plutôt comme ouvrir l’enveloppe et lire la lettre
+
25. Paris 2022 #SEOCAMPus
Système de rendu et facteur de ranking
25
Non, utiliser un système de rendu n’est pas un facteur de ranking direct.
Corrélation n’est pas causalité.
26. Paris 2022 #SEOCAMPus
3 méthodes fondamentales
26
● CSR (Client Side Rendering)
● SSR (Server Side Rendering)
● SSG (Static Site Generation)
28. Paris 2022 #SEOCAMPus 28
Le serveur a
rendu en
avance, lors
d’un build, le
JavaScript
29. Paris 2022 #SEOCAMPus 29
Le serveur rend
le JavaScript
lors du hit du
client ou d’un
robot
d’exploration
30. Paris 2022 #SEOCAMPus
Avantages et inconvénients
30
CSR
Client
SSG
pré-chargement
SSR
chargement à la demande
- Lenteur
- Crawlabilité
- Interactivité
- Pas de charge serveur
- Rapidité
- Crawlabilité
- Interactivité (par
défaut)
- Temps de build
(sites volumineux)
- Interactivité
- Rapidité
- Crawlabilité
- Charge serveur
- Réactif, mais peut l’être
moins que le SSG
32. Paris 2022 #SEOCAMPus
Moyennes (+) à grosses volumétries (> 1M
pages)
32
ISR
build time + run time (Next JS)
Avantage du SSG sans le désavantage
du long build time. Le page est
générée quand elle a un hit et
possibilité de configurer une sorte de
« fréquence ».
Full SSR
chargement à la demande
Possibilité de rendre uniquement
les éléments nécessaires pour le
SEO, alléger le SSR
ou
34. Paris 2022 #SEOCAMPus
Code HTML avant rendu JS
34
Avant rendu JS, un titre H2 présent sur la page d’accueil de
manomano.fr n’est (volontairement) pas rendu côté serveur (SSR).
Afficher le code source (Chrome), manomano.fr
35. Paris 2022 #SEOCAMPus
Code HTML après rendu JS
35
Il est donc rendu côté client.
Inspecter l’élément (Console Chrome), manomano.fr
36. Paris 2022 #SEOCAMPus
Crawler un site JS : Screaming Frog
36
● Screaming Frog utilise le moteur
Chromium (comme Google)
● Crawler un site avec le rendu permet
de comparer les données avant et
après rendu JS
37. Paris 2022 #SEOCAMPus
Crawler un site JS : Screaming Frog
37
● Screaming Frog permet de détecter
des contenus présents uniquement
dans le HTML avant ou après rendu
● Leur documentation détaille chacun
de ses filtres
38. Paris 2022 #SEOCAMPus
Crawler un site JS : Screaming Frog
38
Il est ensuite simple d’identifier finement le code
HTML qui diffère avant et aprè le rendu