Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

WAQ 2019 JS Frameworks et SEO

73 vues

Publié le

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

Publié dans : Marketing
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

WAQ 2019 JS Frameworks et SEO

  1. 1. @myriamjessier 🐙 SEO & JS MODERNE
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 14. @myriamjessier 🐙 “ DEPUIS MAI GOOGLE BOT EST À JOUR ! ▫ ES6 ▫ IntersectionObserver pour le lazy-loading ▫ APIs pour Web Components v1
  15. 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. 16. JE VOUS PRÉSENTE JULIAN JE VOUS PRÉSENTE JULIAN
  17. 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. 18. @myriamjessier 🐙 18 REACT : HELMET
  19. 19. @myriamjessier 🐙 19 ANGULAR : TITLE & META SERVICES
  20. 20. @myriamjessier 🐙 20 VUE.JS : VUE-META
  21. 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. 22. @myriamjessier 🐙 POURQUOI ? NON MAIS POURQUOI ?
  23. 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. 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. 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. 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. 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. 28. QUELQUES OUTILS ▫ GTMetrix ▫ Pingdom ▫ Google Search Console ▫ Sitebulb ▫ Screaming Frog ▫ Lighthouse ▫ Web Dev Toolbar 28
  29. 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. 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. 31. “ MERCI MERCIBEAUCOUP! MERCIBEAUCOUP!

×