SlideShare une entreprise Scribd logo
1  sur  32
Télécharger pour lire hors ligne
Performance SEO et JS
…
15 ans dans le web
Formateur SEO
Ambassadeur OnCrawl
Conférencier depuis 2004
Consultant technique grands
comptes et agency
Evangelist schema.org
Erlé
A L B E R T O N
Acquisition & Digital
Performance Manager
@cubilizer
1,5 M Sessions/mois
+7 M d’annonces
65% de trafic mobile
A Brief History of Time*
2004
2006
2007
2012
2015
2016
2012 / 2016
2019
Premier framework JS
ClientSide a proposer des
Components avec UI css,
du data storage, Objets JS,
le XHR simplifié et le
SataStorage serveur/client
Framework de manipulation
DOM
Selecteurs CSS
révolutionnaires, Compatibilités
browser, Animations fluides,
Objets Mix JS/HTML, CDN
versionnés
Facebook developpe un framework JS
natif qui deviant le framework le plus
utilize aujourd’hui / GraphQL simplifie
les API request / Express et Redux
permettent le Server Side Rendering
React.js / Express / GraphQL
Chargement de données
en JS asynchrone sur le
poste du client
XMLHttpRequest / Ajax
Création de common.js
dans le but de fournir aux
équipes, une boite à outils
JS optimisée et d’imposer
une uniformité au sein
des développements des
équipes Front
Refonte HP Orange
Introduction du JS côté serveur,
package managment, architecture
révolutionnaire (Apache n’est plus
un must have), API unifiée,
émergence de package.json
Node.js (v5) et npm Google Evergreen
(ou pas)
Google accélère sur la
comprehension du JS post
Dom Load
Du JS pour valider des
formulaires, écrire des
cookies, aligner des
TABLE en hauteur dans
les layout ou faire des
menus à onglets
La jeunesse d’un DEV
A long time ago in a WEB far far ago!
str_footer ="<div
id='o_footer' class='resize
"+bgcolor+ ’>" ;
…
document.write(str_footer)
Avant on écrivait du code !
Le JS était un allié pour le tracking, la
validation de formulaire et la creation
de contenu HTML BLOQUANT pour le
rendu de la page
La vue de Google à l’époque
Pas d’analyse du contenu HTML !
Pas de rendu JS
Google et les autres utilisaient les
balises NOSCRIPT pour proposer une
alternative à l’analyse du code
<noscript>…</noscript>
Et un jour DOJO inventa
les composants !
Les premier blocs réutilisables
Les Framework JS propose des
layouts compatibles et avec des
interfaces ”modernes”
La vue de Google à l’époque
Pas de contenu HTML +
Validation W3C NOK
Pas de rendu JS
Google n’interprète toujours pas le Js
et les balises HTML sont vides de leur
contenu :/
<script>…</script>
<div
dojo-type="dijit/tree/ObjectStoreModel"
dojo-id="myModel"
dojo-props="store: myStore, query: {id:
'world'}"></div>
Les dangers de XHR
Le contenu n’est disponible
que si le JS est activé
Google bot fait peu de rendering JS
Ca coute de l’argent
ressources machines, CPU, RAM,
Navigateurs Headless
Si le contenu n’est pas
dans le code source, le
Bot ne peut pas le voir !
Si le bot ne voit pas votre code, il
n’est pas à jour dans les SERPs
La vue de Google aujourd’hui
Le bot JS est un peu fénéant
Il ne passe pas forcément sur les
pages tous les jours, il utilise encore
une version Chrome 41
"GET /voiture-occasion/skoda-superb-
RZCATWNL31189088.html HTTP/1.1" 443 200 144739 ""
"Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X
Build/MMB29P) AppleWebKit/537.36 (KHTML, like
Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36
(compatible; Googlebot/2.1;
+http://www.google.com/bot.html)" 97
www.reezocar.com
Crawl Classique 100% du temps
Crawl JS x%
du temps
NB: x est de
moins en mois
petit
Le JS passe du coté serveur
Créer un serveur Node ou React en 2 commandes
et avoir une architecture de site à jour
Le problème… pas de code HTML
C’est rapide mais il manqué le principal
L’application est prète et le serveur répond, mais
le Code source est un JS
L’utilisateur est heureux
les site/l’application est
très rapide…
… mais comment
transformer mon code JS
en HTML ?
Express Middleware est là pour ça !
1 commande de plus…
*merci npm
Le code JS est maintenant
interprété côté server SSR
et tout le monde est
heureux !
Google propose même un service
RenderTRON pour faire le Serveur
Side Rendering
Material UI design en 3 commandes
npm i material-kit-react
…et c’est tout pour avoir un ensemble de
composants Ready to Rumble
et configurables à volonté
Votre Lead Front et votre
marketing seront des gens
heureux…
Google aussi puisque le
score LightHouse est
proche de 100
Architecture JS moderne
La data est séparée du layout,
GraphQL sert la données des bases
de données sous forme d’API
GraphQL / MySQL / REDIS
React / Node / Angular
Un framework pour créer des
composants réutilisables et
sous forme de templates
1
Server Side Rendering
Les middleware dédiés sont là pour
interpreter le JS côté server, assembler
les composants et les la data pour render
du HTML au chargement de la page
3
Le Bot voit le code
Le travail du bot (HTML) est
simplifié, Google économise de
l’argent, les algorithmes
classiques prennent le relais
sans problème
4
La page rank
Les pages sont correctement
positionnées, le traffic arrive,
le site est agréable à
l’utilisateur et la conversion
existe
5
Google communique beaucoup plus…
…et mieux … Merci Vincent Courson et Martin Splitt
Ce que dit Google
Googlebot passe en mode « EVERGREEN »
A l’occasion du récent événement Google I/O, Google a
annoncé que son bot explorait dorénavant le web en utilisant
la dernière version de Chrome. En clair, Googlebot se comporte
maintenant comme un Chrome version 74, et non 41 !
La réalité !
Seuls les outils
de rendu et de
test pour les
webmasters
sont en Chrome
Evergreen…
Le bot est
toujours en 41,
donc peu de
compréhension
du JS moderne
ou complexe
Google Bot
Evergreen
c’est pour
quand ?
…bientôt…
Info fraîche de la conference précédente…
Le JS c’est de l’UX/UI… mais…
Penser d’abord à
l’utilisateur
C’est pour lui que vous faites du
JS de qualité
Faciliter les interactions
Moteur de recherche interne,
click en mode application
un CLICK n’est pas
forcément un LIEN
Garder votre maillage
interne en HTML
Un lien qui transfert du Page
Rank est un lien <a href
présent dans le code source
renvoyé pas le serveur
Mettre à jour ses
briques JS
La dette technique est
souvent un des plus grave
problèmes d’un site
Valider le code vu par
Google avec ses outils...
EVEGREEN alors que le
BOT ne l’est pas :/
Le JS c’est aussi de l’optimisation SEO
Black Hat White Hat
Certains utilisent le JS pour cacher des choses au bot
$203.00
D’autres pensent que passer les contenus et les liens sortants
non pertinents pour la page est une technique normale
Home
Verticales
Produits / ROI
LE MAILLAGE
INTERNE en JS
CLOACKIN IS A CRIME ???
Soyez un bon développeur JS, pour conserver l’UX
du mega menu et réduire le code HTML lu par le bot
NON, LE SILOING N’EST
PAS DU COCON
SEMANT…
Une navigation complète reproduite sur toutes les
pages du site est contre-performant !
Les impacts :
- Sémantique de la page diffuse
- Page Rank interne trop dilué
- On ne pousse pas assez les Top Catégories
UX conservée !
User first !
Cloaking* is not a crime
* Servir du code source different au bot et aux utilisateurs – Dynamic Serving – à la condition que le
rendering du code JS par le bot soit equivalent au contenu vu par le bot HTML
Actuellement, il est difficile de traiter JavaScript, et tous les robots
d'exploration des moteurs de recherche ne sont pas en mesure de le
traiter correctement ou immédiatement.
Nous espérons que ce problème pourra être résolu à l'avenir.
En attendant, nous vous recommandons une solution de rechange :
l'affichage dynamique, qui consiste à basculer entre un contenu affiché
côté client et un contenu préaffiché pour des user-agents spécifiques.
Profiter des updates WEBPerf
Lazy Loading Components
Nous utilisons beaucoup de composants React dans nos
applications. Nous les incluons dans notre paquet JavaScript
principal (app.js) ou dans un des paquets JavaScript de la
page.
Parfois, certains de ces composants sont assez gros.
Si un composant est utilisé dans presque toutes les pages, il
est inclus dans notre pack principal JavaScript.
Mais nous pouvons charger un composant seulement
quand c'est nécessaire, cela réduira considérablement le
paquet d'applications initial, et cela aidera notre application à
charger plus rapidement.
Update les composants JS de son architecture
La dette technique peut être comparée à la
dette monétaire
Si elle n'est pas remboursée, elle peut
accumuler des "intérêts", ce qui rend plus
difficile la mise en œuvre ultérieure de
changements
Update NEXT JS
La dette technique non traitée augmente l'entropie logicielle
Le HACK JS
Il fallait être présent à la
conf pour le connaitre
Strapi & Gatsby les magnifiques
JS bootstrap : Efficacité et réalité
Strapi
Strapi permet de bootsptraper une base de donnée,
un backoffice et une interface sécurisée modulable
et qui s’interface avec Gatsby
Monter un backoffice en 3 lignes de codes
Lors du build final, Gatsby va créer un site
complétement static depuis le code React/GraphQl
Un framework React / GraphQL qui sera static
en prod
JS et SEO HOW TO
Pousser la techno au max des optimisations SEO
Il existe 1000 façon de coder, seules quelqu’unes fontionnenent
en SEO !
Hacker
Maitriser les technologies utilisées
Le recrutement de qualité doit être une priorité Qualité
Multiplier les bonnes actions
Faire confiance aux experts, faire une veille de qualité,
ne pas se reposer sur ses aquis
Perfect is better than Done
Donner à Google ce qu’il attend
Code HTML (SSR), EAT, nouvelles techno, comprendre les
mechanismes des bots
Test & Learn
Recrutement
Si vcous voulez intégrer une Startup qui a le vent en poupe et ou on s’éclate !
TRANSPARENCE1
PERFORMANCE2
ESPRIT D’EQUIPE3
BIENVEILLANCE4
Question MUG !
MerciSi vous avez des questions !

Contenu connexe

Tendances

Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Semrush France
 
Du Crawl à l’indexation : les prérequis pour bien ranker
Du Crawl à l’indexation : les prérequis pour bien rankerDu Crawl à l’indexation : les prérequis pour bien ranker
Du Crawl à l’indexation : les prérequis pour bien rankerSemrush France
 
Le SEO en 2021 : à quoi faut-il s'attendre ?
Le SEO en 2021 : à quoi faut-il s'attendre ?Le SEO en 2021 : à quoi faut-il s'attendre ?
Le SEO en 2021 : à quoi faut-il s'attendre ?Semrush France
 
"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019
"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019
"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019Boris SCHAPIRA
 
2018 le seo à l heure du mobile first index
2018 le seo à l heure du mobile first index2018 le seo à l heure du mobile first index
2018 le seo à l heure du mobile first indexPhilippe YONNET
 
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
 
Comment construire une Roadmap SEO efficace (et avoir des résultats)
Comment construire une Roadmap SEO efficace (et avoir des résultats)Comment construire une Roadmap SEO efficace (et avoir des résultats)
Comment construire une Roadmap SEO efficace (et avoir des résultats)Semrush France
 
Nouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEONouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEOPhilippe YONNET
 
Webperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesWebperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesMadeline Pinthon
 
Responsive WebDesign performant
Responsive WebDesign performantResponsive WebDesign performant
Responsive WebDesign performantRefficience
 
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
 
WordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMixWordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMixDaniel Roch - SeoMix
 
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021Philippe YONNET
 
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Kenny Dits
 
Comment mesurer la vitesse des sites ? @ Web2day 2018 Nantes
Comment mesurer la vitesse des sites ? @ Web2day 2018 NantesComment mesurer la vitesse des sites ? @ Web2day 2018 Nantes
Comment mesurer la vitesse des sites ? @ Web2day 2018 NantesMadeline Pinthon
 
Comment réussir une migration de site web en seo ?
Comment réussir une migration de site web en seo ?Comment réussir une migration de site web en seo ?
Comment réussir une migration de site web en seo ?Patrick Valibus
 
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
 
No Code et SEO sont ils compatibles ? Philippe Yonnet Neper
No Code et SEO sont ils compatibles ? Philippe Yonnet NeperNo Code et SEO sont ils compatibles ? Philippe Yonnet Neper
No Code et SEO sont ils compatibles ? Philippe Yonnet NeperPhilippe YONNET
 
Tuniseo 2017 année charnière pour le SEO ?
Tuniseo  2017 année charnière pour le SEO ?Tuniseo  2017 année charnière pour le SEO ?
Tuniseo 2017 année charnière pour le SEO ?Philippe YONNET
 
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
 

Tendances (20)

Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?Quel ROI attendre d'un projet de création de pages AMP ?
Quel ROI attendre d'un projet de création de pages AMP ?
 
Du Crawl à l’indexation : les prérequis pour bien ranker
Du Crawl à l’indexation : les prérequis pour bien rankerDu Crawl à l’indexation : les prérequis pour bien ranker
Du Crawl à l’indexation : les prérequis pour bien ranker
 
Le SEO en 2021 : à quoi faut-il s'attendre ?
Le SEO en 2021 : à quoi faut-il s'attendre ?Le SEO en 2021 : à quoi faut-il s'attendre ?
Le SEO en 2021 : à quoi faut-il s'attendre ?
 
"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019
"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019
"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019
 
2018 le seo à l heure du mobile first index
2018 le seo à l heure du mobile first index2018 le seo à l heure du mobile first index
2018 le seo à l heure du mobile first index
 
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
 
Comment construire une Roadmap SEO efficace (et avoir des résultats)
Comment construire une Roadmap SEO efficace (et avoir des résultats)Comment construire une Roadmap SEO efficace (et avoir des résultats)
Comment construire une Roadmap SEO efficace (et avoir des résultats)
 
Nouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEONouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEO
 
Webperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibesWebperf : par où commencer ? - SEOGoodVibes
Webperf : par où commencer ? - SEOGoodVibes
 
Responsive WebDesign performant
Responsive WebDesign performantResponsive WebDesign performant
Responsive WebDesign performant
 
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 ?
 
WordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMixWordPress et la compatibilité mobile - Semrush & SeoMix
WordPress et la compatibilité mobile - Semrush & SeoMix
 
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021
 
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
Initiation Webperf : Comprendre, analyser et optimiser les performances web F...
 
Comment mesurer la vitesse des sites ? @ Web2day 2018 Nantes
Comment mesurer la vitesse des sites ? @ Web2day 2018 NantesComment mesurer la vitesse des sites ? @ Web2day 2018 Nantes
Comment mesurer la vitesse des sites ? @ Web2day 2018 Nantes
 
Comment réussir une migration de site web en seo ?
Comment réussir une migration de site web en seo ?Comment réussir une migration de site web en seo ?
Comment réussir une migration de site web en seo ?
 
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...
 
No Code et SEO sont ils compatibles ? Philippe Yonnet Neper
No Code et SEO sont ils compatibles ? Philippe Yonnet NeperNo Code et SEO sont ils compatibles ? Philippe Yonnet Neper
No Code et SEO sont ils compatibles ? Philippe Yonnet Neper
 
Tuniseo 2017 année charnière pour le SEO ?
Tuniseo  2017 année charnière pour le SEO ?Tuniseo  2017 année charnière pour le SEO ?
Tuniseo 2017 année charnière pour le SEO ?
 
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...
 

Similaire à Seocamp Bayonne - JS et SEO

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 2017Peak 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
 
Le SEO JavaScript démystifié
Le SEO JavaScript démystifiéLe SEO JavaScript démystifié
Le SEO JavaScript démystifiéAdrien Russo
 
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 à 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
 
Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022
Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022
Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022Adrien Russo
 
Flash vs-html5-adrien-leygues-pw-2011
Flash vs-html5-adrien-leygues-pw-2011Flash vs-html5-adrien-leygues-pw-2011
Flash vs-html5-adrien-leygues-pw-2011Adrien Leygues
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostDamien Jubeau
 
L'impact sur le SEO de Googlebot Evergreen
L'impact sur le SEO de Googlebot EvergreenL'impact sur le SEO de Googlebot Evergreen
L'impact sur le SEO de Googlebot EvergreenPhilippe YONNET
 
Les nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEOLes nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEOGroupe Neper
 
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
 
LoadTime & SEO - Erlé Alberton
LoadTime & SEO - Erlé AlbertonLoadTime & SEO - Erlé Alberton
LoadTime & SEO - Erlé AlbertonWeLoveSEO
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8davrous
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeOuadie LAHDIOUI
 
Développement d'interfaces web
Développement d'interfaces webDéveloppement d'interfaces web
Développement d'interfaces webDavid Desrousseaux
 
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
 
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...Peak Ace
 
Core web vitals - Webinar Neper du 3 décembre 2020
Core web vitals - Webinar Neper du 3 décembre 2020Core web vitals - Webinar Neper du 3 décembre 2020
Core web vitals - Webinar Neper du 3 décembre 2020Philippe YONNET
 

Similaire à Seocamp Bayonne - JS et SEO (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...
 
Le SEO JavaScript démystifié
Le SEO JavaScript démystifiéLe SEO JavaScript démystifié
Le SEO JavaScript démystifié
 
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 à 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
 
Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022
Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022
Maitriser le SEO d'un site JavaScript - SEO Campus Paris 2022
 
Flash vs-html5-adrien-leygues-pw-2011
Flash vs-html5-adrien-leygues-pw-2011Flash vs-html5-adrien-leygues-pw-2011
Flash vs-html5-adrien-leygues-pw-2011
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
 
L'impact sur le SEO de Googlebot Evergreen
L'impact sur le SEO de Googlebot EvergreenL'impact sur le SEO de Googlebot Evergreen
L'impact sur le SEO de Googlebot Evergreen
 
Les nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEOLes nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEO
 
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
 
LoadTime & SEO - Erlé Alberton
LoadTime & SEO - Erlé AlbertonLoadTime & SEO - Erlé Alberton
LoadTime & SEO - Erlé Alberton
 
Jquery Mobile vs Twitter Bootstrap
Jquery Mobile vs Twitter BootstrapJquery Mobile vs Twitter Bootstrap
Jquery Mobile vs Twitter Bootstrap
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitée
 
Développement d'interfaces web
Développement d'interfaces webDéveloppement d'interfaces web
Développement d'interfaces web
 
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...
 
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
 
Core web vitals - Webinar Neper du 3 décembre 2020
Core web vitals - Webinar Neper du 3 décembre 2020Core web vitals - Webinar Neper du 3 décembre 2020
Core web vitals - Webinar Neper du 3 décembre 2020
 

Seocamp Bayonne - JS et SEO

  • 2. 15 ans dans le web Formateur SEO Ambassadeur OnCrawl Conférencier depuis 2004 Consultant technique grands comptes et agency Evangelist schema.org Erlé A L B E R T O N Acquisition & Digital Performance Manager @cubilizer
  • 3. 1,5 M Sessions/mois +7 M d’annonces 65% de trafic mobile
  • 4. A Brief History of Time* 2004 2006 2007 2012 2015 2016 2012 / 2016 2019 Premier framework JS ClientSide a proposer des Components avec UI css, du data storage, Objets JS, le XHR simplifié et le SataStorage serveur/client Framework de manipulation DOM Selecteurs CSS révolutionnaires, Compatibilités browser, Animations fluides, Objets Mix JS/HTML, CDN versionnés Facebook developpe un framework JS natif qui deviant le framework le plus utilize aujourd’hui / GraphQL simplifie les API request / Express et Redux permettent le Server Side Rendering React.js / Express / GraphQL Chargement de données en JS asynchrone sur le poste du client XMLHttpRequest / Ajax Création de common.js dans le but de fournir aux équipes, une boite à outils JS optimisée et d’imposer une uniformité au sein des développements des équipes Front Refonte HP Orange Introduction du JS côté serveur, package managment, architecture révolutionnaire (Apache n’est plus un must have), API unifiée, émergence de package.json Node.js (v5) et npm Google Evergreen (ou pas) Google accélère sur la comprehension du JS post Dom Load Du JS pour valider des formulaires, écrire des cookies, aligner des TABLE en hauteur dans les layout ou faire des menus à onglets La jeunesse d’un DEV
  • 5. A long time ago in a WEB far far ago! str_footer ="<div id='o_footer' class='resize "+bgcolor+ ’>" ; … document.write(str_footer) Avant on écrivait du code ! Le JS était un allié pour le tracking, la validation de formulaire et la creation de contenu HTML BLOQUANT pour le rendu de la page
  • 6. La vue de Google à l’époque Pas d’analyse du contenu HTML ! Pas de rendu JS Google et les autres utilisaient les balises NOSCRIPT pour proposer une alternative à l’analyse du code <noscript>…</noscript>
  • 7. Et un jour DOJO inventa les composants ! Les premier blocs réutilisables Les Framework JS propose des layouts compatibles et avec des interfaces ”modernes”
  • 8. La vue de Google à l’époque Pas de contenu HTML + Validation W3C NOK Pas de rendu JS Google n’interprète toujours pas le Js et les balises HTML sont vides de leur contenu :/ <script>…</script> <div dojo-type="dijit/tree/ObjectStoreModel" dojo-id="myModel" dojo-props="store: myStore, query: {id: 'world'}"></div>
  • 9. Les dangers de XHR Le contenu n’est disponible que si le JS est activé Google bot fait peu de rendering JS Ca coute de l’argent ressources machines, CPU, RAM, Navigateurs Headless Si le contenu n’est pas dans le code source, le Bot ne peut pas le voir ! Si le bot ne voit pas votre code, il n’est pas à jour dans les SERPs
  • 10. La vue de Google aujourd’hui Le bot JS est un peu fénéant Il ne passe pas forcément sur les pages tous les jours, il utilise encore une version Chrome 41 "GET /voiture-occasion/skoda-superb- RZCATWNL31189088.html HTTP/1.1" 443 200 144739 "" "Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)" 97 www.reezocar.com Crawl Classique 100% du temps Crawl JS x% du temps NB: x est de moins en mois petit
  • 11. Le JS passe du coté serveur Créer un serveur Node ou React en 2 commandes et avoir une architecture de site à jour
  • 12. Le problème… pas de code HTML C’est rapide mais il manqué le principal L’application est prète et le serveur répond, mais le Code source est un JS L’utilisateur est heureux les site/l’application est très rapide… … mais comment transformer mon code JS en HTML ?
  • 13. Express Middleware est là pour ça ! 1 commande de plus… *merci npm Le code JS est maintenant interprété côté server SSR et tout le monde est heureux ! Google propose même un service RenderTRON pour faire le Serveur Side Rendering
  • 14. Material UI design en 3 commandes npm i material-kit-react …et c’est tout pour avoir un ensemble de composants Ready to Rumble et configurables à volonté Votre Lead Front et votre marketing seront des gens heureux… Google aussi puisque le score LightHouse est proche de 100
  • 15. Architecture JS moderne La data est séparée du layout, GraphQL sert la données des bases de données sous forme d’API GraphQL / MySQL / REDIS React / Node / Angular Un framework pour créer des composants réutilisables et sous forme de templates 1 Server Side Rendering Les middleware dédiés sont là pour interpreter le JS côté server, assembler les composants et les la data pour render du HTML au chargement de la page 3 Le Bot voit le code Le travail du bot (HTML) est simplifié, Google économise de l’argent, les algorithmes classiques prennent le relais sans problème 4 La page rank Les pages sont correctement positionnées, le traffic arrive, le site est agréable à l’utilisateur et la conversion existe 5
  • 16. Google communique beaucoup plus… …et mieux … Merci Vincent Courson et Martin Splitt
  • 17. Ce que dit Google Googlebot passe en mode « EVERGREEN » A l’occasion du récent événement Google I/O, Google a annoncé que son bot explorait dorénavant le web en utilisant la dernière version de Chrome. En clair, Googlebot se comporte maintenant comme un Chrome version 74, et non 41 !
  • 18. La réalité ! Seuls les outils de rendu et de test pour les webmasters sont en Chrome Evergreen… Le bot est toujours en 41, donc peu de compréhension du JS moderne ou complexe
  • 19. Google Bot Evergreen c’est pour quand ? …bientôt… Info fraîche de la conference précédente…
  • 20. Le JS c’est de l’UX/UI… mais… Penser d’abord à l’utilisateur C’est pour lui que vous faites du JS de qualité Faciliter les interactions Moteur de recherche interne, click en mode application un CLICK n’est pas forcément un LIEN Garder votre maillage interne en HTML Un lien qui transfert du Page Rank est un lien <a href présent dans le code source renvoyé pas le serveur Mettre à jour ses briques JS La dette technique est souvent un des plus grave problèmes d’un site Valider le code vu par Google avec ses outils... EVEGREEN alors que le BOT ne l’est pas :/
  • 21. Le JS c’est aussi de l’optimisation SEO Black Hat White Hat Certains utilisent le JS pour cacher des choses au bot $203.00 D’autres pensent que passer les contenus et les liens sortants non pertinents pour la page est une technique normale
  • 22. Home Verticales Produits / ROI LE MAILLAGE INTERNE en JS CLOACKIN IS A CRIME ??? Soyez un bon développeur JS, pour conserver l’UX du mega menu et réduire le code HTML lu par le bot NON, LE SILOING N’EST PAS DU COCON SEMANT… Une navigation complète reproduite sur toutes les pages du site est contre-performant ! Les impacts : - Sémantique de la page diffuse - Page Rank interne trop dilué - On ne pousse pas assez les Top Catégories UX conservée ! User first !
  • 23. Cloaking* is not a crime * Servir du code source different au bot et aux utilisateurs – Dynamic Serving – à la condition que le rendering du code JS par le bot soit equivalent au contenu vu par le bot HTML Actuellement, il est difficile de traiter JavaScript, et tous les robots d'exploration des moteurs de recherche ne sont pas en mesure de le traiter correctement ou immédiatement. Nous espérons que ce problème pourra être résolu à l'avenir. En attendant, nous vous recommandons une solution de rechange : l'affichage dynamique, qui consiste à basculer entre un contenu affiché côté client et un contenu préaffiché pour des user-agents spécifiques.
  • 24. Profiter des updates WEBPerf Lazy Loading Components Nous utilisons beaucoup de composants React dans nos applications. Nous les incluons dans notre paquet JavaScript principal (app.js) ou dans un des paquets JavaScript de la page. Parfois, certains de ces composants sont assez gros. Si un composant est utilisé dans presque toutes les pages, il est inclus dans notre pack principal JavaScript. Mais nous pouvons charger un composant seulement quand c'est nécessaire, cela réduira considérablement le paquet d'applications initial, et cela aidera notre application à charger plus rapidement.
  • 25. Update les composants JS de son architecture La dette technique peut être comparée à la dette monétaire Si elle n'est pas remboursée, elle peut accumuler des "intérêts", ce qui rend plus difficile la mise en œuvre ultérieure de changements Update NEXT JS La dette technique non traitée augmente l'entropie logicielle
  • 26. Le HACK JS Il fallait être présent à la conf pour le connaitre
  • 27. Strapi & Gatsby les magnifiques
  • 28. JS bootstrap : Efficacité et réalité Strapi Strapi permet de bootsptraper une base de donnée, un backoffice et une interface sécurisée modulable et qui s’interface avec Gatsby Monter un backoffice en 3 lignes de codes Lors du build final, Gatsby va créer un site complétement static depuis le code React/GraphQl Un framework React / GraphQL qui sera static en prod
  • 29. JS et SEO HOW TO Pousser la techno au max des optimisations SEO Il existe 1000 façon de coder, seules quelqu’unes fontionnenent en SEO ! Hacker Maitriser les technologies utilisées Le recrutement de qualité doit être une priorité Qualité Multiplier les bonnes actions Faire confiance aux experts, faire une veille de qualité, ne pas se reposer sur ses aquis Perfect is better than Done Donner à Google ce qu’il attend Code HTML (SSR), EAT, nouvelles techno, comprendre les mechanismes des bots Test & Learn
  • 30. Recrutement Si vcous voulez intégrer une Startup qui a le vent en poupe et ou on s’éclate ! TRANSPARENCE1 PERFORMANCE2 ESPRIT D’EQUIPE3 BIENVEILLANCE4
  • 32. MerciSi vous avez des questions !