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

Contenu connexe

Tendances

SEO Camp'us 2022 - Stratégie de contenu : ces erreurs qui sabordent votre ROI.
SEO Camp'us 2022 - Stratégie de contenu : ces erreurs qui sabordent votre ROI.SEO Camp'us 2022 - Stratégie de contenu : ces erreurs qui sabordent votre ROI.
SEO Camp'us 2022 - Stratégie de contenu : ces erreurs qui sabordent votre ROI.
Ecribouille
 
Website Analysis Report
Website Analysis ReportWebsite Analysis Report
Website Analysis Report
AuroIN
 
The Role of E-E-A-T in Ecommerce
The Role of E-E-A-T in EcommerceThe Role of E-E-A-T in Ecommerce
The Role of E-E-A-T in Ecommerce
Lily Ray
 
BrightonSEO April 2023 Similar AI: Automation recipes for SEO success
BrightonSEO April 2023 Similar AI: Automation recipes for SEO successBrightonSEO April 2023 Similar AI: Automation recipes for SEO success
BrightonSEO April 2023 Similar AI: Automation recipes for SEO success
Dylan Fuler
 
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
 
Canonicalization for SEO BrightonSEO April 2023 Patrick Stox
Canonicalization for SEO BrightonSEO April 2023 Patrick StoxCanonicalization for SEO BrightonSEO April 2023 Patrick Stox
Canonicalization for SEO BrightonSEO April 2023 Patrick Stox
Ahrefs
 
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
 
Crawl Budget: Everything you Need to Know
Crawl Budget: Everything you Need to KnowCrawl Budget: Everything you Need to Know
Crawl Budget: Everything you Need to Know
SallyR7
 
Quality Content at Scale Through Automated Text Summarization of UGC
Quality Content at Scale Through Automated Text Summarization of UGCQuality Content at Scale Through Automated Text Summarization of UGC
Quality Content at Scale Through Automated Text Summarization of UGC
Hamlet Batista
 
HELP! I've Been Hit By An Algorithm Update - Jess Maloney - BrightonSEO Apri...
HELP! I've Been Hit By An Algorithm Update - Jess Maloney - BrightonSEO  Apri...HELP! I've Been Hit By An Algorithm Update - Jess Maloney - BrightonSEO  Apri...
HELP! I've Been Hit By An Algorithm Update - Jess Maloney - BrightonSEO Apri...
Jessica Maloney
 
Seo goals & objectives 2 quarter 2012
Seo goals & objectives 2 quarter 2012Seo goals & objectives 2 quarter 2012
Seo goals & objectives 2 quarter 2012
EBY3081
 
Advanced Keyword Research for SEO - Training Deck
Advanced Keyword Research for SEO - Training DeckAdvanced Keyword Research for SEO - Training Deck
Advanced Keyword Research for SEO - Training Deck
Daniel Brooks
 
How to Scale and Grow your Enterprise Technical SEO Strategy
How to Scale and Grow your Enterprise Technical SEO StrategyHow to Scale and Grow your Enterprise Technical SEO Strategy
How to Scale and Grow your Enterprise Technical SEO Strategy
Search Engine Journal
 
eCommerce Internal Linking - Into the Spider-Verse (BrightonSEO edition)
eCommerce Internal Linking - Into the Spider-Verse (BrightonSEO edition)eCommerce Internal Linking - Into the Spider-Verse (BrightonSEO edition)
eCommerce Internal Linking - Into the Spider-Verse (BrightonSEO edition)
Kristina Azarenko
 
The Hidden Gems of Low search volume
The Hidden Gems of Low search volumeThe Hidden Gems of Low search volume
The Hidden Gems of Low search volume
Liraz Postan
 
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptxSEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
Peak Ace
 
SEO Strategy: Where The F**K Do I Even Start? - Brighton SEO April 2022
SEO Strategy: Where The F**K Do I Even Start? - Brighton SEO April 2022 SEO Strategy: Where The F**K Do I Even Start? - Brighton SEO April 2022
SEO Strategy: Where The F**K Do I Even Start? - Brighton SEO April 2022
SophieBrannon
 
The Quickest Win in SEO – How to do Internal Linking the Right Way
The Quickest Win in SEO – How to do Internal Linking the Right WayThe Quickest Win in SEO – How to do Internal Linking the Right Way
The Quickest Win in SEO – How to do Internal Linking the Right Way
Martin Hayman
 
How to convince even the pickiest editors to take SEO more seriously :: brigh...
How to convince even the pickiest editors to take SEO more seriously :: brigh...How to convince even the pickiest editors to take SEO more seriously :: brigh...
How to convince even the pickiest editors to take SEO more seriously :: brigh...
Ian Helms
 
How Does Organic SEO Work?
How Does Organic SEO Work?How Does Organic SEO Work?
How Does Organic SEO Work?
ITS-SEO.com
 

Tendances (20)

SEO Camp'us 2022 - Stratégie de contenu : ces erreurs qui sabordent votre ROI.
SEO Camp'us 2022 - Stratégie de contenu : ces erreurs qui sabordent votre ROI.SEO Camp'us 2022 - Stratégie de contenu : ces erreurs qui sabordent votre ROI.
SEO Camp'us 2022 - Stratégie de contenu : ces erreurs qui sabordent votre ROI.
 
Website Analysis Report
Website Analysis ReportWebsite Analysis Report
Website Analysis Report
 
The Role of E-E-A-T in Ecommerce
The Role of E-E-A-T in EcommerceThe Role of E-E-A-T in Ecommerce
The Role of E-E-A-T in Ecommerce
 
BrightonSEO April 2023 Similar AI: Automation recipes for SEO success
BrightonSEO April 2023 Similar AI: Automation recipes for SEO successBrightonSEO April 2023 Similar AI: Automation recipes for SEO success
BrightonSEO April 2023 Similar AI: Automation recipes for SEO success
 
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
 
Canonicalization for SEO BrightonSEO April 2023 Patrick Stox
Canonicalization for SEO BrightonSEO April 2023 Patrick StoxCanonicalization for SEO BrightonSEO April 2023 Patrick Stox
Canonicalization for SEO BrightonSEO April 2023 Patrick Stox
 
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
 
Crawl Budget: Everything you Need to Know
Crawl Budget: Everything you Need to KnowCrawl Budget: Everything you Need to Know
Crawl Budget: Everything you Need to Know
 
Quality Content at Scale Through Automated Text Summarization of UGC
Quality Content at Scale Through Automated Text Summarization of UGCQuality Content at Scale Through Automated Text Summarization of UGC
Quality Content at Scale Through Automated Text Summarization of UGC
 
HELP! I've Been Hit By An Algorithm Update - Jess Maloney - BrightonSEO Apri...
HELP! I've Been Hit By An Algorithm Update - Jess Maloney - BrightonSEO  Apri...HELP! I've Been Hit By An Algorithm Update - Jess Maloney - BrightonSEO  Apri...
HELP! I've Been Hit By An Algorithm Update - Jess Maloney - BrightonSEO Apri...
 
Seo goals & objectives 2 quarter 2012
Seo goals & objectives 2 quarter 2012Seo goals & objectives 2 quarter 2012
Seo goals & objectives 2 quarter 2012
 
Advanced Keyword Research for SEO - Training Deck
Advanced Keyword Research for SEO - Training DeckAdvanced Keyword Research for SEO - Training Deck
Advanced Keyword Research for SEO - Training Deck
 
How to Scale and Grow your Enterprise Technical SEO Strategy
How to Scale and Grow your Enterprise Technical SEO StrategyHow to Scale and Grow your Enterprise Technical SEO Strategy
How to Scale and Grow your Enterprise Technical SEO Strategy
 
eCommerce Internal Linking - Into the Spider-Verse (BrightonSEO edition)
eCommerce Internal Linking - Into the Spider-Verse (BrightonSEO edition)eCommerce Internal Linking - Into the Spider-Verse (BrightonSEO edition)
eCommerce Internal Linking - Into the Spider-Verse (BrightonSEO edition)
 
The Hidden Gems of Low search volume
The Hidden Gems of Low search volumeThe Hidden Gems of Low search volume
The Hidden Gems of Low search volume
 
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptxSEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
 
SEO Strategy: Where The F**K Do I Even Start? - Brighton SEO April 2022
SEO Strategy: Where The F**K Do I Even Start? - Brighton SEO April 2022 SEO Strategy: Where The F**K Do I Even Start? - Brighton SEO April 2022
SEO Strategy: Where The F**K Do I Even Start? - Brighton SEO April 2022
 
The Quickest Win in SEO – How to do Internal Linking the Right Way
The Quickest Win in SEO – How to do Internal Linking the Right WayThe Quickest Win in SEO – How to do Internal Linking the Right Way
The Quickest Win in SEO – How to do Internal Linking the Right Way
 
How to convince even the pickiest editors to take SEO more seriously :: brigh...
How to convince even the pickiest editors to take SEO more seriously :: brigh...How to convince even the pickiest editors to take SEO more seriously :: brigh...
How to convince even the pickiest editors to take SEO more seriously :: brigh...
 
How Does Organic SEO Work?
How Does Organic SEO Work?How Does Organic SEO Work?
How Does Organic SEO Work?
 

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

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
 
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
 
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
SEO CAMP
 
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Peak Ace
 
Comment transformer la performance web en croissance et conversion utilisateur
Comment transformer la performance web en croissance et conversion utilisateurComment transformer la performance web en croissance et conversion utilisateur
Comment transformer la performance web en croissance et conversion utilisateur
Alexandre Thuriot
 
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir..."Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...
Boris SCHAPIRA
 
Seocamp Bayonne - JS et SEO
Seocamp  Bayonne - JS et SEOSeocamp  Bayonne - JS et SEO
Seocamp Bayonne - JS et SEO
Erlé Alberton
 
Performance Web : vers la speed update, un pas après l'autre
Performance Web : vers la speed update, un pas après l'autrePerformance Web : vers la speed update, un pas après l'autre
Performance Web : vers la speed update, un pas après l'autre
SEO Camp Association
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Peak Ace
 
L'impact des Core Web Vitals sur le SEO - We love speed 2021 - Palais de la b...
L'impact des Core Web Vitals sur le SEO - We love speed 2021 - Palais de la b...L'impact des Core Web Vitals sur le SEO - We love speed 2021 - Palais de la b...
L'impact des Core Web Vitals sur le SEO - We love speed 2021 - Palais de la b...
Nicolas AUDEMAR
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Peak Ace
 
Web Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesWeb Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibes
iProspect France
 
Webperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesWebperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibes
Madeline Pinthon
 
Les chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - Lille
Les chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - LilleLes chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - Lille
Les chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - Lille
Peak Ace
 
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
 
Philippe Yonnet - Les nouvelles règles pour être indexé par Google
Philippe Yonnet - Les nouvelles règles pour être indexé par GooglePhilippe Yonnet - Les nouvelles règles pour être indexé par Google
Philippe Yonnet - Les nouvelles règles pour être indexé par Google
SEO CAMP
 
Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App
RESONEO
 
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
 
Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018
Aymen Loukil
 
Google : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JSGoogle : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JS
Peak Ace
 

Similaire à Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022 (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...
 
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
 
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
Core Web Vitals, quel impact et comment s'y attaquer ? - Samson Tat - SEO CAM...
 
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
 
Comment transformer la performance web en croissance et conversion utilisateur
Comment transformer la performance web en croissance et conversion utilisateurComment transformer la performance web en croissance et conversion utilisateur
Comment transformer la performance web en croissance et conversion utilisateur
 
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir..."Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...
"Performance Web : vers la Speed Update, un pas après l’autre", Boris Schapir...
 
Seocamp Bayonne - JS et SEO
Seocamp  Bayonne - JS et SEOSeocamp  Bayonne - JS et SEO
Seocamp Bayonne - JS et SEO
 
Performance Web : vers la speed update, un pas après l'autre
Performance Web : vers la speed update, un pas après l'autrePerformance Web : vers la speed update, un pas après l'autre
Performance Web : vers la speed update, un pas après l'autre
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 
L'impact des Core Web Vitals sur le SEO - We love speed 2021 - Palais de la b...
L'impact des Core Web Vitals sur le SEO - We love speed 2021 - Palais de la b...L'impact des Core Web Vitals sur le SEO - We love speed 2021 - Palais de la b...
L'impact des Core Web Vitals sur le SEO - We love speed 2021 - Palais de la b...
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 
Web Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibesWeb Perf : par où commencer ? #SEOGoodVibes
Web Perf : par où commencer ? #SEOGoodVibes
 
Webperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesWebperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibes
 
Les chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - Lille
Les chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - LilleLes chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - Lille
Les chantiers indispensables à ajouter à votre Roadmap 2018 - 22 février - Lille
 
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
 
Philippe Yonnet - Les nouvelles règles pour être indexé par Google
Philippe Yonnet - Les nouvelles règles pour être indexé par GooglePhilippe Yonnet - Les nouvelles règles pour être indexé par Google
Philippe Yonnet - Les nouvelles règles pour être indexé par Google
 
Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App
 
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 ?
 
Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018
 
Google : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JSGoogle : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JS
 

Plus de Adrien Russo

Le SEO JavaScript démystifié
Le SEO JavaScript démystifiéLe SEO JavaScript démystifié
Le SEO JavaScript démystifié
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 (8)

Le SEO JavaScript démystifié
Le SEO JavaScript démystifiéLe SEO JavaScript démystifié
Le SEO JavaScript démystifié
 
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 ...
 

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

  • 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
  • 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
  • 41. Question Mug Paris 2022 #SEOCAMPus Que signifie SSG ? 41
  • 42. MERCI AUX SPONSORS Paris 2022 #SEOCAMPus 42