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.

1. Maîtriser le SEO d’un site basé sur JavaScript

2. Paris 2022 #SEOCAMPus 2
Adrien Russo
Consultant SEO Sénior
ON RECRUTE !

3. Paris 2022 #SEOCAMPus
#Chiffres et vision
Préambule
3

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”

7. Paris 2022 #SEOCAMPus
D’excellents “sites JavaScript”
7

8. Paris 2022 #SEOCAMPus
Frameworks populaires
8

9. Paris 2022 #SEOCAMPus
En résumé…
9

10. Paris 2022 #SEOCAMPus
Les vrais problèmes
10

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

17. Paris 2022 #SEOCAMPus
#Rappels : crawl et indexation
du contenu HTML
17

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
+

24. Paris 2022 #SEOCAMPus
#Méthodes de rendu
Faciliter la vie des moteurs
24

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)

27. Paris 2022 #SEOCAMPus 27
Le navigateur
rend le JavaScript

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

31. Paris 2022 #SEOCAMPus
Petites à moyennes volumétries
31
CSR
Client
SSG
pré-chargement
- Interactivité
- Rapidité
- Crawlabilité
+
“
“
Hydration (“partial hydration” -
Astro.build)

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

33. Paris 2022 #SEOCAMPus
#Quelques outils pratico-pratiques
Auditer
33

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

39. Paris 2022 #SEOCAMPus
Conclusion
39

40. Paris 2022 #SEOCAMPus 40

41. Question Mug
Paris 2022 #SEOCAMPus
Que signifie SSG ?
41

42. MERCI AUX SPONSORS
Paris 2022 #SEOCAMPus 42