Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 42 Publicité

Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022

Télécharger pour lire hors ligne

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.

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.

Publicité
Publicité

Plus De Contenu Connexe

Plus récents (20)

Publicité

Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022

  1. 1. Maîtriser le SEO d’un site basé sur JavaScript
  2. 2. Paris 2022 #SEOCAMPus 2 Adrien Russo Consultant SEO Sénior ON RECRUTE !
  3. 3. Paris 2022 #SEOCAMPus #Chiffres et vision Préambule 3
  4. 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. 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. 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. 7. Paris 2022 #SEOCAMPus D’excellents “sites JavaScript” 7
  8. 8. Paris 2022 #SEOCAMPus Frameworks populaires 8
  9. 9. Paris 2022 #SEOCAMPus En résumé… 9
  10. 10. Paris 2022 #SEOCAMPus Les vrais problèmes 10
  11. 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. 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. 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. 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. 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. 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. 17. Paris 2022 #SEOCAMPus #Rappels : crawl et indexation du contenu HTML 17
  18. 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. 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. 20. Paris 2022 #SEOCAMPus Comment Google “index” du contenu JS ? 20 Première vague d’indexation Seconde vague d’indexation
  21. 21. Paris 2022 #SEOCAMPus La notion de seconde vague 21 Au centre des débats https://youtu.be/o73WuZ_7AHA
  22. 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. 23. Paris 2022 #SEOCAMPus à celle de “render budget” 23 C’est plutôt comme ouvrir l’enveloppe et lire la lettre +
  24. 24. Paris 2022 #SEOCAMPus #Méthodes de rendu Faciliter la vie des moteurs 24
  25. 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. 26. Paris 2022 #SEOCAMPus 3 méthodes fondamentales 26 ● CSR (Client Side Rendering) ● SSR (Server Side Rendering) ● SSG (Static Site Generation)
  27. 27. Paris 2022 #SEOCAMPus 27 Le navigateur rend le JavaScript
  28. 28. Paris 2022 #SEOCAMPus 28 Le serveur a rendu en avance, lors d’un build, le JavaScript
  29. 29. Paris 2022 #SEOCAMPus 29 Le serveur rend le JavaScript lors du hit du client ou d’un robot d’exploration
  30. 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. 31. Paris 2022 #SEOCAMPus Petites à moyennes volumétries 31 CSR Client SSG pré-chargement - Interactivité - Rapidité - Crawlabilité + “ “ Hydration (“partial hydration” - Astro.build)
  32. 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. 33. Paris 2022 #SEOCAMPus #Quelques outils pratico-pratiques Auditer 33
  34. 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. 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. 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. 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. 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. 39. Paris 2022 #SEOCAMPus Conclusion 39
  40. 40. Paris 2022 #SEOCAMPus 40
  41. 41. Question Mug Paris 2022 #SEOCAMPus Que signifie SSG ? 41
  42. 42. MERCI AUX SPONSORS Paris 2022 #SEOCAMPus 42

×