Une présentation en date du mois d'avril 2019 sur le JS et le SEO.

1. @myriamjessier 🐙
SEO & JS
MODERNE

2. MYRIAM JESSIER
Consultante à
Montréal...Luxembourg...Paris...et n’importe
quelle autre grande ville où on parle français.
Propriétaire d’un chien saucisse & formatrice
SEO technique.
Adore les algorithmes et les défis techniques
Prochaine formation SEO & WordPress le 12
mai à Montréal 👩🚀
2👩🚀

3. LE SEO :
c’est toutes les activités entreprises pour
améliorer la visibilité organique d’un site
sur les moteurs de recherche.

4. @myriamjessier 🐙
4
ANATOMIE D’UNE PAGE DE
RÉSULTATS GOOGLE
Les résultats varient selon :
▫ Le type d’appareil
▫ L’apprentissage machine
▫ Les contenus (vidéos,
images, etc.)
▫ Le knowledge graph
▫ Les bêtises que vous avez
Googlé avant cette
recherche

5. 200 CRITÈRES D’ÉVALUATION
▫ Ancienneté du domaine
▫ TLD (top level domain name)
▫ Longueur du contenu
▫ Temps de chargement
▫ Liens brisés
▫ Erreurs dans le code
(validation W3C)
5
@myriamjessier 🐙

6. LES 3 GRAND PILIERS DU SEO
Code
Google doit pouvoir
comprendre votre site
Contenu
Il faut fournir du
contenu aligné sur les
utilisateurs
SEO
101 Liens
C’est votre bouche-à-
oreille 2.0
@myriamjessier 🐙

7. “Comment est-ce que Google lit un site ?
Il y 3 phases: crawl, indexation, présentation des résultats.
Les bots savent exécuter du JS mais
des fois, ils prennent votre code
pour de la prose...

8. @myriamjessier 🐙
Le bot se balade à
travers le Web à la
recherche de
contenus pertinents.
Chaque page est
indexée selon son
contenu (texte, image
et code).
Le bot explore les
pages sur le Web
selon un processus
algorithmique.

9. “GOOGLEBOT PEUT LIRE DU JAVASCRIPT.
MAIS IL SE MET EN PLACE UN BACKLOG POUR
DÉTERMINER LES PAGES PRIORITAIRES À TRAITER.
GOOGLE BOT + JS = UN PARCOURS LONG

10. RENDERING EN 2 VAGUES
1. Le bot indexe le contenu
HTML dans un premier
temps après le crawl
2. Les pages avec du JS qui
doivent être rendered sont
ajoutées à une queue qui va
être affichées des jours,
semaines ou mois plus tard.
10
GOOGLE A UN PROCESSUS D’INDEXATION
EN 2 VAGUES.
LES PAGES LENTES À CHARGER IMPACTENT
LE PROCESSUS DE CRAWL DU BOT.
@myriamjessier 🐙

11. CRAWL BUDGET
La notion du crawl budget est similaire à celle
du temps d’attention. Le bot de Google ne va
pas passer une éternité sur votre site.
11
@myriamjessier 🐙

12. @myriamjessier 🐙
“IL FAUT S’ASSURER QUE LES BOTS ET LES
NAVIGATEURS ONT TOUS LES DEUX
DROIT AU MÊME RENDERING.
SI LES LIENS SONT DANS LE HTML
INITIAL, GOOGLE PEUT PASSER À
TRAVERS LA LISTE SANS DÉLAIS.
C’EST POUR ÇA QU’ON 💜 LE SSR
OU LE RENDERING HYBRIDE
💜 LE
RENDERING
SSR

13. @myriamjessier 🐙
Vous pouvez contourner le problème
avec du dynamic rendering pour
spécifier au bot avec un user-agent
de moteur de recherche qu’il a droit
à un rendering à part.
Quelques outils :
▫ Puppeteer
▫ Rendertron
13
ASTUCE

14. @myriamjessier 🐙
“
DEPUIS MAI GOOGLE BOT EST À JOUR !
▫ ES6
▫ IntersectionObserver pour le lazy-loading
▫ APIs pour Web Components v1

15. ▫ Google Cache
▫ Google Mobile Test : Google
vous donne accès à la même
console de debug JS que dans
le navigateur
▫ Fetch & Render dans la Google
Search Console
▫ Rendertron!
▫ Fetch and Render dans
Screaming Frog
▫ Vous pouvez tester avec Ngrok
en local
15
COMMENT TESTER ?
IMPORTANT À RETENIR :
LE SUPPORT POUR ES6 EST TRÈS LIMITÉ
DOCUMENTATION OFFICIELLE @myriamjessier 🐙

16. JE VOUS PRÉSENTE JULIAN
JE VOUS PRÉSENTE JULIAN

17. @myriamjessier 🐙
Meta titles : c’est un élément qui compte pour
le positionnement SEO :
▫ 70 caractères max
▫ Unique à chaque page
▫ - vs |
Meta descriptions : un argument marketing
de taille
▫ 155 caractères max
▫ Unique à chaque page
▫ Encourage au clic
17
META TITLE & META
DESCRIPTION

18. @myriamjessier 🐙
18
REACT : HELMET

19. @myriamjessier 🐙
19
ANGULAR : TITLE & META SERVICES

20. @myriamjessier 🐙
20
VUE.JS : VUE-META

21. 1. STOP aux ancres génériques
qui ne donnent pas de contexte.
2. Onclick est accepté
3. On arrête avec les fragments,
ce n’est pas SEO-friendly
Si tout le monde et sa maman était
capable de faire des liens sur leurs
profils Myspace en 2005...
21
L’ART DE TISSER DES LIENS

22. @myriamjessier 🐙
POURQUOI ? NON MAIS POURQUOI ?

23. @myriamjessier 🐙
▫ 404 vs soft 404
▫ 302 c’est temporaire et ça
passe un peu d’acquis SEO
▫ 301 c’est permanent et ça
conserve le plus d’acquis
SEO
▫ Meta refresh, c’est le MAL
23
ATTENTION AUX HTTP
RESPONSE CODES
301
404
200
302

24. ▫ Formats next gen : JPEG 2000,
JPEG XR, and WebP
▫ Compresser les images : Guetzli
▫ React-image-process NPM
▫ Ngx-image-compress NPM
▫ Ne pas les retailler dans le
navigateur
Il faut un lazy load qui charge les
balises images qui ne sont pas
initialement affichées, sinon Google
a du mal à trouver l’image.
24
IMAGES
DES ATTRIBUTS ALT &
NOMS D’IMAGES
HUMAN-FRIENDLY

25. Un sitemap.xml contient 50K URLs
maximum. Il y a différents types de
sitemap.xml : images, video, news,
pages, etc.
▫ Pour Angular, il y a Angular CLI.
▫ Pour Vue.js c’est Vue-Router.
▫ Pour React, c’est React Router
Sitemap.
SITEMAP.XML & ROBOTS.TXT
💥 💥
💥 💥

26. ▫ Il faut indiquer la langue en
utilisant Href lang
▫ Structure URL
▫ Lang = attribut dans le code
▫ Vous pouvez déclarer cela dans
le sitemap.xml ou bien dans
l’en-tête HTTP
React Helmet
NGX-Meta Frenzy
Vue-Meta
PARDON MY FRENCH
LA PAGE D’ACCUEIL DOIT TOUJOURS AVOIR
UNE LANGUE PAR DÉFAUT POUR LE BOT

27. SEO MOBILE 📞
Google a un index dédié au mobile.
Voici comment prendre ça en charge :
▫ Auditer le pop-ups pour éviter
une pénalité Google.
▫ La vitesse de chargement est un
critère de positionnement.
▫ Évaluer si AMP est pour vous
▫ Valider avec Google mobile-
friendly

28. QUELQUES OUTILS
▫ GTMetrix
▫ Pingdom
▫ Google Search Console
▫ Sitebulb
▫ Screaming Frog
▫ Lighthouse
▫ Web Dev Toolbar
28

29. Voici les bonnes pratiques à respecter :
▫ 115 caractères max
▫ Dans la bonne langue
▫ On remplace les variables et les codes
par des mots lisibles
▫ Pas de majuscules
▫ Pas d’accents
▫ Pas d’emojis
▫ Doit refléter la hiérarchie du site
▫ Pas de D.U.S.T.
29
LES BONNES URLS...RIEN DE
MODERNE MAIS ON EN PARLE !

30. LE PULL...
▫ Il ne va pas avec mes cheveux
▫ Il vient de Forever 21
▫ C’est la seule chose jaune dans
ma garde-robe…
▫ Mais le jaune c’était la couleur
favorite de ma grand-mère…
▫ Et puis on m’a dit qu’il
ressemblait à : “la maison
Gryffindor a fait l’amour à
Mickey mais au Japon”.
30

31. “
MERCI
MERCIBEAUCOUP!
MERCIBEAUCOUP!