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 🐙
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
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
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
Different typVideo SEO
Local SEO
Mobile SEO
App Store SEO
Linkbuilding
Content Marketing
es of search results
http://backlinko.com/google-ranking-factors
https://www.youtube.com/watch?v=81AK-MGtLLk
Talk about scripts. Talk about tips and tricks. Talk about Google rewriting them.
Talk about scripts. Talk about tips and tricks. Talk about Google rewriting them.
https://reactgo.com/react-seo-helmet/
STOP aux demandes SEO pour obfusquer des liens en JS.
200 - OK
301 - permanent redirect
302 - temporary redirect
403 - forbidden
404 - page doesn’t exist
Une page 404 doit retourner un HTTP status code 404. Sinon Google va quand même flagger cela comme une “soft 404” ou bien une anomalie.
Une 302 est une redirection permanente qui ne prend passe pas autant d’acquis SEO qu’une 301.
500 - server problem
502 - Clouflare
503 - maintenance
Helmet pour React
Quelques consignes à respecter:
Les pop-ups ne peuvent pas faire plus que 15% de l’écran
Pas de pop-up de choix de langue
Certains pop-ups légaux sont permis
Pas de overlay massif !