SlideShare une entreprise Scribd logo
1  sur  31
@myriamjessier 🐙
SEO & JS
MODERNE
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👩🚀
LE SEO :
c’est toutes les activités entreprises pour
améliorer la visibilité organique d’un site
sur les moteurs de recherche.
@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
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 🐙
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 🐙
“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...
@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.
“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
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 🐙
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 🐙
@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
@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
@myriamjessier 🐙
“
DEPUIS MAI GOOGLE BOT EST À JOUR !
▫ ES6
▫ IntersectionObserver pour le lazy-loading
▫ APIs pour Web Components v1
▫ 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 🐙
JE VOUS PRÉSENTE JULIAN
JE VOUS PRÉSENTE JULIAN
@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
@myriamjessier 🐙
18
REACT : HELMET
@myriamjessier 🐙
19
ANGULAR : TITLE & META SERVICES
@myriamjessier 🐙
20
VUE.JS : VUE-META
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
@myriamjessier 🐙
POURQUOI ? NON MAIS POURQUOI ?
@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
▫ 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
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
💥 💥
💥 💥
▫ 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
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
QUELQUES OUTILS
▫ GTMetrix
▫ Pingdom
▫ Google Search Console
▫ Sitebulb
▫ Screaming Frog
▫ Lighthouse
▫ Web Dev Toolbar
28
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 !
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
“
MERCI
MERCIBEAUCOUP!
MERCIBEAUCOUP!

Contenu connexe

Tendances

Seo (Search Engine Optimization) Référencement naturel
Seo (Search Engine Optimization) Référencement naturel Seo (Search Engine Optimization) Référencement naturel
Seo (Search Engine Optimization) Référencement naturel Soukaina EL HAYOUNI
 
Inbound Marketing : quels obstacles avons-nous franchis pour générer +40% de ...
Inbound Marketing : quels obstacles avons-nous franchis pour générer +40% de ...Inbound Marketing : quels obstacles avons-nous franchis pour générer +40% de ...
Inbound Marketing : quels obstacles avons-nous franchis pour générer +40% de ...Chris Demarle
 
Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018Aymen Loukil
 
Google AMP 1 an après : quel bilan, quelles perspectives ?
Google AMP 1 an après : quel bilan, quelles perspectives ?Google AMP 1 an après : quel bilan, quelles perspectives ?
Google AMP 1 an après : quel bilan, quelles perspectives ?Virginie Clève - largow ☕️
 
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
 
Netlinking - Quelles stratégies gagnantes ont utilisées ces SEO ?
Netlinking - Quelles stratégies gagnantes ont utilisées ces SEO ?Netlinking - Quelles stratégies gagnantes ont utilisées ces SEO ?
Netlinking - Quelles stratégies gagnantes ont utilisées ces SEO ?Reputation VIP
 
SEO : 10 clés pour réussir en 2019 et booster vos audiences
SEO : 10 clés pour réussir en 2019 et booster vos audiencesSEO : 10 clés pour réussir en 2019 et booster vos audiences
SEO : 10 clés pour réussir en 2019 et booster vos audiencesVirginie Clève - largow ☕️
 
Migration seo - astuces techniques pour améliorer votre trafic
Migration seo - astuces techniques pour améliorer votre traficMigration seo - astuces techniques pour améliorer votre trafic
Migration seo - astuces techniques pour améliorer votre traficAymeric Bouillat
 
E-commerce et référencement : comment disposer d’un site en tête de liste sur...
E-commerce et référencement : comment disposer d’un site en tête de liste sur...E-commerce et référencement : comment disposer d’un site en tête de liste sur...
E-commerce et référencement : comment disposer d’un site en tête de liste sur...Keeg-seo
 
Réussir ses landing pages
Réussir ses landing pagesRéussir ses landing pages
Réussir ses landing pagesLVLUP
 
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
 
Content marketing : quelles stratégies pour le SEO en 2018 ?
Content marketing : quelles stratégies pour le SEO en 2018 ?Content marketing : quelles stratégies pour le SEO en 2018 ?
Content marketing : quelles stratégies pour le SEO en 2018 ?RESONEO
 
Introduction au SEO - Référencement Naturel en 2020
Introduction au SEO - Référencement Naturel en 2020Introduction au SEO - Référencement Naturel en 2020
Introduction au SEO - Référencement Naturel en 2020Olivier Perbet
 
La casa de SEO : les questions à se poser pour le casse SEO parfait
La casa de SEO : les questions à se poser pour le casse SEO parfaitLa casa de SEO : les questions à se poser pour le casse SEO parfait
La casa de SEO : les questions à se poser pour le casse SEO parfaitAymeric Bouillat
 
Choses a faire et ne pas faire en référencement international
Choses a faire et ne pas faire en référencement international Choses a faire et ne pas faire en référencement international
Choses a faire et ne pas faire en référencement international Julien Berard
 
SEO Camp Day Lorraine 2022 par Dan Bernier sur une étude de cas d’une campagn...
SEO Camp Day Lorraine 2022 par Dan Bernier sur une étude de cas d’une campagn...SEO Camp Day Lorraine 2022 par Dan Bernier sur une étude de cas d’une campagn...
SEO Camp Day Lorraine 2022 par Dan Bernier sur une étude de cas d’une campagn...Dan Bernier
 
AMP, le nouveau cheval de Troie de Google pour un web mobile instantané
AMP, le nouveau cheval de Troie de Google pour un web mobile instantanéAMP, le nouveau cheval de Troie de Google pour un web mobile instantané
AMP, le nouveau cheval de Troie de Google pour un web mobile instantanésemrush_webinars
 
Etude de la position 0 (Featured Snippet) sur Google
Etude de la position 0 (Featured Snippet) sur GoogleEtude de la position 0 (Featured Snippet) sur Google
Etude de la position 0 (Featured Snippet) sur GoogleiProspect France
 

Tendances (18)

Seo (Search Engine Optimization) Référencement naturel
Seo (Search Engine Optimization) Référencement naturel Seo (Search Engine Optimization) Référencement naturel
Seo (Search Engine Optimization) Référencement naturel
 
Inbound Marketing : quels obstacles avons-nous franchis pour générer +40% de ...
Inbound Marketing : quels obstacles avons-nous franchis pour générer +40% de ...Inbound Marketing : quels obstacles avons-nous franchis pour générer +40% de ...
Inbound Marketing : quels obstacles avons-nous franchis pour générer +40% de ...
 
Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018
 
Google AMP 1 an après : quel bilan, quelles perspectives ?
Google AMP 1 an après : quel bilan, quelles perspectives ?Google AMP 1 an après : quel bilan, quelles perspectives ?
Google AMP 1 an après : quel bilan, quelles perspectives ?
 
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...
 
Netlinking - Quelles stratégies gagnantes ont utilisées ces SEO ?
Netlinking - Quelles stratégies gagnantes ont utilisées ces SEO ?Netlinking - Quelles stratégies gagnantes ont utilisées ces SEO ?
Netlinking - Quelles stratégies gagnantes ont utilisées ces SEO ?
 
SEO : 10 clés pour réussir en 2019 et booster vos audiences
SEO : 10 clés pour réussir en 2019 et booster vos audiencesSEO : 10 clés pour réussir en 2019 et booster vos audiences
SEO : 10 clés pour réussir en 2019 et booster vos audiences
 
Migration seo - astuces techniques pour améliorer votre trafic
Migration seo - astuces techniques pour améliorer votre traficMigration seo - astuces techniques pour améliorer votre trafic
Migration seo - astuces techniques pour améliorer votre trafic
 
E-commerce et référencement : comment disposer d’un site en tête de liste sur...
E-commerce et référencement : comment disposer d’un site en tête de liste sur...E-commerce et référencement : comment disposer d’un site en tête de liste sur...
E-commerce et référencement : comment disposer d’un site en tête de liste sur...
 
Réussir ses landing pages
Réussir ses landing pagesRéussir ses landing pages
Réussir ses landing pages
 
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...
 
Content marketing : quelles stratégies pour le SEO en 2018 ?
Content marketing : quelles stratégies pour le SEO en 2018 ?Content marketing : quelles stratégies pour le SEO en 2018 ?
Content marketing : quelles stratégies pour le SEO en 2018 ?
 
Introduction au SEO - Référencement Naturel en 2020
Introduction au SEO - Référencement Naturel en 2020Introduction au SEO - Référencement Naturel en 2020
Introduction au SEO - Référencement Naturel en 2020
 
La casa de SEO : les questions à se poser pour le casse SEO parfait
La casa de SEO : les questions à se poser pour le casse SEO parfaitLa casa de SEO : les questions à se poser pour le casse SEO parfait
La casa de SEO : les questions à se poser pour le casse SEO parfait
 
Choses a faire et ne pas faire en référencement international
Choses a faire et ne pas faire en référencement international Choses a faire et ne pas faire en référencement international
Choses a faire et ne pas faire en référencement international
 
SEO Camp Day Lorraine 2022 par Dan Bernier sur une étude de cas d’une campagn...
SEO Camp Day Lorraine 2022 par Dan Bernier sur une étude de cas d’une campagn...SEO Camp Day Lorraine 2022 par Dan Bernier sur une étude de cas d’une campagn...
SEO Camp Day Lorraine 2022 par Dan Bernier sur une étude de cas d’une campagn...
 
AMP, le nouveau cheval de Troie de Google pour un web mobile instantané
AMP, le nouveau cheval de Troie de Google pour un web mobile instantanéAMP, le nouveau cheval de Troie de Google pour un web mobile instantané
AMP, le nouveau cheval de Troie de Google pour un web mobile instantané
 
Etude de la position 0 (Featured Snippet) sur Google
Etude de la position 0 (Featured Snippet) sur GoogleEtude de la position 0 (Featured Snippet) sur Google
Etude de la position 0 (Featured Snippet) sur Google
 

Similaire à WAQ 2019 JS Frameworks et SEO

Edge SEO & Cloud SEO : Comment faire du SEO dans le cloud quand tout le reste...
Edge SEO & Cloud SEO : Comment faire du SEO dans le cloud quand tout le reste...Edge SEO & Cloud SEO : Comment faire du SEO dans le cloud quand tout le reste...
Edge SEO & Cloud SEO : Comment faire du SEO dans le cloud quand tout le reste...Fasterize
 
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échouéLe Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échouéPhilippe YONNET
 
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
 
Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?Madeline Pinthon
 
Seo camp day lorraine 2018 - Nancy gregory ambroise
Seo camp day lorraine 2018  - Nancy gregory ambroiseSeo camp day lorraine 2018  - Nancy gregory ambroise
Seo camp day lorraine 2018 - Nancy gregory ambroiseGrégory Ambroise
 
Seo 10 clés pour plaire à Google
Seo   10 clés pour plaire à GoogleSeo   10 clés pour plaire à Google
Seo 10 clés pour plaire à GoogleKeyweo
 
Choisir une solution e commerce compatible seo : quelle plateforme vous perme...
Choisir une solution e commerce compatible seo : quelle plateforme vous perme...Choisir une solution e commerce compatible seo : quelle plateforme vous perme...
Choisir une solution e commerce compatible seo : quelle plateforme vous perme...Philippe YONNET
 
Construire une stratégie de référencement
Construire une stratégie de référencementConstruire une stratégie de référencement
Construire une stratégie de référencementLionel Miraton
 
Seocamp Bayonne - JS et SEO
Seocamp  Bayonne - JS et SEOSeocamp  Bayonne - JS et SEO
Seocamp Bayonne - JS et SEOErlé Alberton
 
10 optimisations SEO d’une page web 🔍 - Avec Webmedia.pdf
10 optimisations SEO d’une page web 🔍 - Avec Webmedia.pdf10 optimisations SEO d’une page web 🔍 - Avec Webmedia.pdf
10 optimisations SEO d’une page web 🔍 - Avec Webmedia.pdfJulien Dereumaux
 
Construire une stratégie de référencement
Construire une stratégie de référencementConstruire une stratégie de référencement
Construire une stratégie de référencementLionel Miraton
 
Référencement avec Joomla - SEO Camp
Référencement avec Joomla - SEO CampRéférencement avec Joomla - SEO Camp
Référencement avec Joomla - SEO CampSEO CAMP
 
Techniques SEO qui marchent en 2019 - Emmanuel De Vauxmoret - SEOCamp'us Pari...
Techniques SEO qui marchent en 2019 - Emmanuel De Vauxmoret - SEOCamp'us Pari...Techniques SEO qui marchent en 2019 - Emmanuel De Vauxmoret - SEOCamp'us Pari...
Techniques SEO qui marchent en 2019 - Emmanuel De Vauxmoret - SEOCamp'us Pari...SEO CAMP
 
Les Bonnes Pratiques Pour Avoir Un Site Web Efficace
Les Bonnes Pratiques Pour Avoir Un Site Web EfficaceLes Bonnes Pratiques Pour Avoir Un Site Web Efficace
Les Bonnes Pratiques Pour Avoir Un Site Web EfficaceMarine Tranquard
 
BLACKHAT-PBN Alan Cladx – CEO Investoweb
BLACKHAT-PBN   Alan Cladx – CEO InvestowebBLACKHAT-PBN   Alan Cladx – CEO Investoweb
BLACKHAT-PBN Alan Cladx – CEO InvestowebTuni' SEO
 
Les mythes et légendes du SEO - WebIsland Nantes 2022.pdf
Les mythes et légendes du SEO - WebIsland Nantes 2022.pdfLes mythes et légendes du SEO - WebIsland Nantes 2022.pdf
Les mythes et légendes du SEO - WebIsland Nantes 2022.pdfNicolas AUDEMAR
 
Conduire un audit de referencement naturel (SEO)
Conduire un audit de referencement naturel (SEO)Conduire un audit de referencement naturel (SEO)
Conduire un audit de referencement naturel (SEO)Comsatis
 
JCW2012 - Référencement en 2012
JCW2012 - Référencement en 2012JCW2012 - Référencement en 2012
JCW2012 - Référencement en 2012Woptimo
 

Similaire à WAQ 2019 JS Frameworks et SEO (20)

Edge SEO & Cloud SEO : Comment faire du SEO dans le cloud quand tout le reste...
Edge SEO & Cloud SEO : Comment faire du SEO dans le cloud quand tout le reste...Edge SEO & Cloud SEO : Comment faire du SEO dans le cloud quand tout le reste...
Edge SEO & Cloud SEO : Comment faire du SEO dans le cloud quand tout le reste...
 
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échouéLe Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
Le Edge SEO : comment faire du SEO dans le Cloud quand tout le reste a échoué
 
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
 
Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?
 
Seo camp day lorraine 2018 - Nancy gregory ambroise
Seo camp day lorraine 2018  - Nancy gregory ambroiseSeo camp day lorraine 2018  - Nancy gregory ambroise
Seo camp day lorraine 2018 - Nancy gregory ambroise
 
Seo 10 clés pour plaire à Google
Seo   10 clés pour plaire à GoogleSeo   10 clés pour plaire à Google
Seo 10 clés pour plaire à Google
 
Choisir une solution e commerce compatible seo : quelle plateforme vous perme...
Choisir une solution e commerce compatible seo : quelle plateforme vous perme...Choisir une solution e commerce compatible seo : quelle plateforme vous perme...
Choisir une solution e commerce compatible seo : quelle plateforme vous perme...
 
SEO Référencement
SEO RéférencementSEO Référencement
SEO Référencement
 
Construire une stratégie de référencement
Construire une stratégie de référencementConstruire une stratégie de référencement
Construire une stratégie de référencement
 
Seocamp Bayonne - JS et SEO
Seocamp  Bayonne - JS et SEOSeocamp  Bayonne - JS et SEO
Seocamp Bayonne - JS et SEO
 
10 optimisations SEO d’une page web 🔍 - Avec Webmedia.pdf
10 optimisations SEO d’une page web 🔍 - Avec Webmedia.pdf10 optimisations SEO d’une page web 🔍 - Avec Webmedia.pdf
10 optimisations SEO d’une page web 🔍 - Avec Webmedia.pdf
 
Construire une stratégie de référencement
Construire une stratégie de référencementConstruire une stratégie de référencement
Construire une stratégie de référencement
 
Référencement avec Joomla - SEO Camp
Référencement avec Joomla - SEO CampRéférencement avec Joomla - SEO Camp
Référencement avec Joomla - SEO Camp
 
Techniques SEO qui marchent en 2019 - Emmanuel De Vauxmoret - SEOCamp'us Pari...
Techniques SEO qui marchent en 2019 - Emmanuel De Vauxmoret - SEOCamp'us Pari...Techniques SEO qui marchent en 2019 - Emmanuel De Vauxmoret - SEOCamp'us Pari...
Techniques SEO qui marchent en 2019 - Emmanuel De Vauxmoret - SEOCamp'us Pari...
 
Les Bonnes Pratiques Pour Avoir Un Site Web Efficace
Les Bonnes Pratiques Pour Avoir Un Site Web EfficaceLes Bonnes Pratiques Pour Avoir Un Site Web Efficace
Les Bonnes Pratiques Pour Avoir Un Site Web Efficace
 
BLACKHAT-PBN Alan Cladx – CEO Investoweb
BLACKHAT-PBN   Alan Cladx – CEO InvestowebBLACKHAT-PBN   Alan Cladx – CEO Investoweb
BLACKHAT-PBN Alan Cladx – CEO Investoweb
 
Meetup e-commerce SEMrush
Meetup e-commerce SEMrushMeetup e-commerce SEMrush
Meetup e-commerce SEMrush
 
Les mythes et légendes du SEO - WebIsland Nantes 2022.pdf
Les mythes et légendes du SEO - WebIsland Nantes 2022.pdfLes mythes et légendes du SEO - WebIsland Nantes 2022.pdf
Les mythes et légendes du SEO - WebIsland Nantes 2022.pdf
 
Conduire un audit de referencement naturel (SEO)
Conduire un audit de referencement naturel (SEO)Conduire un audit de referencement naturel (SEO)
Conduire un audit de referencement naturel (SEO)
 
JCW2012 - Référencement en 2012
JCW2012 - Référencement en 2012JCW2012 - Référencement en 2012
JCW2012 - Référencement en 2012
 

Plus de Myriam Jessier

Fucking with algorithms
Fucking with algorithmsFucking with algorithms
Fucking with algorithmsMyriam Jessier
 
Ux and usability it's no PICNIC
Ux and usability   it's no PICNICUx and usability   it's no PICNIC
Ux and usability it's no PICNICMyriam Jessier
 
UX: internal search for e-commerce
UX: internal search for e-commerceUX: internal search for e-commerce
UX: internal search for e-commerceMyriam Jessier
 
HTML5 for SEO and accessibility in 2016
HTML5 for SEO and accessibility in 2016HTML5 for SEO and accessibility in 2016
HTML5 for SEO and accessibility in 2016Myriam Jessier
 
Ecommerce dev for business needs
Ecommerce dev for business needsEcommerce dev for business needs
Ecommerce dev for business needsMyriam Jessier
 
HTML5 for SEO and Accessibility
HTML5 for SEO and AccessibilityHTML5 for SEO and Accessibility
HTML5 for SEO and AccessibilityMyriam Jessier
 

Plus de Myriam Jessier (8)

Fucking with algorithms
Fucking with algorithmsFucking with algorithms
Fucking with algorithms
 
Improving UX checkout
Improving UX checkoutImproving UX checkout
Improving UX checkout
 
Ux and usability it's no PICNIC
Ux and usability   it's no PICNICUx and usability   it's no PICNIC
Ux and usability it's no PICNIC
 
UX: internal search for e-commerce
UX: internal search for e-commerceUX: internal search for e-commerce
UX: internal search for e-commerce
 
HTML5 for SEO and accessibility in 2016
HTML5 for SEO and accessibility in 2016HTML5 for SEO and accessibility in 2016
HTML5 for SEO and accessibility in 2016
 
SEO pour ETSY
SEO pour ETSYSEO pour ETSY
SEO pour ETSY
 
Ecommerce dev for business needs
Ecommerce dev for business needsEcommerce dev for business needs
Ecommerce dev for business needs
 
HTML5 for SEO and Accessibility
HTML5 for SEO and AccessibilityHTML5 for SEO and Accessibility
HTML5 for SEO and Accessibility
 

WAQ 2019 JS Frameworks et SEO

  • 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
  • 19. @myriamjessier 🐙 19 ANGULAR : TITLE & META SERVICES
  • 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

Notes de l'éditeur

  1. Different typVideo SEO Local SEO Mobile SEO App Store SEO Linkbuilding Content Marketing es of search results
  2. http://backlinko.com/google-ranking-factors
  3. https://www.youtube.com/watch?v=81AK-MGtLLk
  4. Talk about scripts. Talk about tips and tricks. Talk about Google rewriting them.
  5. Talk about scripts. Talk about tips and tricks. Talk about Google rewriting them.
  6. https://reactgo.com/react-seo-helmet/
  7. STOP aux demandes SEO pour obfusquer des liens en JS.
  8. 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
  9. Helmet pour React
  10. 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 !