SlideShare une entreprise Scribd logo
1  sur  35
SEO & Javascript en 2021:
Challenger les acquis
Paris 2021 #seocamp
Cycle Tech SEO
€15M
80
experts chiffre d’affaires
SEO / SEA / SOCIAL / DATA
Alexandre Pinat
Team Leader SEO
Paris 2021 #seocamp
Cycle Tech SEO
introduction
Paris 2021 #seocamp
Cycle Tech SEO
2009 : l’arrivée des Frameworks JS
JavaScript :
> une “surcouche” pour
le visuel et le tracking
> un outil SEO de
manipulation du maillage
2009
JavaScript :
> utilisation massive des Frameworks et SPA (Single Page Application)
React Angular Vue Ember Svelte Next
Paris 2021 #seocamp
Cycle Tech SEO
2014 : Google interprète et indexe le JS
2014
“Today, we'll talk about our
capability to render richer
websites — meaning we see
your content more like modern
Web browsers, include the
external resources, execute
JavaScript and apply CSS.”
En réalité, les choses sont plus compliquées...
PHASE 1
CRAWL
PHASE 3
RENDER
PHASE 2
INDEX
Sans la phase 3, Google ne peut pas découvrir le
contenu d’un site full JS.
Problème : la phase 3 n’est pas systématique.
Elle dépend des ressources disponibles.
Paris 2021 #seocamp
Cycle Tech SEO
Crawl et indexation immédiats des éléments
HTML, à chaque passage de Google sur le site
La différence entre HTML et JS pour Google
HTML
site web
Découverte et interprétation des éléments JS
non systématique, et donc non garantie à
chaque passage de Google
JS
Paris 2021 #seocamp
Cycle Tech SEO
Le JavaScript fait toujours peur aux SEO
=
JavaScript
Problèmes de crawl et d’indexation
Problèmes de temps de chargement
Baisses de position
Paris 2021 #seocamp
Cycle Tech SEO
Mais le JS est très avantageux
Pour un annonceur, développer un site en JS offre
beaucoup d’avantages :
> Expérience plus fluide avec peu de rechargement de page pour l’utilisateur
> Mise en place de site et fonctionnalités plus riches
> Déploiement et maintenance accélérés coté dev
Paris 2021 #seocamp
Cycle Tech SEO
La question n’est donc pas
si mais comment
déployer un site en JS
sans risque SEO ?
Paris 2021 #seocamp
Cycle Tech SEO
ENJEU #1
crawlabilité
Paris 2021 #seocamp
Cycle Tech SEO
Fournir une version HTML du site à Google
HTML
JS
User
site web
HTML
site web
Paris 2021 #seocamp
Cycle Tech SEO
Client Side Rendering
Framework JS
Version HTML
Utilisateur Framework JS
Version HTML
sans rendering
Googlebot
requête la page requête la page
+ Javascript
SEO
Pas SEO Friendly car Google n’effectue pas
systématiquement la phase de rendering
Paris 2021 #seocamp
Cycle Tech SEO
Comment passer du JS au HTML ?
VERSION
HTML DU SITE
SERVEUR
WEB
2. Static Site Generation (SSG) - Prerendering
3. Incremental Static Regeneration (ISR)
1. Server Side Rendering (SSR)
Paris 2021 #seocamp
Cycle Tech SEO
1. Server Side Rendering
Framework JS
Utilisateur
Version HTML +
Javascript
Framework JS
Googlebot
Pour chaque requête, la page est construite à la demande du côté du serveur par le Framework JS
Version HTML complète
SEO
Temps de réponse plus longs et
performances dégradées
requête la page requête la page
SEO
Le contenu fourni à Google est
toujours “frais”, à jour
Paris 2021 #seocamp
Cycle Tech SEO
2. Static Site Generation
Framework JS
Le framework JS (ou un service de prerendering) construit une version statique de toutes les pages du site
SEO
La fraîcheur des contenus fournis à Google
est dépendante de la fréquence de build
Build
des pages HTML
construit
le build Utilisateur
requête la page
Googlebot
requête la page
SEO
Chargement rapide car les pages sont
rendues côté serveur et mises en cache
Paris 2021 #seocamp
Cycle Tech SEO
L’enjeu du SSG : le temps de Build
PAGES
BUILD TIME
Plus le nombre de
pages à générer est
important, plus le
temps de build
augmente.
Paris 2021 #seocamp
Cycle Tech SEO
Comment donner à Google un contenu HTML à jour
sur des dizaines de milliers de pages avec du SSG ?
+
Se positionner en SEO sur des requêtes locales
coiffeur paris
épilation marseille
massage lyon
Case Study : Kiute x
Paris 2021 #seocamp
Cycle Tech SEO
Case Study : Kiute x
50% du potentiel couvert 75% du potentiel couvert 90% du potentiel couvert 100% du potentiel couvert
Part
du
potentiel
de
CA
Nb de pages sur le site
Potentiel de CA SEO
Build < 10min Build 1j Build 2j Build 7j
Paris 2021 #seocamp
Cycle Tech SEO
3. Incremental Static Regeneration (ISR)
Le framework JS met à jour la version statique à chaque fois qu’une page est requêtée
re-génération
Pages HTML pré-
générées à jour
requête la page
renvoie la page
requête la page
renvoie la page
Framework JS
Utilisateur Googlebot
OU
Utilisateur Googlebot
OU
SEO
Contenus toujours à jour sur des pages
chargées rapidement (car mises en cache)
Pages HTML pré-
générées
Build
Paris 2021 #seocamp
Cycle Tech SEO
CSR
Client Side Rendering
SSR
Server Side Rendering
SSG
Static Site Generation
ISR
Incremental Static Regeneration
Fonctionnement
Pour chaque requête, la page est
construite du côté du navigateur
(client)
Pour chaque requête, la page est
construite à la demande du côté
du serveur par le Framework JS
Le framework JS (ou un service
de prerendering) construit une
version statique de toutes les
pages du site
Le framework JS met à jour la
version statique à chaque fois
qu’une page est requêtée
Avantages SEO x
Le contenu fourni à Google est
toujours “frais”, à jour
Chargement rapide car les pages
sont rendues côté serveur et
mises en cache
Contenus toujours à jour sur des
pages chargées rapidement (car
mises en cache)
Inconvénients SEO
Pas SEO Friendly car Google
n’effectue systématiquement la
phase de rendering
Temps de réponse plus longs et
performances dégradées
La fraîcheur des contenus fournis
à Google est dépendante de la
fréquence de build
x
Frameworks disponible Tous les frameworks
Tous les frameworks
sauf Angular 1 et React
Tous les frameworks avec
Prerender.io ou Pupeteer,
Gatsby et Nuxt nativement
Next.js
Framework JS et SEO : quelle option choisir ?
Paris 2021 #seocamp
Cycle Tech SEO
Recetter l'implémentation SEO
Comment s’assurer que les versions HTML fournies à Google soient optimisées pour le
SEO et similaires à celles présentées aux utilisateurs ?
La Search Console de Google Les crawlers
Paris 2021 #seocamp
Cycle Tech SEO
ENJEU #2
performances
Paris 2021 #seocamp
Cycle Tech SEO
Le temps de chargement global d’une page se décompose
en deux grandes étapes qui ont des impacts distincts.
Rappel : les étapes du chargement
temps de réponse
du serveur
Impact crawlabilité
temps d’éxecution de la page
par le navigateur
Impact utilisateur (core web vitals)
Impact SEO
Paris 2021 #seocamp
Cycle Tech SEO
Les ressources inutilisées en JS
Les sites JS présentent souvent le même problème de performance :
des ressources inutilisées sont chargées sur les pages
Google PageSpeed Insights
Paris 2021 #seocamp
Cycle Tech SEO
Un bundle JS c’est quoi ?
script1.js
script2.js
Home
Page
script3.js
script4.js
Product
Page
jquery.js
hotjar.js
ga.js
Libs
Bundle.js
Module
Bundler
Paris 2021 #seocamp
Cycle Tech SEO
Optimiser la taille du bundle JS
La taille et l’optimisation du
bundle JS sont les éléments qui
ont le plus d’impact sur les
temps de chargement d’une
SPA.
Google Lighthouse
Ce bundle doit être le
plus léger possible !
Paris 2021 #seocamp
Cycle Tech SEO
Tree Shaking
Supprimer toutes les ressources inutilisées
js1.js
js2.js
js3.js
js4.js
Bundle
js8.js
js6.js
js7.js
js5.js
js4.js
js5.js
js6.js
- Avant optimisation : ~3Mo
- Après optimisation : ~750Ko
Paris 2021 #seocamp
Cycle Tech SEO
Code Splitting
Charger uniquement les ressources utiles
- toutes les ressources sont chargées
Une seule requête Une requête par module
+ Seules les ressources utiles sont chargées
Paris 2021 #seocamp
Cycle Tech SEO
Contrôler les performances SEO
Google Lighthouse Google PageSpeed Insights
Paris 2021 #seocamp
Cycle Tech SEO
conclusion
Paris 2021 #seocamp
Cycle Tech SEO
En résumé, un site JS SEO compliant c’est...
Des pages générées en
HTML pour Google
Avec la solution technique la plus
adaptée au framework JS utilisé et
aux spécificités de votre site
(volumétrie de page, fraîcheur du
contenu, priorités SEO,...)
Des performances
optimisées
En réduisant le poids des
différents bundle JS et en évitant
de charger sur chaque gabarit de
page des ressources qui ne
seront pas utilisées
Paris 2021 #seocamp
Cycle Tech SEO
JavaScript & SEO : rien d’impossible
x x x
x x x
Paris 2021 #seocamp
Cycle Tech SEO
une bonne communication entre les équipes
Les conditions d’une réussite
Le JavaScript en SEO, ce n’est pas compliqué si on est bien accompagné.
Une équipe
dev expérimentée
Une maîtrise des
sujets SEO et JS
Question Mug
Paris 2021 #seocamp
Cycle Tech SEO
Quel framework
Javascript supporte
actuellement l’ISR ?
MERCI AUX SPONSORS
Paris 2021 #seocamp
Cycle Tech SEO

Contenu connexe

Tendances

Core Web Vitals: Google New Ranking Factor
Core Web Vitals: Google New Ranking FactorCore Web Vitals: Google New Ranking Factor
Core Web Vitals: Google New Ranking FactorEneblurConsultingweb
 
SEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptx
SEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptxSEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptx
SEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptxPeak Ace
 
Core web Vitals: Web Performance and Usability
Core web Vitals: Web Performance and UsabilityCore web Vitals: Web Performance and Usability
Core web Vitals: Web Performance and UsabilityIngo Steinke
 
How to Prepare Your Brand for Upcoming AI Features in Search
How to Prepare Your Brand for Upcoming AI Features in SearchHow to Prepare Your Brand for Upcoming AI Features in Search
How to Prepare Your Brand for Upcoming AI Features in SearchLily Ray
 
International SEO: How to Grow your Online Business Abroad #WAQ19
International SEO: How to Grow your Online Business Abroad #WAQ19 International SEO: How to Grow your Online Business Abroad #WAQ19
International SEO: How to Grow your Online Business Abroad #WAQ19 Aleyda Solís
 
SEO Proposal Presentation
SEO Proposal PresentationSEO Proposal Presentation
SEO Proposal PresentationColton Miller
 
Plus de secrets sur le maillage interne E-commerce - Frédérik BOBET - SEO CAM...
Plus de secrets sur le maillage interne E-commerce - Frédérik BOBET - SEO CAM...Plus de secrets sur le maillage interne E-commerce - Frédérik BOBET - SEO CAM...
Plus de secrets sur le maillage interne E-commerce - Frédérik BOBET - SEO CAM...SEO CAMP
 
SWEET - Digital Marketing Agency - Brochure
SWEET - Digital Marketing Agency - BrochureSWEET - Digital Marketing Agency - Brochure
SWEET - Digital Marketing Agency - BrochureSWEET Interactive
 
Presentation social media marketing for Real Estate
Presentation   social media marketing for Real Estate Presentation   social media marketing for Real Estate
Presentation social media marketing for Real Estate Er Sandeep Pandey
 
Comment on a ranké en répondant à l'intention de recherche réelle de l'intern...
Comment on a ranké en répondant à l'intention de recherche réelle de l'intern...Comment on a ranké en répondant à l'intention de recherche réelle de l'intern...
Comment on a ranké en répondant à l'intention de recherche réelle de l'intern...Dan Bernier
 
Website Analysis Report
Website Analysis ReportWebsite Analysis Report
Website Analysis ReportAuroIN
 
SEO Process - Search Engine Optimization Roadmap Requirement Analysis and Sel...
SEO Process - Search Engine Optimization Roadmap Requirement Analysis and Sel...SEO Process - Search Engine Optimization Roadmap Requirement Analysis and Sel...
SEO Process - Search Engine Optimization Roadmap Requirement Analysis and Sel...Sonu Pandey
 
Digital Marketing Plan For Real Estate
Digital Marketing Plan For Real EstateDigital Marketing Plan For Real Estate
Digital Marketing Plan For Real EstateAjinkya Honrao
 
101 Link Building Ideas for Off-Page SEO
101 Link Building Ideas for Off-Page SEO101 Link Building Ideas for Off-Page SEO
101 Link Building Ideas for Off-Page SEOHarietteKristineBota
 
Complete Digital Marketing Proposal Format (1).pdf
Complete Digital Marketing Proposal Format (1).pdfComplete Digital Marketing Proposal Format (1).pdf
Complete Digital Marketing Proposal Format (1).pdfKen Khan
 
Linkedin Lead Generation Form - Best Practices - Jun 2020
Linkedin Lead Generation Form - Best Practices - Jun 2020Linkedin Lead Generation Form - Best Practices - Jun 2020
Linkedin Lead Generation Form - Best Practices - Jun 2020Shaun Lee Wei Rong
 

Tendances (20)

Core Web Vitals: Google New Ranking Factor
Core Web Vitals: Google New Ranking FactorCore Web Vitals: Google New Ranking Factor
Core Web Vitals: Google New Ranking Factor
 
SEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptx
SEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptxSEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptx
SEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptx
 
Growth Hacking
Growth HackingGrowth Hacking
Growth Hacking
 
Core web Vitals: Web Performance and Usability
Core web Vitals: Web Performance and UsabilityCore web Vitals: Web Performance and Usability
Core web Vitals: Web Performance and Usability
 
How to Prepare Your Brand for Upcoming AI Features in Search
How to Prepare Your Brand for Upcoming AI Features in SearchHow to Prepare Your Brand for Upcoming AI Features in Search
How to Prepare Your Brand for Upcoming AI Features in Search
 
International SEO: How to Grow your Online Business Abroad #WAQ19
International SEO: How to Grow your Online Business Abroad #WAQ19 International SEO: How to Grow your Online Business Abroad #WAQ19
International SEO: How to Grow your Online Business Abroad #WAQ19
 
SEO Proposal Presentation
SEO Proposal PresentationSEO Proposal Presentation
SEO Proposal Presentation
 
Plus de secrets sur le maillage interne E-commerce - Frédérik BOBET - SEO CAM...
Plus de secrets sur le maillage interne E-commerce - Frédérik BOBET - SEO CAM...Plus de secrets sur le maillage interne E-commerce - Frédérik BOBET - SEO CAM...
Plus de secrets sur le maillage interne E-commerce - Frédérik BOBET - SEO CAM...
 
SWEET - Digital Marketing Agency - Brochure
SWEET - Digital Marketing Agency - BrochureSWEET - Digital Marketing Agency - Brochure
SWEET - Digital Marketing Agency - Brochure
 
Presentation social media marketing for Real Estate
Presentation   social media marketing for Real Estate Presentation   social media marketing for Real Estate
Presentation social media marketing for Real Estate
 
Comment on a ranké en répondant à l'intention de recherche réelle de l'intern...
Comment on a ranké en répondant à l'intention de recherche réelle de l'intern...Comment on a ranké en répondant à l'intention de recherche réelle de l'intern...
Comment on a ranké en répondant à l'intention de recherche réelle de l'intern...
 
Website Analysis Report
Website Analysis ReportWebsite Analysis Report
Website Analysis Report
 
SEO Process - Search Engine Optimization Roadmap Requirement Analysis and Sel...
SEO Process - Search Engine Optimization Roadmap Requirement Analysis and Sel...SEO Process - Search Engine Optimization Roadmap Requirement Analysis and Sel...
SEO Process - Search Engine Optimization Roadmap Requirement Analysis and Sel...
 
Digital Marketing Plan For Real Estate
Digital Marketing Plan For Real EstateDigital Marketing Plan For Real Estate
Digital Marketing Plan For Real Estate
 
Roadmap to Development
Roadmap to DevelopmentRoadmap to Development
Roadmap to Development
 
Real Estate
Real EstateReal Estate
Real Estate
 
101 Link Building Ideas for Off-Page SEO
101 Link Building Ideas for Off-Page SEO101 Link Building Ideas for Off-Page SEO
101 Link Building Ideas for Off-Page SEO
 
Complete Digital Marketing Proposal Format (1).pdf
Complete Digital Marketing Proposal Format (1).pdfComplete Digital Marketing Proposal Format (1).pdf
Complete Digital Marketing Proposal Format (1).pdf
 
Linkedin Lead Generation Form - Best Practices - Jun 2020
Linkedin Lead Generation Form - Best Practices - Jun 2020Linkedin Lead Generation Form - Best Practices - Jun 2020
Linkedin Lead Generation Form - Best Practices - Jun 2020
 
SEO Proposal eMarket Agency
SEO Proposal eMarket AgencySEO Proposal eMarket Agency
SEO Proposal eMarket Agency
 

Similaire à SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP'us Paris 2021

Seocamp Bayonne - JS et SEO
Seocamp  Bayonne - JS et SEOSeocamp  Bayonne - JS et SEO
Seocamp Bayonne - JS et SEOErlé Alberton
 
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
 
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 2017Peak 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
 
Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Brigitte Marandon
 
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...SEO CAMP
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostDamien Jubeau
 
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
 
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...RESONEO
 
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 utilisateurAlexandre Thuriot
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesOxalide
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceLudovic Piot
 
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
 
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3 ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3 Horacio Gonzalez
 
SEO CAMP Day Lille 2019 : Lazy Loading : "Sois fainéant, sois fainéant, tu vi...
SEO CAMP Day Lille 2019 : Lazy Loading : "Sois fainéant, sois fainéant, tu vi...SEO CAMP Day Lille 2019 : Lazy Loading : "Sois fainéant, sois fainéant, tu vi...
SEO CAMP Day Lille 2019 : Lazy Loading : "Sois fainéant, sois fainéant, tu vi...Bastien Montois
 
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 GoogleSEO CAMP
 
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 - LillePeak 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 2017Peak Ace
 
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
 

Similaire à SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP'us Paris 2021 (20)

Seocamp Bayonne - JS et SEO
Seocamp  Bayonne - JS et SEOSeocamp  Bayonne - JS et SEO
Seocamp Bayonne - JS et SEO
 
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...
 
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
 
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...
 
Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23
 
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
 
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...
 
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
SEO campus 2019 | Les clés d’un site web (beaucoup) plus rapide selon des fac...
 
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
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
 
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 ?
 
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3 ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
 
SEO CAMP Day Lille 2019 : Lazy Loading : "Sois fainéant, sois fainéant, tu vi...
SEO CAMP Day Lille 2019 : Lazy Loading : "Sois fainéant, sois fainéant, tu vi...SEO CAMP Day Lille 2019 : Lazy Loading : "Sois fainéant, sois fainéant, tu vi...
SEO CAMP Day Lille 2019 : Lazy Loading : "Sois fainéant, sois fainéant, tu vi...
 
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
 
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
 
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...
 

Plus de SEO CAMP

20 tips pour faire ranker ton site e-commerce en 2022 - Jean-Louis Humblet - ...
20 tips pour faire ranker ton site e-commerce en 2022 - Jean-Louis Humblet - ...20 tips pour faire ranker ton site e-commerce en 2022 - Jean-Louis Humblet - ...
20 tips pour faire ranker ton site e-commerce en 2022 - Jean-Louis Humblet - ...SEO CAMP
 
Et si le SEO pouvait sauver le monde ? - Syphaiwong Bay - SEO CAMP Day Lorrai...
Et si le SEO pouvait sauver le monde ? - Syphaiwong Bay - SEO CAMP Day Lorrai...Et si le SEO pouvait sauver le monde ? - Syphaiwong Bay - SEO CAMP Day Lorrai...
Et si le SEO pouvait sauver le monde ? - Syphaiwong Bay - SEO CAMP Day Lorrai...SEO CAMP
 
Après (Ro)BERT, google fait appel à Mum - Nicolas Audemar - SEO CAMP'us Paris...
Après (Ro)BERT, google fait appel à Mum - Nicolas Audemar - SEO CAMP'us Paris...Après (Ro)BERT, google fait appel à Mum - Nicolas Audemar - SEO CAMP'us Paris...
Après (Ro)BERT, google fait appel à Mum - Nicolas Audemar - SEO CAMP'us Paris...SEO CAMP
 
Quels enjeux pour l'analytics en 2022 et au delà ? - Aristide Riou & Vincent ...
Quels enjeux pour l'analytics en 2022 et au delà ? - Aristide Riou & Vincent ...Quels enjeux pour l'analytics en 2022 et au delà ? - Aristide Riou & Vincent ...
Quels enjeux pour l'analytics en 2022 et au delà ? - Aristide Riou & Vincent ...SEO CAMP
 
IA et GPT-3 : une révolution pour le SEO ? - Nguyen Nicolas - SEO CAMP'us Par...
IA et GPT-3 : une révolution pour le SEO ? - Nguyen Nicolas - SEO CAMP'us Par...IA et GPT-3 : une révolution pour le SEO ? - Nguyen Nicolas - SEO CAMP'us Par...
IA et GPT-3 : une révolution pour le SEO ? - Nguyen Nicolas - SEO CAMP'us Par...SEO CAMP
 
Cas pratique d'un accompagnement stratégique - Stéphane Jambu - SEO CAMP'us P...
Cas pratique d'un accompagnement stratégique - Stéphane Jambu - SEO CAMP'us P...Cas pratique d'un accompagnement stratégique - Stéphane Jambu - SEO CAMP'us P...
Cas pratique d'un accompagnement stratégique - Stéphane Jambu - SEO CAMP'us P...SEO CAMP
 
Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...
Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...
Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...SEO CAMP
 
Vis ma vie de SEO à l'international - Patrice Laroche - SEO CAMP'us Paris 2021
Vis ma vie de SEO à l'international - Patrice Laroche - SEO CAMP'us Paris 2021Vis ma vie de SEO à l'international - Patrice Laroche - SEO CAMP'us Paris 2021
Vis ma vie de SEO à l'international - Patrice Laroche - SEO CAMP'us Paris 2021SEO CAMP
 
Netlinking Persona, pour construire ses propres influenceurs - Nicolas Mercad...
Netlinking Persona, pour construire ses propres influenceurs - Nicolas Mercad...Netlinking Persona, pour construire ses propres influenceurs - Nicolas Mercad...
Netlinking Persona, pour construire ses propres influenceurs - Nicolas Mercad...SEO CAMP
 
Faut il vraiment tricher pour ranker ? - Elliott Glenn Bobiet - SEO CAMP'us P...
Faut il vraiment tricher pour ranker ? - Elliott Glenn Bobiet - SEO CAMP'us P...Faut il vraiment tricher pour ranker ? - Elliott Glenn Bobiet - SEO CAMP'us P...
Faut il vraiment tricher pour ranker ? - Elliott Glenn Bobiet - SEO CAMP'us P...SEO CAMP
 
La vie cachée des positions - Jason Miller - SEO CAMP'us Paris 2021
La vie cachée des positions - Jason Miller - SEO CAMP'us Paris 2021 La vie cachée des positions - Jason Miller - SEO CAMP'us Paris 2021
La vie cachée des positions - Jason Miller - SEO CAMP'us Paris 2021 SEO CAMP
 
Cannibalisation, contenu dupliqué et near duplicate : le cancer du SEO - Anne...
Cannibalisation, contenu dupliqué et near duplicate : le cancer du SEO - Anne...Cannibalisation, contenu dupliqué et near duplicate : le cancer du SEO - Anne...
Cannibalisation, contenu dupliqué et near duplicate : le cancer du SEO - Anne...SEO CAMP
 
Migrer sur Shopify : Fausse bonne idée ? - Mathieu Chapon - SEO CAMP'us Paris...
Migrer sur Shopify : Fausse bonne idée ? - Mathieu Chapon - SEO CAMP'us Paris...Migrer sur Shopify : Fausse bonne idée ? - Mathieu Chapon - SEO CAMP'us Paris...
Migrer sur Shopify : Fausse bonne idée ? - Mathieu Chapon - SEO CAMP'us Paris...SEO CAMP
 
Quel potentiel et canaux pour la vente d'actifs immatériels - Kevin Jourdan &...
Quel potentiel et canaux pour la vente d'actifs immatériels - Kevin Jourdan &...Quel potentiel et canaux pour la vente d'actifs immatériels - Kevin Jourdan &...
Quel potentiel et canaux pour la vente d'actifs immatériels - Kevin Jourdan &...SEO CAMP
 
4 mois pour ranker sur une thématique ultra concurrentielle - Julien Jimenez ...
4 mois pour ranker sur une thématique ultra concurrentielle - Julien Jimenez ...4 mois pour ranker sur une thématique ultra concurrentielle - Julien Jimenez ...
4 mois pour ranker sur une thématique ultra concurrentielle - Julien Jimenez ...SEO CAMP
 
Comment on a ranké en répondant à l'intention de recherche réelle de l'iterna...
Comment on a ranké en répondant à l'intention de recherche réelle de l'iterna...Comment on a ranké en répondant à l'intention de recherche réelle de l'iterna...
Comment on a ranké en répondant à l'intention de recherche réelle de l'iterna...SEO CAMP
 
Don't Trust Google - Joran LAMISSE - SEO CAMP'us Paris 2021
Don't Trust Google - Joran LAMISSE - SEO CAMP'us Paris 2021Don't Trust Google - Joran LAMISSE - SEO CAMP'us Paris 2021
Don't Trust Google - Joran LAMISSE - SEO CAMP'us Paris 2021SEO CAMP
 
De l'audit à la mise en place des préconisations, pourquoi ça coince ? - Dan...
De l'audit à la mise en place des  préconisations, pourquoi ça coince ? - Dan...De l'audit à la mise en place des  préconisations, pourquoi ça coince ? - Dan...
De l'audit à la mise en place des préconisations, pourquoi ça coince ? - Dan...SEO CAMP
 
tests, investigations et études SEO - Alexis Rylko - SEO CAMP'us Paris 2021
tests, investigations et études SEO - Alexis Rylko - SEO CAMP'us Paris 2021tests, investigations et études SEO - Alexis Rylko - SEO CAMP'us Paris 2021
tests, investigations et études SEO - Alexis Rylko - SEO CAMP'us Paris 2021SEO CAMP
 
Industrialisation des PBN - François Tréca - SEO CAMP'us Paris 2021
Industrialisation des PBN - François Tréca - SEO CAMP'us Paris 2021 Industrialisation des PBN - François Tréca - SEO CAMP'us Paris 2021
Industrialisation des PBN - François Tréca - SEO CAMP'us Paris 2021 SEO CAMP
 

Plus de SEO CAMP (20)

20 tips pour faire ranker ton site e-commerce en 2022 - Jean-Louis Humblet - ...
20 tips pour faire ranker ton site e-commerce en 2022 - Jean-Louis Humblet - ...20 tips pour faire ranker ton site e-commerce en 2022 - Jean-Louis Humblet - ...
20 tips pour faire ranker ton site e-commerce en 2022 - Jean-Louis Humblet - ...
 
Et si le SEO pouvait sauver le monde ? - Syphaiwong Bay - SEO CAMP Day Lorrai...
Et si le SEO pouvait sauver le monde ? - Syphaiwong Bay - SEO CAMP Day Lorrai...Et si le SEO pouvait sauver le monde ? - Syphaiwong Bay - SEO CAMP Day Lorrai...
Et si le SEO pouvait sauver le monde ? - Syphaiwong Bay - SEO CAMP Day Lorrai...
 
Après (Ro)BERT, google fait appel à Mum - Nicolas Audemar - SEO CAMP'us Paris...
Après (Ro)BERT, google fait appel à Mum - Nicolas Audemar - SEO CAMP'us Paris...Après (Ro)BERT, google fait appel à Mum - Nicolas Audemar - SEO CAMP'us Paris...
Après (Ro)BERT, google fait appel à Mum - Nicolas Audemar - SEO CAMP'us Paris...
 
Quels enjeux pour l'analytics en 2022 et au delà ? - Aristide Riou & Vincent ...
Quels enjeux pour l'analytics en 2022 et au delà ? - Aristide Riou & Vincent ...Quels enjeux pour l'analytics en 2022 et au delà ? - Aristide Riou & Vincent ...
Quels enjeux pour l'analytics en 2022 et au delà ? - Aristide Riou & Vincent ...
 
IA et GPT-3 : une révolution pour le SEO ? - Nguyen Nicolas - SEO CAMP'us Par...
IA et GPT-3 : une révolution pour le SEO ? - Nguyen Nicolas - SEO CAMP'us Par...IA et GPT-3 : une révolution pour le SEO ? - Nguyen Nicolas - SEO CAMP'us Par...
IA et GPT-3 : une révolution pour le SEO ? - Nguyen Nicolas - SEO CAMP'us Par...
 
Cas pratique d'un accompagnement stratégique - Stéphane Jambu - SEO CAMP'us P...
Cas pratique d'un accompagnement stratégique - Stéphane Jambu - SEO CAMP'us P...Cas pratique d'un accompagnement stratégique - Stéphane Jambu - SEO CAMP'us P...
Cas pratique d'un accompagnement stratégique - Stéphane Jambu - SEO CAMP'us P...
 
Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...
Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...
Gestion de projet SEO : comment s'organiser ? - Yannick Bouvard - SEO CAMP'us...
 
Vis ma vie de SEO à l'international - Patrice Laroche - SEO CAMP'us Paris 2021
Vis ma vie de SEO à l'international - Patrice Laroche - SEO CAMP'us Paris 2021Vis ma vie de SEO à l'international - Patrice Laroche - SEO CAMP'us Paris 2021
Vis ma vie de SEO à l'international - Patrice Laroche - SEO CAMP'us Paris 2021
 
Netlinking Persona, pour construire ses propres influenceurs - Nicolas Mercad...
Netlinking Persona, pour construire ses propres influenceurs - Nicolas Mercad...Netlinking Persona, pour construire ses propres influenceurs - Nicolas Mercad...
Netlinking Persona, pour construire ses propres influenceurs - Nicolas Mercad...
 
Faut il vraiment tricher pour ranker ? - Elliott Glenn Bobiet - SEO CAMP'us P...
Faut il vraiment tricher pour ranker ? - Elliott Glenn Bobiet - SEO CAMP'us P...Faut il vraiment tricher pour ranker ? - Elliott Glenn Bobiet - SEO CAMP'us P...
Faut il vraiment tricher pour ranker ? - Elliott Glenn Bobiet - SEO CAMP'us P...
 
La vie cachée des positions - Jason Miller - SEO CAMP'us Paris 2021
La vie cachée des positions - Jason Miller - SEO CAMP'us Paris 2021 La vie cachée des positions - Jason Miller - SEO CAMP'us Paris 2021
La vie cachée des positions - Jason Miller - SEO CAMP'us Paris 2021
 
Cannibalisation, contenu dupliqué et near duplicate : le cancer du SEO - Anne...
Cannibalisation, contenu dupliqué et near duplicate : le cancer du SEO - Anne...Cannibalisation, contenu dupliqué et near duplicate : le cancer du SEO - Anne...
Cannibalisation, contenu dupliqué et near duplicate : le cancer du SEO - Anne...
 
Migrer sur Shopify : Fausse bonne idée ? - Mathieu Chapon - SEO CAMP'us Paris...
Migrer sur Shopify : Fausse bonne idée ? - Mathieu Chapon - SEO CAMP'us Paris...Migrer sur Shopify : Fausse bonne idée ? - Mathieu Chapon - SEO CAMP'us Paris...
Migrer sur Shopify : Fausse bonne idée ? - Mathieu Chapon - SEO CAMP'us Paris...
 
Quel potentiel et canaux pour la vente d'actifs immatériels - Kevin Jourdan &...
Quel potentiel et canaux pour la vente d'actifs immatériels - Kevin Jourdan &...Quel potentiel et canaux pour la vente d'actifs immatériels - Kevin Jourdan &...
Quel potentiel et canaux pour la vente d'actifs immatériels - Kevin Jourdan &...
 
4 mois pour ranker sur une thématique ultra concurrentielle - Julien Jimenez ...
4 mois pour ranker sur une thématique ultra concurrentielle - Julien Jimenez ...4 mois pour ranker sur une thématique ultra concurrentielle - Julien Jimenez ...
4 mois pour ranker sur une thématique ultra concurrentielle - Julien Jimenez ...
 
Comment on a ranké en répondant à l'intention de recherche réelle de l'iterna...
Comment on a ranké en répondant à l'intention de recherche réelle de l'iterna...Comment on a ranké en répondant à l'intention de recherche réelle de l'iterna...
Comment on a ranké en répondant à l'intention de recherche réelle de l'iterna...
 
Don't Trust Google - Joran LAMISSE - SEO CAMP'us Paris 2021
Don't Trust Google - Joran LAMISSE - SEO CAMP'us Paris 2021Don't Trust Google - Joran LAMISSE - SEO CAMP'us Paris 2021
Don't Trust Google - Joran LAMISSE - SEO CAMP'us Paris 2021
 
De l'audit à la mise en place des préconisations, pourquoi ça coince ? - Dan...
De l'audit à la mise en place des  préconisations, pourquoi ça coince ? - Dan...De l'audit à la mise en place des  préconisations, pourquoi ça coince ? - Dan...
De l'audit à la mise en place des préconisations, pourquoi ça coince ? - Dan...
 
tests, investigations et études SEO - Alexis Rylko - SEO CAMP'us Paris 2021
tests, investigations et études SEO - Alexis Rylko - SEO CAMP'us Paris 2021tests, investigations et études SEO - Alexis Rylko - SEO CAMP'us Paris 2021
tests, investigations et études SEO - Alexis Rylko - SEO CAMP'us Paris 2021
 
Industrialisation des PBN - François Tréca - SEO CAMP'us Paris 2021
Industrialisation des PBN - François Tréca - SEO CAMP'us Paris 2021 Industrialisation des PBN - François Tréca - SEO CAMP'us Paris 2021
Industrialisation des PBN - François Tréca - SEO CAMP'us Paris 2021
 

SEO & Javascript en 2021 : Challenger les acquis - Alexandre Pinat - SEO CAMP'us Paris 2021

  • 1. SEO & Javascript en 2021: Challenger les acquis
  • 2. Paris 2021 #seocamp Cycle Tech SEO €15M 80 experts chiffre d’affaires SEO / SEA / SOCIAL / DATA Alexandre Pinat Team Leader SEO
  • 3. Paris 2021 #seocamp Cycle Tech SEO introduction
  • 4. Paris 2021 #seocamp Cycle Tech SEO 2009 : l’arrivée des Frameworks JS JavaScript : > une “surcouche” pour le visuel et le tracking > un outil SEO de manipulation du maillage 2009 JavaScript : > utilisation massive des Frameworks et SPA (Single Page Application) React Angular Vue Ember Svelte Next
  • 5. Paris 2021 #seocamp Cycle Tech SEO 2014 : Google interprète et indexe le JS 2014 “Today, we'll talk about our capability to render richer websites — meaning we see your content more like modern Web browsers, include the external resources, execute JavaScript and apply CSS.” En réalité, les choses sont plus compliquées... PHASE 1 CRAWL PHASE 3 RENDER PHASE 2 INDEX Sans la phase 3, Google ne peut pas découvrir le contenu d’un site full JS. Problème : la phase 3 n’est pas systématique. Elle dépend des ressources disponibles.
  • 6. Paris 2021 #seocamp Cycle Tech SEO Crawl et indexation immédiats des éléments HTML, à chaque passage de Google sur le site La différence entre HTML et JS pour Google HTML site web Découverte et interprétation des éléments JS non systématique, et donc non garantie à chaque passage de Google JS
  • 7. Paris 2021 #seocamp Cycle Tech SEO Le JavaScript fait toujours peur aux SEO = JavaScript Problèmes de crawl et d’indexation Problèmes de temps de chargement Baisses de position
  • 8. Paris 2021 #seocamp Cycle Tech SEO Mais le JS est très avantageux Pour un annonceur, développer un site en JS offre beaucoup d’avantages : > Expérience plus fluide avec peu de rechargement de page pour l’utilisateur > Mise en place de site et fonctionnalités plus riches > Déploiement et maintenance accélérés coté dev
  • 9. Paris 2021 #seocamp Cycle Tech SEO La question n’est donc pas si mais comment déployer un site en JS sans risque SEO ?
  • 10. Paris 2021 #seocamp Cycle Tech SEO ENJEU #1 crawlabilité
  • 11. Paris 2021 #seocamp Cycle Tech SEO Fournir une version HTML du site à Google HTML JS User site web HTML site web
  • 12. Paris 2021 #seocamp Cycle Tech SEO Client Side Rendering Framework JS Version HTML Utilisateur Framework JS Version HTML sans rendering Googlebot requête la page requête la page + Javascript SEO Pas SEO Friendly car Google n’effectue pas systématiquement la phase de rendering
  • 13. Paris 2021 #seocamp Cycle Tech SEO Comment passer du JS au HTML ? VERSION HTML DU SITE SERVEUR WEB 2. Static Site Generation (SSG) - Prerendering 3. Incremental Static Regeneration (ISR) 1. Server Side Rendering (SSR)
  • 14. Paris 2021 #seocamp Cycle Tech SEO 1. Server Side Rendering Framework JS Utilisateur Version HTML + Javascript Framework JS Googlebot Pour chaque requête, la page est construite à la demande du côté du serveur par le Framework JS Version HTML complète SEO Temps de réponse plus longs et performances dégradées requête la page requête la page SEO Le contenu fourni à Google est toujours “frais”, à jour
  • 15. Paris 2021 #seocamp Cycle Tech SEO 2. Static Site Generation Framework JS Le framework JS (ou un service de prerendering) construit une version statique de toutes les pages du site SEO La fraîcheur des contenus fournis à Google est dépendante de la fréquence de build Build des pages HTML construit le build Utilisateur requête la page Googlebot requête la page SEO Chargement rapide car les pages sont rendues côté serveur et mises en cache
  • 16. Paris 2021 #seocamp Cycle Tech SEO L’enjeu du SSG : le temps de Build PAGES BUILD TIME Plus le nombre de pages à générer est important, plus le temps de build augmente.
  • 17. Paris 2021 #seocamp Cycle Tech SEO Comment donner à Google un contenu HTML à jour sur des dizaines de milliers de pages avec du SSG ? + Se positionner en SEO sur des requêtes locales coiffeur paris épilation marseille massage lyon Case Study : Kiute x
  • 18. Paris 2021 #seocamp Cycle Tech SEO Case Study : Kiute x 50% du potentiel couvert 75% du potentiel couvert 90% du potentiel couvert 100% du potentiel couvert Part du potentiel de CA Nb de pages sur le site Potentiel de CA SEO Build < 10min Build 1j Build 2j Build 7j
  • 19. Paris 2021 #seocamp Cycle Tech SEO 3. Incremental Static Regeneration (ISR) Le framework JS met à jour la version statique à chaque fois qu’une page est requêtée re-génération Pages HTML pré- générées à jour requête la page renvoie la page requête la page renvoie la page Framework JS Utilisateur Googlebot OU Utilisateur Googlebot OU SEO Contenus toujours à jour sur des pages chargées rapidement (car mises en cache) Pages HTML pré- générées Build
  • 20. Paris 2021 #seocamp Cycle Tech SEO CSR Client Side Rendering SSR Server Side Rendering SSG Static Site Generation ISR Incremental Static Regeneration Fonctionnement Pour chaque requête, la page est construite du côté du navigateur (client) Pour chaque requête, la page est construite à la demande du côté du serveur par le Framework JS Le framework JS (ou un service de prerendering) construit une version statique de toutes les pages du site Le framework JS met à jour la version statique à chaque fois qu’une page est requêtée Avantages SEO x Le contenu fourni à Google est toujours “frais”, à jour Chargement rapide car les pages sont rendues côté serveur et mises en cache Contenus toujours à jour sur des pages chargées rapidement (car mises en cache) Inconvénients SEO Pas SEO Friendly car Google n’effectue systématiquement la phase de rendering Temps de réponse plus longs et performances dégradées La fraîcheur des contenus fournis à Google est dépendante de la fréquence de build x Frameworks disponible Tous les frameworks Tous les frameworks sauf Angular 1 et React Tous les frameworks avec Prerender.io ou Pupeteer, Gatsby et Nuxt nativement Next.js Framework JS et SEO : quelle option choisir ?
  • 21. Paris 2021 #seocamp Cycle Tech SEO Recetter l'implémentation SEO Comment s’assurer que les versions HTML fournies à Google soient optimisées pour le SEO et similaires à celles présentées aux utilisateurs ? La Search Console de Google Les crawlers
  • 22. Paris 2021 #seocamp Cycle Tech SEO ENJEU #2 performances
  • 23. Paris 2021 #seocamp Cycle Tech SEO Le temps de chargement global d’une page se décompose en deux grandes étapes qui ont des impacts distincts. Rappel : les étapes du chargement temps de réponse du serveur Impact crawlabilité temps d’éxecution de la page par le navigateur Impact utilisateur (core web vitals) Impact SEO
  • 24. Paris 2021 #seocamp Cycle Tech SEO Les ressources inutilisées en JS Les sites JS présentent souvent le même problème de performance : des ressources inutilisées sont chargées sur les pages Google PageSpeed Insights
  • 25. Paris 2021 #seocamp Cycle Tech SEO Un bundle JS c’est quoi ? script1.js script2.js Home Page script3.js script4.js Product Page jquery.js hotjar.js ga.js Libs Bundle.js Module Bundler
  • 26. Paris 2021 #seocamp Cycle Tech SEO Optimiser la taille du bundle JS La taille et l’optimisation du bundle JS sont les éléments qui ont le plus d’impact sur les temps de chargement d’une SPA. Google Lighthouse Ce bundle doit être le plus léger possible !
  • 27. Paris 2021 #seocamp Cycle Tech SEO Tree Shaking Supprimer toutes les ressources inutilisées js1.js js2.js js3.js js4.js Bundle js8.js js6.js js7.js js5.js js4.js js5.js js6.js - Avant optimisation : ~3Mo - Après optimisation : ~750Ko
  • 28. Paris 2021 #seocamp Cycle Tech SEO Code Splitting Charger uniquement les ressources utiles - toutes les ressources sont chargées Une seule requête Une requête par module + Seules les ressources utiles sont chargées
  • 29. Paris 2021 #seocamp Cycle Tech SEO Contrôler les performances SEO Google Lighthouse Google PageSpeed Insights
  • 30. Paris 2021 #seocamp Cycle Tech SEO conclusion
  • 31. Paris 2021 #seocamp Cycle Tech SEO En résumé, un site JS SEO compliant c’est... Des pages générées en HTML pour Google Avec la solution technique la plus adaptée au framework JS utilisé et aux spécificités de votre site (volumétrie de page, fraîcheur du contenu, priorités SEO,...) Des performances optimisées En réduisant le poids des différents bundle JS et en évitant de charger sur chaque gabarit de page des ressources qui ne seront pas utilisées
  • 32. Paris 2021 #seocamp Cycle Tech SEO JavaScript & SEO : rien d’impossible x x x x x x
  • 33. Paris 2021 #seocamp Cycle Tech SEO une bonne communication entre les équipes Les conditions d’une réussite Le JavaScript en SEO, ce n’est pas compliqué si on est bien accompagné. Une équipe dev expérimentée Une maîtrise des sujets SEO et JS
  • 34. Question Mug Paris 2021 #seocamp Cycle Tech SEO Quel framework Javascript supporte actuellement l’ISR ?
  • 35. MERCI AUX SPONSORS Paris 2021 #seocamp Cycle Tech SEO

Notes de l'éditeur

  1. Bonjour à tous, et bienvenu a la conf : SEO & Javascript en 2021: Challenger les acquis ou je parlerai plus spécifiquement des Framework javascript et de leur impact en SEO
  2. Alexandre PINAT 14 ANS DANS LE SEO TEAM LEADER CHEZ PRIMELIS DEPUIS 3ANS primelis, c’est une agence spécialisé dans l’acquisition et la data On travaille avec des centaines d’acteurs. Sur les derniers, on a constater une forte augmentation des problématiques SEO lié au Javascript. C’est pour ca que j’ai choisi de vous parler de ce sujet aujourdhui.
  3. pourquoi? Pour rappel Google nous dit indexer le Javascript depuis 2014. Une déclaration sympathique mais dans les faits , c’est beaucoup plus compliqué. Aujourd’hui, l’indexation des sites web s’opère en 3 phases Pour un site classique, google découvre l’essentiel de l’information lors de la phase de crawl, la phase de rendu qui opère dans un second temps ne donnera pas beaucoup d’information supplémentaire. Pour un site full Javascript, Google n’obtiendra quasiment aucune information avant la phase de rendu. PROBLEME : les capacités de rendu de Googlebot sont beaucoup plus limité que ses capacités de crawl. Il faudra donc plus de temps a un site JS pour etre indexé DONC ses perfs SEO seront moins bonnes
  4. pourquoi? Pour rappel Google nous dit indexer le Javascript depuis 2014. Une déclaration sympathique mais dans les faits , c’est beaucoup plus compliqué. Aujourd’hui, l’indexation des sites web s’opère en 3 phases Pour un site classique, google découvre l’essentiel de l’information lors de la phase de crawl, la phase de rendu qui opère dans un second temps ne donnera pas beaucoup d’information supplémentaire. Pour un site full Javascript, Google n’obtiendra quasiment aucune information avant la phase de rendu. PROBLEME : les capacités de rendu de Googlebot sont beaucoup plus limité que ses capacités de crawl. Il faudra donc plus de temps a un site JS pour etre indexé DONC ses perfs SEO seront moins bonnes
  5. Ce sont des caractéristiques inquiétantes pour le SEO: outre les questions de crawlabilité et donc de performance SEO comme on l’a vu plus haut, on peut ajouter la problématique de temps de chargement. Le javascript reste un peu lourd à digérer pour les navigateurs - notamment sur mobile. Quand on voit ca, on n’a pas vraiment envie d’y aller.
  6. Sauf qu’en 2021, Les Frameworks JS sont une des tendances fortes du marché pour plusieurs raisons: Cela permet d’avoir une expérience plus fluide car on recharge pas les pages durant la navigation Cela permet de mettre en place des sites plus riches Enfin le déploiement et la maintenance sont accélérées du côté développement.
  7. Par conséquent en 2021, La question n’est pas de savoir si on y va mais comment on y va sans risque du point de vue SEO car OUI les solutions existent
  8. Le problème principal avec les SPAS c’est donc la crawlabilté. De base, le serveur ne transmet pas un HTML viable à googlebot. Pour contourner ce problème, il va falloir générer le HTML coté serveur POur faire cela plusieurs méthodes s’offres à nous; plus ou moins adapté en fonction de la taille et du type de site cible.. Prerendering Server Side rendering INcremental Static regeneration
  9. La 2ème solutions est actuellement la plus courante et c’est celle que vous allez retrouver sur tous les framweworks JS “moderne” Ici le build JS va générer les pages HTML à la volée toujours coté serveur lorsque celle-ci sont demandées. (On est finalement assez proche de ce qui peut se faire avec un site PHP) C’est bien pour les pages nécessitant un contenu dynamique (par exemple, tests A/B ou contenu personnalisé en fonction de l'identité de l'utilisateur final). C’est surtout très adapté pour les Pages nécessitant un contenu actualisé (par exemple, prix et disponibilité du commerce électronique). Oui mais car il y a un mais , cela peut poser de gros problèmes de perf et notamment de temps de réponse car le serveur va être sollicité pour générer la page a chaque requête. Il est donc fortement recommandé de coupler le SSR à une mise en cache sur CDN ou un reverse proxy type Varnish. ON va revenir un peu plus tard sur cette notion de cache qui est clé dans la réussite du projet. Framework concerné: ANgluar + universal Vue JS + nuxt React + next
  10. Le problème principal avec les SPAS c’est donc la crawlabilté. De base, le serveur ne transmet pas un HTML viable à googlebot. Pour contourner ce problème, il va falloir générer le HTML coté serveur POur faire cela plusieurs méthodes s’offres à nous; plus ou moins adapté en fonction de la taille et du type de site cible.. Prerendering Server Side rendering INcremental Static regeneration
  11. La 2ème solutions est actuellement la plus courante et c’est celle que vous allez retrouver sur tous les framweworks JS “moderne” Ici le build JS va générer les pages HTML à la volée toujours coté serveur lorsque celle-ci sont demandées. (On est finalement assez proche de ce qui peut se faire avec un site PHP) C’est bien pour les pages nécessitant un contenu dynamique (par exemple, tests A/B ou contenu personnalisé en fonction de l'identité de l'utilisateur final). C’est surtout très adapté pour les Pages nécessitant un contenu actualisé (par exemple, prix et disponibilité du commerce électronique). Oui mais car il y a un mais , cela peut poser de gros problèmes de perf et notamment de temps de réponse car le serveur va être sollicité pour générer la page a chaque requête. Il est donc fortement recommandé de coupler le SSR à une mise en cache sur CDN ou un reverse proxy type Varnish. ON va revenir un peu plus tard sur cette notion de cache qui est clé dans la réussite du projet. Framework concerné: ANgluar + universal Vue JS + nuxt React + next
  12. La 2ème solutions est actuellement la plus courante et c’est celle que vous allez retrouver sur tous les framweworks JS “moderne” Ici le build JS va générer les pages HTML à la volée toujours coté serveur lorsque celle-ci sont demandées. (On est finalement assez proche de ce qui peut se faire avec un site PHP) C’est bien pour les pages nécessitant un contenu dynamique (par exemple, tests A/B ou contenu personnalisé en fonction de l'identité de l'utilisateur final). C’est surtout très adapté pour les Pages nécessitant un contenu actualisé (par exemple, prix et disponibilité du commerce électronique). Oui mais car il y a un mais , cela peut poser de gros problèmes de perf et notamment de temps de réponse car le serveur va être sollicité pour générer la page a chaque requête. Il est donc fortement recommandé de coupler le SSR à une mise en cache sur CDN ou un reverse proxy type Varnish. ON va revenir un peu plus tard sur cette notion de cache qui est clé dans la réussite du projet. Framework concerné: ANgluar + universal Vue JS + nuxt React + next
  13. La 2ème solutions est actuellement la plus courante et c’est celle que vous allez retrouver sur tous les framweworks JS “moderne” Ici le build JS va générer les pages HTML à la volée toujours coté serveur lorsque celle-ci sont demandées. (On est finalement assez proche de ce qui peut se faire avec un site PHP) C’est bien pour les pages nécessitant un contenu dynamique (par exemple, tests A/B ou contenu personnalisé en fonction de l'identité de l'utilisateur final). C’est surtout très adapté pour les Pages nécessitant un contenu actualisé (par exemple, prix et disponibilité du commerce électronique). Oui mais car il y a un mais , cela peut poser de gros problèmes de perf et notamment de temps de réponse car le serveur va être sollicité pour générer la page a chaque requête. Il est donc fortement recommandé de coupler le SSR à une mise en cache sur CDN ou un reverse proxy type Varnish. ON va revenir un peu plus tard sur cette notion de cache qui est clé dans la réussite du projet. Framework concerné: ANgluar + universal Vue JS + nuxt React + next
  14. Voici un petit case study pour vous montrez comment on peut gérer intelligemment le cache en ISR sur la base de l’interet SEO des pages. Chez Primelis nous avons parmis nos client sous angular un client avec un important réferentiel localisé impliquant la nécessité de générer un grand nombres de pages. Afin d’optimiser la gestion de cache nous avons pris le parti de catégoriser nos pages en fonction de leur interet SEO. en effet, comme très souvent avec les requetes localisés le potentiel se concentre sur un faible nombre de pages lié au grande ville ( plus d’offres, plus de recherche). Cette analyse nous a permis de déterminer 4 niveaux de cache en fonction du potentiel SEO des pages d’obtenir des temps de réponses satsisfaisant et de maximiser la fraicheur de la data sur les pages les plus importantes.
  15. Voici un petit case study pour vous montrez comment on peut gérer intelligemment le cache en ISR sur la base de l’interet SEO des pages. Chez Primelis nous avons parmis nos client sous angular un client avec un important réferentiel localisé impliquant la nécessité de générer un grand nombres de pages. Afin d’optimiser la gestion de cache nous avons pris le parti de catégoriser nos pages en fonction de leur interet SEO. en effet, comme très souvent avec les requetes localisés le potentiel se concentre sur un faible nombre de pages lié au grande ville ( plus d’offres, plus de recherche). Cette analyse nous a permis de déterminer 4 niveaux de cache en fonction du potentiel SEO des pages d’obtenir des temps de réponses satsisfaisant et de maximiser la fraicheur de la data sur les pages les plus importantes.
  16. La 2ème solutions est actuellement la plus courante et c’est celle que vous allez retrouver sur tous les framweworks JS “moderne” Ici le build JS va générer les pages HTML à la volée toujours coté serveur lorsque celle-ci sont demandées. (On est finalement assez proche de ce qui peut se faire avec un site PHP) C’est bien pour les pages nécessitant un contenu dynamique (par exemple, tests A/B ou contenu personnalisé en fonction de l'identité de l'utilisateur final). C’est surtout très adapté pour les Pages nécessitant un contenu actualisé (par exemple, prix et disponibilité du commerce électronique). Oui mais car il y a un mais , cela peut poser de gros problèmes de perf et notamment de temps de réponse car le serveur va être sollicité pour générer la page a chaque requête. Il est donc fortement recommandé de coupler le SSR à une mise en cache sur CDN ou un reverse proxy type Varnish. ON va revenir un peu plus tard sur cette notion de cache qui est clé dans la réussite du projet. Framework concerné: ANgluar + universal Vue JS + nuxt React + next
  17. La 2ème solutions est actuellement la plus courante et c’est celle que vous allez retrouver sur tous les framweworks JS “moderne” Ici le build JS va générer les pages HTML à la volée toujours coté serveur lorsque celle-ci sont demandées. (On est finalement assez proche de ce qui peut se faire avec un site PHP) C’est bien pour les pages nécessitant un contenu dynamique (par exemple, tests A/B ou contenu personnalisé en fonction de l'identité de l'utilisateur final). C’est surtout très adapté pour les Pages nécessitant un contenu actualisé (par exemple, prix et disponibilité du commerce électronique). Oui mais car il y a un mais , cela peut poser de gros problèmes de perf et notamment de temps de réponse car le serveur va être sollicité pour générer la page a chaque requête. Il est donc fortement recommandé de coupler le SSR à une mise en cache sur CDN ou un reverse proxy type Varnish. ON va revenir un peu plus tard sur cette notion de cache qui est clé dans la réussite du projet. Framework concerné: ANgluar + universal Vue JS + nuxt React + next
  18. La dernière solution c’est l’ISR et c’est la plus fonctionnel malheureusement elle n’est disponible que sur NEXT.JS Pour simplifier ca va mixer une approche de rendu à la volée et de la gestion de cache native qui permet a l’application de ne pas générer la page si le dernier snapshot est à jour. Cela vous permettre de gérer de très gros sites en prérendering sans faire exploser les perfs. cela demande cependant un peu plus de travail pour les développeurs pour gerer les pages avec des données très fraîches. par exemple: Zones du site où vous devez personnaliser la réponse en fonction de la demande (par exemple, tests A/B ou contenu personnalisé). Contrairement au rendu côté serveur, la réponse est rendue sans le contexte de la demande en cours. Les pages contenant des données "en direct" (par exemple, la disponibilité des stocks) - à moins qu'elles ne soient prises en charge par une extraction supplémentaire de données côté client.
  19. On vient de voir ensemble les enjeux moteurs, mais il y a également des enjeux utilisateurs a prendre en compte lorsqu’on travaille avec des frameworks JS qui ont des spécificités fortes.
  20. Un rappel rapide des 2 principales composantes du temps de chargement pour l’utilisateur utilisateur. Le temps de réponse dont on à déja parlé auparavant qui a également un impact sur la crawlabilité du site Le temps d’éxécution de la page par le navigateur (le rendu du HTML par le dom qui permet de tout afficher correctement à l’écran) C’est sur 2ème aspect que l’on va se concentrer car il y a la aussi quelques écueils a eviter avec les frameworks JS.
  21. Un rappel rapide des 2 principales composantes du temps de chargement pour l’utilisateur utilisateur. Le temps de réponse dont on à déja parlé auparavant qui a également un impact sur la crawlabilité du site Le temps d’éxécution de la page par le navigateur (le rendu du HTML par le dom qui permet de tout afficher correctement à l’écran) C’est sur 2ème aspect que l’on va se concentrer car il y a la aussi quelques écueils a eviter avec les frameworks JS.
  22. Le bundle JS : qu’est ce que c’est? Concretement aujourdhui, la plupart des framework JS vont packagés l’intégralité des dependances javascripts au sein d’un seul gros fichier utilisé sur toutes les pages du site. C’est certes très pratique pour les développeurs mais la taille de ce fichier que le navigateur devra charger au moins une fois peut vite exploser pour plusieurs raisons: présences de code inutile sur certaines pages présence de code morts En somme c’est un peu une boite noir coté front.
  23. le code splitting: Le code splitting permet de diviser votre code en plusieurs bundle qui peuvent ensuite être chargés à la demande ou en parallèle. Cela permet d’avoir des bundles moins lourd et ainsi de contrôler la priorisation du chargement des ressources.
  24. le code splitting: Le code splitting permet de diviser votre code en plusieurs bundle qui peuvent ensuite être chargés à la demande ou en parallèle. Cela permet d’avoir des bundles moins lourd et ainsi de contrôler la priorisation du chargement des ressources.