Plus que jamais le Javascript est une technologie main stream mais elle a des impacts sur les performances SEO. Au travers de son expérience, Erlé parcours les bonnes pratiques du développement JS moderne en restant en adéquation avec les possibilités de Google pour conserver une crawlabilité et une visibilité naturelle de qualité

1. Performance SEO et JS
…

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

31. Question MUG !

32. MerciSi vous avez des questions !