SlideShare une entreprise Scribd logo
Le SEO JavaScript démystifié
Comment concilier framework JS et performances sur le Search ?
• Directeur technique SEO
• Refontes SEO
• Web Performance
• Missions coup de poing / chute de trafic
@aymerictwit
Adrien RUSSO
Consultant SEO indépendant
• Accompagnement général
• Problématiques JS, maillage, sémantique
(à l'échelle)
@adrienrusso
Aymeric BOUILLAT
Dans la file d’attente de rendu des 50 prochaines minutes
1. Introduction : pourquoi s'intéresser au JavaScript ?
2. Les problématiques en SEO JavaScript
3. Les solutions pour optimiser un site JS
4. Conclusion : la responsabilité des SEO
JavaScript et SEO,
la patience est de
mise…
Le JavaScript, c’est quoi ?
Avant
Rendre les pages Web interactives côté
client
Après
Créer le front-end et le back-end d’un site,
une application complète !
Pourquoi le JavaScript c’est compliqué ?
Le JavaScript, c’est de l’électricité pour Google
Source : https://bilan-electrique-2020.rte-france.com/consommation-repartition-sectorielle-de-la-consommation-2
Plus de 4% de la consommation électrique
française totale !
Source : https://www.statista.com/statistics/788540/energy-consumption-of-google/
Concilions JavaScript et performance
Car il n'est pas prêt de partir
Exploration des sites
pour Google
Indexation en 2 temps
File
d’attente
pour le crawl
Crawl Traitement Indexation
Découverte
de nouvelles
URL
URL HTML
Rendu
File d’attente
pour le rendu
Algorithmes
de ranking
Un contenu = une URL pour le SEO
Le problème des SPA (Single Page App) = tout le site accessible via une seule URL…
Single Page Application Multiple Pages Application
Pourtant, elles existent encore en 2023
#fail : refonte de site en JavaScript
Nombre de mots-clés positionnés sur google.fr
KO !!
Source : SEMRush
Même avec du rendu JavaScript,
Google peut faire face à un mur
Site pré-rendu, mais sans attribut href pour Google
Google doit récupérer les fichiers
JS, pour voir dans le futur
• Pour Google: du temps de crawl supplémentaire
• Pour votre site: des ressources supplémentaires
à servir (crawl JS, CSS, XHR, etc)
88 miles / hour
1,21 gigawatts !
Chargement des ressources de la page
et impact sur le budget d’exploration…
Crawl budget = que pour les gros sites!
Inventaire
perçu
Ne pas
gaspiller le
temps passé
par Google sur
votre site
Popularité
URL les plus
populaires sont
explorées plus
souvent
Obsolescence
Explorer
fréquemment les
documents pour
d'identifier toute
modification
> 10 000 pages uniques
dont le contenu change très
rapidement / quotidiennement
> 1 M de pages uniques
dont le contenu change assez souvent
(une fois par semaine)
Attention à
l’interprétation des
données…!
Baisse du TTFB = Augmentation du crawl ?
Les directives de cache sur les ressources JS
Mieux réguler le crawl de Google!
Ex: Cache-Control: max-age= 604800
Bloquer ces ressources JavaScript ?
Cas SEO Bloquer au crawl
Ressource qui a un impact sur le contenu?
Ressource liée à un formulaire (connexion, validation, etc.) ?
Ressource qui modifie les liens de navigation (ex: mega-menu) ?
Ressource ne sert qu’a ajouter des interactions avec l’utilisateur, non actionnables par Google ?
Ressources qui ne change pas le contenu mais dont on ne connait pas l’utilité?
Impact d’une ressource
JavaScript bloquée
Méthode
1) Identifier la ressource problématique
2) Clic droit sur la page Web
3) « Inspecter l’élément »
4) « Onglet « Réseau »
5) Clic sur la ressource
6) Clic-droit sur « Block request URL » 2
3
4
5
6
Délais et problèmes
de rendu chez
Google
Case study
Google a eu besoin de 9 fois plus de temps pour explorer les pages accessibles via JavaScript
Source : https://www.onely.com/blog/google-needs-9x-more-time-to-crawl-js-than-html/
/html/
/javascript/
HTML Brut
WebRendering
Service
Pages
crawlées
en 36H
Pages
crawlées
en 313 H
Temps de rendu
Web Rendering Service (rendu) et délais!
File d’attente de rendu
Certaines pages ne seront pas rendues tout de suite
(voire pas du tout…)
1 2
Stratégie de rendu
(CSR, SSR, SSG, ISR…)
On peut entendre dire que le "Google
moderne" travaille parfaitement avec JS
https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics?hl=fr
Comprenez ces 3 concepts et vous
comprendrez tout le reste
CSR
= Client Side
Rendering
Qui rend ? Le client
(Google, votre
navigateur, etc)
SSG
= Static Site
Generation
Qui rend ? Votre
serveur, pour fournir du
HTML statique à tout
le monde
SSR
= Server Side
Rendering
Qui rend ? Votre
serveur, pour une
version HTML mise à
jour pour tout le monde
Par défaut, on parle de CSR
Le client demande un
fichier HTML au
serveur
Le serveur renvoie
une page HTML vide
et les ressources
Le client récupère,
exécute, rend les
ressources
L'application est
prête à l'emploi
C'est-ce que l'on souhaite éviter (en SEO) !
Stratégies de rendu fondamentales (1 / 2)
Le client demande un
fichier HTML au
serveur
Le serveur renvoie
une page HTML qui a
été rendue en avance
Le client reçoit une
page donc le contenu
est disponible
L'application est
prête à l'emploi,
après rendu
d'éléments
dynamiques
Bonne solution, mais attention à la scalabilité du site
SSG
Stratégies de rendu fondamentales (2 / 2)
Le client demande un
fichier HTML au
serveur
Le serveur renvoie
une page HTML qui
vient d'être rendue
Le client reçoit une
page donc le contenu
est disponible
L'application est
prête à l'emploi,
après rendu
d'éléments
dynamiques
Bonne solution, mais attention à la charge serveur
SSR
La différence majeure ?
CSR
Le serveur renvoie
les ingrédients au
client, c'est au client
de cuisiner
SSG
Le serveur renvoie un
plat qui a été préparé
en avance au client
SSR
Le serveur renvoie un
plat qui vient d'être
préparé au client
Il y a des avantages et des inconvénients
pour chaque...
SSG
build
- Rapidité (webperf)
- Crawlabilité
- Temps de build
- Interactivité (par défaut)
SSR
hit
- Crawlabilité
- Pas de temps de build
- Interactivité
- Charge serveur
- TTFB (par défaut)
Donc, que choisir ? La réponse simple
SSR CSR
+
= hydration
Avec le SSR, l'objectif de l'hydration est d'alléger la charge serveur
La réponse "qui dépend"
Petite à moyenne volumétrie
SSG CSR
+
= hydration
Avec le SSG, l'objectif de l'hydration est d'assurer l'interactivité
Profiter du SSG statique sans le désavantage
du build time
ISR
Incremental Static
Regeneration
Système de cache permettant de mettre à jour chaque page à une
fréquence donnée, et non pas à chaque hit.
Attention au Dynamic Rendering
- Complexités pour la mise en place
- Risques d'oublis avec la gestion de l'User-agent
- Complexités et risques d'oublis lors de l'audit SEO
Exemple d'erreur en Dynamic Rendering
Des redirections vues par Googlebot en 404, mais redirigée côté navigateur
Source : Sistrix
Problème de configuration en SSR
Dynamic Rendering avec du contenu incompréhensible, juste pour Google…
Le JS peut empêcher
Google de surfer
correctement
Problématiques On-site
Pagination : l'URL doit bouger
• En JS, la pagination "load
more" ou "infinite scroll" est
régulièrement utilisée
• Cela nécessite de générer des
URLs différentes
Contenu qui nécessite une action pour être
visible dans le code
• Google n'indexera jamais un contenu qui nécessite une action
pour devenir visible dans le code HTML
• Ces actions peuvent être un clic, un scroll ou un hover
• Il faut vérifier les menus accordéons, facettes, etc
Impact du non pré-rendu sur les images
• Migration d'un site non JS vers un site JS
• Baisse soudaine du trafic Google Images
• La baisse s'est déroulée après la migration, sans pré-rendu des liens images et
un mauvais pré-rendu sur les contenus en général
Site de e-commerce avec un bloc « Produits
similaires » non rendu pour Google
?????
Des outils pour le
rendu final
Savoir ce que Google a indexé ?
pas avec la commande « cache: »
La commande
ne présente que le
HTML brut
récupéré lors de la
première phase
d’indexation, sans
exécution du JS
cache:
Préférez l’affichage «Version en
texte seul » pour voir texte/liens vus
par Google lors de sa première
phase d’indexation
Comment savoir si Google a indexé le rendu JS?
Commande + « extrait de texte entre guillemets »
site:URL
Comprendre ce que
Google est capable de
rendre en JS
https://search.google.com/test/rich-results
Voir la différence entre HTML brut
et HTML après rendu JS
https://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob
Auditer le rendu à l'échelle : Screaming Frog
• Visualiser le % de contenu pré-rendu
VS non pré-rendu (textuel, liens, etc)
• Réaliser un crawl sans l'exécution JS et
un crawl avec
• Visualiser le code précis pré-rendu VS
non pré-rendu
Est-ce au SEO de
décider de tout?
Mieux vaut prévenir que guérir
 Point de vue DEV, le JavaScript présente
de nombreux avantages
 Le SEO n’est qu’une pièce du puzzle
 Adaptons nous pour limiter les risques

Contenu connexe

Tendances

Data Driven Approach to Scale SEO at BrightonSEO 2023
Data Driven Approach to Scale SEO at BrightonSEO 2023Data Driven Approach to Scale SEO at BrightonSEO 2023
Data Driven Approach to Scale SEO at BrightonSEO 2023
Nitin Manchanda
 
Migrating wise.com to server-side GA4
Migrating wise.com to server-side GA4Migrating wise.com to server-side GA4
Migrating wise.com to server-side GA4
Tom Bennet
 
Navigating GA4 Google Analytics
Navigating GA4 Google AnalyticsNavigating GA4 Google Analytics
Navigating GA4 Google Analytics
Laura Lee Dooley
 
SEO Strategy: Where The F**K Do I Even Start? by Sophie Brannon
SEO Strategy: Where The F**K Do I Even Start? by Sophie BrannonSEO Strategy: Where The F**K Do I Even Start? by Sophie Brannon
SEO Strategy: Where The F**K Do I Even Start? by Sophie Brannon
Absolute Digital Media
 
SEO Restart 2023: Radek Kupr - Jak využít GA4 pro SEO
SEO Restart 2023: Radek Kupr - Jak využít GA4 pro SEOSEO Restart 2023: Radek Kupr - Jak využít GA4 pro SEO
SEO Restart 2023: Radek Kupr - Jak využít GA4 pro SEO
Taste
 
Discover, pa’ tipos como tú: Los 13 factores para disparar tu tráfico
Discover, pa’ tipos como tú: Los 13 factores para disparar tu tráficoDiscover, pa’ tipos como tú: Los 13 factores para disparar tu tráfico
Discover, pa’ tipos como tú: Los 13 factores para disparar tu tráfico
Clara Soteras
 
Formation Google Analytics 4 -GA4
Formation Google Analytics 4 -GA4Formation Google Analytics 4 -GA4
Formation Google Analytics 4 -GA4
Michaël Le Hoang
 
Google Tag Manager Training
Google Tag Manager TrainingGoogle Tag Manager Training
Google Tag Manager Training
Empirical Path
 
[LondonSEO 2020] BigQuery & SQL for SEOs
[LondonSEO 2020] BigQuery & SQL for SEOs[LondonSEO 2020] BigQuery & SQL for SEOs
[LondonSEO 2020] BigQuery & SQL for SEOs
Areej AbuAli
 
Google Tag Manager | Google Tag Manager Tutorial 2019 | Google Tag Manager Se...
Google Tag Manager | Google Tag Manager Tutorial 2019 | Google Tag Manager Se...Google Tag Manager | Google Tag Manager Tutorial 2019 | Google Tag Manager Se...
Google Tag Manager | Google Tag Manager Tutorial 2019 | Google Tag Manager Se...
Simplilearn
 
Seo Audit Demo
Seo Audit DemoSeo Audit Demo
Seo Audit Demo
Giovanni Sacheli
 
Seo ppt - BEGINNERS COURSE - COMPLETE GUIDE - ARISE ROBY
Seo ppt - BEGINNERS COURSE - COMPLETE GUIDE - ARISE ROBYSeo ppt - BEGINNERS COURSE - COMPLETE GUIDE - ARISE ROBY
Seo ppt - BEGINNERS COURSE - COMPLETE GUIDE - ARISE ROBY
Arise Roby
 
Audit seo rapport
Audit seo rapportAudit seo rapport
Audit seo rapport
Kaothar MEZIANE
 
Preparing for an SEO pitch
Preparing for an SEO pitchPreparing for an SEO pitch
Preparing for an SEO pitch
Richard Kirk
 
14 Types of Backlinks
14 Types of Backlinks  14 Types of Backlinks
14 Types of Backlinks
HimanshiMankani
 
Kathryn Bevan - How To Ace Your Website Migration - Brighton SEO Slides
Kathryn Bevan - How To Ace Your Website Migration - Brighton SEO Slides Kathryn Bevan - How To Ace Your Website Migration - Brighton SEO Slides
Kathryn Bevan - How To Ace Your Website Migration - Brighton SEO Slides
Kathryn Bevan
 
BrightonSEO March 2021 | Dan Taylor, Image Entity Tags
BrightonSEO March 2021 | Dan Taylor, Image Entity TagsBrightonSEO March 2021 | Dan Taylor, Image Entity Tags
BrightonSEO March 2021 | Dan Taylor, Image Entity Tags
Dan Taylor
 
How to Generate Content that Builds it's Own Links
How to Generate Content that Builds it's Own LinksHow to Generate Content that Builds it's Own Links
How to Generate Content that Builds it's Own Links
LizGration
 
LondonSEO Meetup - Cutting through the noise in SEO with data - Reina Hanada
LondonSEO Meetup - Cutting through the noise in SEO with data - Reina HanadaLondonSEO Meetup - Cutting through the noise in SEO with data - Reina Hanada
LondonSEO Meetup - Cutting through the noise in SEO with data - Reina Hanada
ReinaHanada1
 
Brighton SEO: SEO + PPC Working Together
Brighton SEO: SEO + PPC Working TogetherBrighton SEO: SEO + PPC Working Together
Brighton SEO: SEO + PPC Working Together
Navah Hopkins
 

Tendances (20)

Data Driven Approach to Scale SEO at BrightonSEO 2023
Data Driven Approach to Scale SEO at BrightonSEO 2023Data Driven Approach to Scale SEO at BrightonSEO 2023
Data Driven Approach to Scale SEO at BrightonSEO 2023
 
Migrating wise.com to server-side GA4
Migrating wise.com to server-side GA4Migrating wise.com to server-side GA4
Migrating wise.com to server-side GA4
 
Navigating GA4 Google Analytics
Navigating GA4 Google AnalyticsNavigating GA4 Google Analytics
Navigating GA4 Google Analytics
 
SEO Strategy: Where The F**K Do I Even Start? by Sophie Brannon
SEO Strategy: Where The F**K Do I Even Start? by Sophie BrannonSEO Strategy: Where The F**K Do I Even Start? by Sophie Brannon
SEO Strategy: Where The F**K Do I Even Start? by Sophie Brannon
 
SEO Restart 2023: Radek Kupr - Jak využít GA4 pro SEO
SEO Restart 2023: Radek Kupr - Jak využít GA4 pro SEOSEO Restart 2023: Radek Kupr - Jak využít GA4 pro SEO
SEO Restart 2023: Radek Kupr - Jak využít GA4 pro SEO
 
Discover, pa’ tipos como tú: Los 13 factores para disparar tu tráfico
Discover, pa’ tipos como tú: Los 13 factores para disparar tu tráficoDiscover, pa’ tipos como tú: Los 13 factores para disparar tu tráfico
Discover, pa’ tipos como tú: Los 13 factores para disparar tu tráfico
 
Formation Google Analytics 4 -GA4
Formation Google Analytics 4 -GA4Formation Google Analytics 4 -GA4
Formation Google Analytics 4 -GA4
 
Google Tag Manager Training
Google Tag Manager TrainingGoogle Tag Manager Training
Google Tag Manager Training
 
[LondonSEO 2020] BigQuery & SQL for SEOs
[LondonSEO 2020] BigQuery & SQL for SEOs[LondonSEO 2020] BigQuery & SQL for SEOs
[LondonSEO 2020] BigQuery & SQL for SEOs
 
Google Tag Manager | Google Tag Manager Tutorial 2019 | Google Tag Manager Se...
Google Tag Manager | Google Tag Manager Tutorial 2019 | Google Tag Manager Se...Google Tag Manager | Google Tag Manager Tutorial 2019 | Google Tag Manager Se...
Google Tag Manager | Google Tag Manager Tutorial 2019 | Google Tag Manager Se...
 
Seo Audit Demo
Seo Audit DemoSeo Audit Demo
Seo Audit Demo
 
Seo ppt - BEGINNERS COURSE - COMPLETE GUIDE - ARISE ROBY
Seo ppt - BEGINNERS COURSE - COMPLETE GUIDE - ARISE ROBYSeo ppt - BEGINNERS COURSE - COMPLETE GUIDE - ARISE ROBY
Seo ppt - BEGINNERS COURSE - COMPLETE GUIDE - ARISE ROBY
 
Audit seo rapport
Audit seo rapportAudit seo rapport
Audit seo rapport
 
Preparing for an SEO pitch
Preparing for an SEO pitchPreparing for an SEO pitch
Preparing for an SEO pitch
 
14 Types of Backlinks
14 Types of Backlinks  14 Types of Backlinks
14 Types of Backlinks
 
Kathryn Bevan - How To Ace Your Website Migration - Brighton SEO Slides
Kathryn Bevan - How To Ace Your Website Migration - Brighton SEO Slides Kathryn Bevan - How To Ace Your Website Migration - Brighton SEO Slides
Kathryn Bevan - How To Ace Your Website Migration - Brighton SEO Slides
 
BrightonSEO March 2021 | Dan Taylor, Image Entity Tags
BrightonSEO March 2021 | Dan Taylor, Image Entity TagsBrightonSEO March 2021 | Dan Taylor, Image Entity Tags
BrightonSEO March 2021 | Dan Taylor, Image Entity Tags
 
How to Generate Content that Builds it's Own Links
How to Generate Content that Builds it's Own LinksHow to Generate Content that Builds it's Own Links
How to Generate Content that Builds it's Own Links
 
LondonSEO Meetup - Cutting through the noise in SEO with data - Reina Hanada
LondonSEO Meetup - Cutting through the noise in SEO with data - Reina HanadaLondonSEO Meetup - Cutting through the noise in SEO with data - Reina Hanada
LondonSEO Meetup - Cutting through the noise in SEO with data - Reina Hanada
 
Brighton SEO: SEO + PPC Working Together
Brighton SEO: SEO + PPC Working TogetherBrighton SEO: SEO + PPC Working Together
Brighton SEO: SEO + PPC Working Together
 

Similaire à Le SEO JavaScript démystifié

SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO CAMP
 
Core Web Vitals : Comprendre, Mesurer, Optimiser
Core Web Vitals : Comprendre, Mesurer, OptimiserCore Web Vitals : Comprendre, Mesurer, Optimiser
Core Web Vitals : Comprendre, Mesurer, Optimiser
iProspect France
 
Seocamp Bayonne - JS et SEO
Seocamp  Bayonne - JS et SEOSeocamp  Bayonne - JS et SEO
Seocamp Bayonne - JS et SEO
Erlé Alberton
 
La casa de SEO : les questions à se poser pour le casse SEO parfait
La casa de SEO : les questions à se poser pour le casse SEO parfaitLa casa de SEO : les questions à se poser pour le casse SEO parfait
La casa de SEO : les questions à se poser pour le casse SEO parfait
Aymeric Bouillat
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
Damien Jubeau
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secrets
Aymeric Bouillat
 
Core Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEOCore Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEO
Digimood - Agence SEO / SEA
 
Webperf Front-End SeoCampus 2012
Webperf Front-End SeoCampus 2012Webperf Front-End SeoCampus 2012
Webperf Front-End SeoCampus 2012
Refficience
 
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Peak Ace
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
maru.maru
 
Yass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxYass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptx
yassinesouli2
 
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Peak Ace
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Fasterize
 
LoadTime & SEO - Erlé Alberton
LoadTime & SEO - Erlé AlbertonLoadTime & SEO - Erlé Alberton
LoadTime & SEO - Erlé Alberton
WeLoveSEO
 
We❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEOWe❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEO
Erlé Alberton
 
Optimisez la vitesse de chargement de votre site
Optimisez la vitesse de chargement de votre siteOptimisez la vitesse de chargement de votre site
Optimisez la vitesse de chargement de votre site
WebxFrance
 
La performance sur mobile
La performance sur mobileLa performance sur mobile
La performance sur mobile
Jean-Pierre Vincent
 
Google et le Javascript - Petit déjeuner du 29 mars 2017
Google et le Javascript - Petit déjeuner du 29 mars 2017Google et le Javascript - Petit déjeuner du 29 mars 2017
Google et le Javascript - Petit déjeuner du 29 mars 2017
Peak Ace
 
SEARCH Y - Bing : Frédéric Dubut et Fabrice Canel - Crawl et Indexation, les ...
SEARCH Y - Bing : Frédéric Dubut et Fabrice Canel - Crawl et Indexation, les ...SEARCH Y - Bing : Frédéric Dubut et Fabrice Canel - Crawl et Indexation, les ...
SEARCH Y - Bing : Frédéric Dubut et Fabrice Canel - Crawl et Indexation, les ...
SEARCH Y - Philippe Yonnet Evénements
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetDevclic
 

Similaire à Le SEO JavaScript démystifié (20)

SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP...
 
Core Web Vitals : Comprendre, Mesurer, Optimiser
Core Web Vitals : Comprendre, Mesurer, OptimiserCore Web Vitals : Comprendre, Mesurer, Optimiser
Core Web Vitals : Comprendre, Mesurer, Optimiser
 
Seocamp Bayonne - JS et SEO
Seocamp  Bayonne - JS et SEOSeocamp  Bayonne - JS et SEO
Seocamp Bayonne - JS et SEO
 
La casa de SEO : les questions à se poser pour le casse SEO parfait
La casa de SEO : les questions à se poser pour le casse SEO parfaitLa casa de SEO : les questions à se poser pour le casse SEO parfait
La casa de SEO : les questions à se poser pour le casse SEO parfait
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secrets
 
Core Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEOCore Web Vitals : les comprendre et se préparer pour le SEO
Core Web Vitals : les comprendre et se préparer pour le SEO
 
Webperf Front-End SeoCampus 2012
Webperf Front-End SeoCampus 2012Webperf Front-End SeoCampus 2012
Webperf Front-End SeoCampus 2012
 
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
 
Yass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxYass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptx
 
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
Améliorer les performances de vos sites web une priorité pour 2018 - Petit dé...
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
 
LoadTime & SEO - Erlé Alberton
LoadTime & SEO - Erlé AlbertonLoadTime & SEO - Erlé Alberton
LoadTime & SEO - Erlé Alberton
 
We❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEOWe❤️SEO 2019 : WebPerf et SEO
We❤️SEO 2019 : WebPerf et SEO
 
Optimisez la vitesse de chargement de votre site
Optimisez la vitesse de chargement de votre siteOptimisez la vitesse de chargement de votre site
Optimisez la vitesse de chargement de votre site
 
La performance sur mobile
La performance sur mobileLa performance sur mobile
La performance sur mobile
 
Google et le Javascript - Petit déjeuner du 29 mars 2017
Google et le Javascript - Petit déjeuner du 29 mars 2017Google et le Javascript - Petit déjeuner du 29 mars 2017
Google et le Javascript - Petit déjeuner du 29 mars 2017
 
SEARCH Y - Bing : Frédéric Dubut et Fabrice Canel - Crawl et Indexation, les ...
SEARCH Y - Bing : Frédéric Dubut et Fabrice Canel - Crawl et Indexation, les ...SEARCH Y - Bing : Frédéric Dubut et Fabrice Canel - Crawl et Indexation, les ...
SEARCH Y - Bing : Frédéric Dubut et Fabrice Canel - Crawl et Indexation, les ...
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internet
 

Plus de Adrien Russo

PBN et maillage interne prédictif - SEO Camp Metz 2019
PBN et maillage interne prédictif - SEO Camp Metz 2019PBN et maillage interne prédictif - SEO Camp Metz 2019
PBN et maillage interne prédictif - SEO Camp Metz 2019
Adrien Russo
 
Le SEO pour les débutants, IA & outils
Le SEO pour les débutants, IA & outilsLe SEO pour les débutants, IA & outils
Le SEO pour les débutants, IA & outils
Adrien Russo
 
UStart : Workshop SEO / référencement naturel
UStart : Workshop SEO / référencement naturelUStart : Workshop SEO / référencement naturel
UStart : Workshop SEO / référencement naturel
Adrien Russo
 
Structurer et mailler un site web SEO
Structurer et mailler un site web SEOStructurer et mailler un site web SEO
Structurer et mailler un site web SEO
Adrien Russo
 
Conférence NDD Camp Paris par Adrien Russo
Conférence NDD Camp Paris par Adrien RussoConférence NDD Camp Paris par Adrien Russo
Conférence NDD Camp Paris par Adrien Russo
Adrien Russo
 
La construction d'un PBN pour son référencement naturel - SEO By Night
La construction d'un PBN pour son référencement naturel - SEO By NightLa construction d'un PBN pour son référencement naturel - SEO By Night
La construction d'un PBN pour son référencement naturel - SEO By Night
Adrien Russo
 
Le network SEO, réseau de sites ou encore PBN : créer son réseau pour ranker ...
Le network SEO, réseau de sites ou encore PBN : créer son réseau pour ranker ...Le network SEO, réseau de sites ou encore PBN : créer son réseau pour ranker ...
Le network SEO, réseau de sites ou encore PBN : créer son réseau pour ranker ...
Adrien Russo
 

Plus de Adrien Russo (7)

PBN et maillage interne prédictif - SEO Camp Metz 2019
PBN et maillage interne prédictif - SEO Camp Metz 2019PBN et maillage interne prédictif - SEO Camp Metz 2019
PBN et maillage interne prédictif - SEO Camp Metz 2019
 
Le SEO pour les débutants, IA & outils
Le SEO pour les débutants, IA & outilsLe SEO pour les débutants, IA & outils
Le SEO pour les débutants, IA & outils
 
UStart : Workshop SEO / référencement naturel
UStart : Workshop SEO / référencement naturelUStart : Workshop SEO / référencement naturel
UStart : Workshop SEO / référencement naturel
 
Structurer et mailler un site web SEO
Structurer et mailler un site web SEOStructurer et mailler un site web SEO
Structurer et mailler un site web SEO
 
Conférence NDD Camp Paris par Adrien Russo
Conférence NDD Camp Paris par Adrien RussoConférence NDD Camp Paris par Adrien Russo
Conférence NDD Camp Paris par Adrien Russo
 
La construction d'un PBN pour son référencement naturel - SEO By Night
La construction d'un PBN pour son référencement naturel - SEO By NightLa construction d'un PBN pour son référencement naturel - SEO By Night
La construction d'un PBN pour son référencement naturel - SEO By Night
 
Le network SEO, réseau de sites ou encore PBN : créer son réseau pour ranker ...
Le network SEO, réseau de sites ou encore PBN : créer son réseau pour ranker ...Le network SEO, réseau de sites ou encore PBN : créer son réseau pour ranker ...
Le network SEO, réseau de sites ou encore PBN : créer son réseau pour ranker ...
 

Le SEO JavaScript démystifié

  • 1. Le SEO JavaScript démystifié Comment concilier framework JS et performances sur le Search ?
  • 2. • Directeur technique SEO • Refontes SEO • Web Performance • Missions coup de poing / chute de trafic @aymerictwit Adrien RUSSO Consultant SEO indépendant • Accompagnement général • Problématiques JS, maillage, sémantique (à l'échelle) @adrienrusso Aymeric BOUILLAT
  • 3. Dans la file d’attente de rendu des 50 prochaines minutes 1. Introduction : pourquoi s'intéresser au JavaScript ? 2. Les problématiques en SEO JavaScript 3. Les solutions pour optimiser un site JS 4. Conclusion : la responsabilité des SEO
  • 4. JavaScript et SEO, la patience est de mise…
  • 5. Le JavaScript, c’est quoi ? Avant Rendre les pages Web interactives côté client Après Créer le front-end et le back-end d’un site, une application complète !
  • 6. Pourquoi le JavaScript c’est compliqué ?
  • 7. Le JavaScript, c’est de l’électricité pour Google Source : https://bilan-electrique-2020.rte-france.com/consommation-repartition-sectorielle-de-la-consommation-2
  • 8. Plus de 4% de la consommation électrique française totale ! Source : https://www.statista.com/statistics/788540/energy-consumption-of-google/
  • 10. Car il n'est pas prêt de partir
  • 12. Indexation en 2 temps File d’attente pour le crawl Crawl Traitement Indexation Découverte de nouvelles URL URL HTML Rendu File d’attente pour le rendu Algorithmes de ranking
  • 13. Un contenu = une URL pour le SEO Le problème des SPA (Single Page App) = tout le site accessible via une seule URL… Single Page Application Multiple Pages Application
  • 14. Pourtant, elles existent encore en 2023
  • 15. #fail : refonte de site en JavaScript Nombre de mots-clés positionnés sur google.fr KO !! Source : SEMRush
  • 16. Même avec du rendu JavaScript, Google peut faire face à un mur Site pré-rendu, mais sans attribut href pour Google
  • 17. Google doit récupérer les fichiers JS, pour voir dans le futur • Pour Google: du temps de crawl supplémentaire • Pour votre site: des ressources supplémentaires à servir (crawl JS, CSS, XHR, etc) 88 miles / hour 1,21 gigawatts !
  • 19. et impact sur le budget d’exploration…
  • 20. Crawl budget = que pour les gros sites! Inventaire perçu Ne pas gaspiller le temps passé par Google sur votre site Popularité URL les plus populaires sont explorées plus souvent Obsolescence Explorer fréquemment les documents pour d'identifier toute modification > 10 000 pages uniques dont le contenu change très rapidement / quotidiennement > 1 M de pages uniques dont le contenu change assez souvent (une fois par semaine)
  • 21. Attention à l’interprétation des données…! Baisse du TTFB = Augmentation du crawl ?
  • 22. Les directives de cache sur les ressources JS Mieux réguler le crawl de Google! Ex: Cache-Control: max-age= 604800
  • 23. Bloquer ces ressources JavaScript ? Cas SEO Bloquer au crawl Ressource qui a un impact sur le contenu? Ressource liée à un formulaire (connexion, validation, etc.) ? Ressource qui modifie les liens de navigation (ex: mega-menu) ? Ressource ne sert qu’a ajouter des interactions avec l’utilisateur, non actionnables par Google ? Ressources qui ne change pas le contenu mais dont on ne connait pas l’utilité?
  • 24. Impact d’une ressource JavaScript bloquée Méthode 1) Identifier la ressource problématique 2) Clic droit sur la page Web 3) « Inspecter l’élément » 4) « Onglet « Réseau » 5) Clic sur la ressource 6) Clic-droit sur « Block request URL » 2 3 4 5 6
  • 25. Délais et problèmes de rendu chez Google
  • 26. Case study Google a eu besoin de 9 fois plus de temps pour explorer les pages accessibles via JavaScript Source : https://www.onely.com/blog/google-needs-9x-more-time-to-crawl-js-than-html/ /html/ /javascript/ HTML Brut WebRendering Service Pages crawlées en 36H Pages crawlées en 313 H
  • 27. Temps de rendu Web Rendering Service (rendu) et délais! File d’attente de rendu Certaines pages ne seront pas rendues tout de suite (voire pas du tout…) 1 2
  • 28. Stratégie de rendu (CSR, SSR, SSG, ISR…)
  • 29. On peut entendre dire que le "Google moderne" travaille parfaitement avec JS https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics?hl=fr
  • 30. Comprenez ces 3 concepts et vous comprendrez tout le reste CSR = Client Side Rendering Qui rend ? Le client (Google, votre navigateur, etc) SSG = Static Site Generation Qui rend ? Votre serveur, pour fournir du HTML statique à tout le monde SSR = Server Side Rendering Qui rend ? Votre serveur, pour une version HTML mise à jour pour tout le monde
  • 31. Par défaut, on parle de CSR Le client demande un fichier HTML au serveur Le serveur renvoie une page HTML vide et les ressources Le client récupère, exécute, rend les ressources L'application est prête à l'emploi C'est-ce que l'on souhaite éviter (en SEO) !
  • 32. Stratégies de rendu fondamentales (1 / 2) Le client demande un fichier HTML au serveur Le serveur renvoie une page HTML qui a été rendue en avance Le client reçoit une page donc le contenu est disponible L'application est prête à l'emploi, après rendu d'éléments dynamiques Bonne solution, mais attention à la scalabilité du site SSG
  • 33. Stratégies de rendu fondamentales (2 / 2) Le client demande un fichier HTML au serveur Le serveur renvoie une page HTML qui vient d'être rendue Le client reçoit une page donc le contenu est disponible L'application est prête à l'emploi, après rendu d'éléments dynamiques Bonne solution, mais attention à la charge serveur SSR
  • 34. La différence majeure ? CSR Le serveur renvoie les ingrédients au client, c'est au client de cuisiner SSG Le serveur renvoie un plat qui a été préparé en avance au client SSR Le serveur renvoie un plat qui vient d'être préparé au client
  • 35. Il y a des avantages et des inconvénients pour chaque... SSG build - Rapidité (webperf) - Crawlabilité - Temps de build - Interactivité (par défaut) SSR hit - Crawlabilité - Pas de temps de build - Interactivité - Charge serveur - TTFB (par défaut)
  • 36. Donc, que choisir ? La réponse simple SSR CSR + = hydration Avec le SSR, l'objectif de l'hydration est d'alléger la charge serveur
  • 37. La réponse "qui dépend" Petite à moyenne volumétrie SSG CSR + = hydration Avec le SSG, l'objectif de l'hydration est d'assurer l'interactivité
  • 38. Profiter du SSG statique sans le désavantage du build time ISR Incremental Static Regeneration Système de cache permettant de mettre à jour chaque page à une fréquence donnée, et non pas à chaque hit.
  • 39. Attention au Dynamic Rendering - Complexités pour la mise en place - Risques d'oublis avec la gestion de l'User-agent - Complexités et risques d'oublis lors de l'audit SEO
  • 40. Exemple d'erreur en Dynamic Rendering Des redirections vues par Googlebot en 404, mais redirigée côté navigateur Source : Sistrix
  • 41. Problème de configuration en SSR Dynamic Rendering avec du contenu incompréhensible, juste pour Google…
  • 42. Le JS peut empêcher Google de surfer correctement Problématiques On-site
  • 43. Pagination : l'URL doit bouger • En JS, la pagination "load more" ou "infinite scroll" est régulièrement utilisée • Cela nécessite de générer des URLs différentes
  • 44. Contenu qui nécessite une action pour être visible dans le code • Google n'indexera jamais un contenu qui nécessite une action pour devenir visible dans le code HTML • Ces actions peuvent être un clic, un scroll ou un hover • Il faut vérifier les menus accordéons, facettes, etc
  • 45. Impact du non pré-rendu sur les images • Migration d'un site non JS vers un site JS • Baisse soudaine du trafic Google Images • La baisse s'est déroulée après la migration, sans pré-rendu des liens images et un mauvais pré-rendu sur les contenus en général
  • 46. Site de e-commerce avec un bloc « Produits similaires » non rendu pour Google ?????
  • 47. Des outils pour le rendu final
  • 48. Savoir ce que Google a indexé ? pas avec la commande « cache: » La commande ne présente que le HTML brut récupéré lors de la première phase d’indexation, sans exécution du JS cache: Préférez l’affichage «Version en texte seul » pour voir texte/liens vus par Google lors de sa première phase d’indexation
  • 49. Comment savoir si Google a indexé le rendu JS? Commande + « extrait de texte entre guillemets » site:URL
  • 50. Comprendre ce que Google est capable de rendre en JS https://search.google.com/test/rich-results
  • 51. Voir la différence entre HTML brut et HTML après rendu JS https://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob
  • 52. Auditer le rendu à l'échelle : Screaming Frog • Visualiser le % de contenu pré-rendu VS non pré-rendu (textuel, liens, etc) • Réaliser un crawl sans l'exécution JS et un crawl avec • Visualiser le code précis pré-rendu VS non pré-rendu
  • 53. Est-ce au SEO de décider de tout?
  • 54. Mieux vaut prévenir que guérir  Point de vue DEV, le JavaScript présente de nombreux avantages  Le SEO n’est qu’une pièce du puzzle  Adaptons nous pour limiter les risques