Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Technical seo tips and tricks actionnables 2018

8,427 views

Published on

Conférence sur le SEO technique que j'ai donné au SEO'Campus Paris 2018.

- Performance et temps de chargement
- Crawl et rendu par Googlebot
- HTTPS et sécurité
- Schema.org et implémentation

Published in: Marketing

Technical seo tips and tricks actionnables 2018

  1. 1. 1#seocamp@LoukilAymen SEO Technique : Tips & Tricks Actionnables pour 2018 Aymen Loukil
  2. 2. 2#seocamp@LoukilAymen Aymen Loukil #TechnicalSEO #entrepreneur #semanticweb #speaker #ex-développeur Consultant SEO International https://www.aymen-loukil.com @LoukilAymen
  3. 3. 3#seocamp@LoukilAymen Performance Les must-have Technical SEO 2018 Rendering & Crawl Sécurité Schema.org
  4. 4. 4#seocamp@LoukilAymen #perfmatters
  5. 5. 5#seocamp@LoukilAymen Imaginez.. 30min à la porte du magasin 10min pour pouvoir changer de rayon 7min pour pouvoir toucher un produit
  6. 6. 6#seocamp@LoukilAymen La perception de l’attente 0 100ms 300ms 1000ms 10.000ms Smooth Petit délai Tâche normale Perte de focus Frustration 3s : la conversion chute
  7. 7. 7#seocamp@LoukilAymen Le web est il rapide ? 13s 50% 20s 31s 25% 10% Time To Interactive (Mobile) - Janvier 2018 Source http://beta.httparchive.org/reports/loading-speed
  8. 8. 8#seocamp@LoukilAymen Qu’est ce qui coûte ? Parse Compile ExecuteDownload Réseau Matériel (processeur, mémoire)
  9. 9. 9#seocamp@LoukilAymen “En performance, la taille (du code) compte”
  10. 10. 10#seocamp@LoukilAymen “Le nombre de requêtes compte aussi”
  11. 11. 11#seocamp@LoukilAymen Moyenne des connexions 3G/4G France 14 Mbps Denmark 24.41 Mbps Japan 22 Mbps Belgique 20 Mbps Suisse 18.5 Mbps State of Mobile Networks https://opensignal.com USA 12.5 Mbps
  12. 12. 12#seocamp@LoukilAymen Un peu de réseau Une page web en moyenne : 3.6Mb* 3.6 Mb 14 Mbps = 25s 16s(Japan)
  13. 13. 13#seocamp@LoukilAymen La différence de matériel peut être mortelle https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e Parsing JS : 4s sur un iPhone 8 (800€) Vs 14s sur un Motorolla G4 (200€)
  14. 14. 14#seocamp@LoukilAymen
  15. 15. 15#seocamp@LoukilAymen Vous en avez vraiment besoin ? - CTR ? - Utilisé ? - Faire autrement ? - L’animation vitale ? - AB test ?
  16. 16. 16#seocamp@LoukilAymen Coverage : code non utilisé 50% du code n’est pas utilisé [1.4MB potentiel à gagner]* ctrl+shift+p [win]
  17. 17. 17#seocamp@LoukilAymen Alléger le code Code non exécuté Code exécuté Une revue du code est nécessaire*
  18. 18. 18#seocamp@LoukilAymen Automatiser code coverage https://www.npmjs.com/package/page-coverage - Check systématique - Release - QA
  19. 19. 19#seocamp@LoukilAymen Splitter le code - Uniquement ce qu’il faut / page - On réduit le volume et donc le temps. Sur wordpress regarder : wp_enqueue_script et is_home()
  20. 20. 20#seocamp@LoukilAymen Et les scripts externes ? Third party badges
  21. 21. 21#seocamp@LoukilAymen Bloquer le chargement d’une ressource
  22. 22. 22#seocamp@LoukilAymen Comparer https://developers.google.com Les scripts externes [non maitrisés] peuvent dégrader la performance
  23. 23. 23#seocamp@LoukilAymen Faire autrement, plus light vanilla-js.com 35X plus rapide que jQuery
  24. 24. 24#seocamp@LoukilAymen JS est le plus coûteux des ressources 38 fois plus coûteux qu’un JPEG
  25. 25. 25#seocamp@LoukilAymen Optimiser le chemin critique Donner en priorité ce qui est nécessaire au premier print et la ligne de flottaison CC optimisé CC non optimisé
  26. 26. 26#seocamp@LoukilAymen Les ressources chargées avant le rendu Faites le tri dans les ressources en vert https://www.webpagetest.org/
  27. 27. 27#seocamp@LoukilAymen JavaScript est une ressource bloquante Pour chaque code JS, le navigateur bloque la construction de la page (rendu)=> ++délai <script src="app.js" async></script> JS essentiels en Async (exécution en fin de téléchargement) JS non-essentiels en Defer (exécution en fin de parsing du document) <script src="app.js" defer></script>
  28. 28. 28#seocamp@LoukilAymen Async, Defer
  29. 29. 29#seocamp@LoukilAymen CSS est une ressource bloquante Utilisez la propriété media 1- <link href="style.css" rel="stylesheet"> Bloque le rendu 2- <link href="style.css" rel="stylesheet" media="all"> Bloque le rendu 3- <link href="portrait.css" rel="stylesheet" media="orientation:portrait"> Ne bloque pas 4- <link href="print.css" rel="stylesheet" media="print"> Ne bloque pas le rendu
  30. 30. 30#seocamp@LoukilAymen Prioriser le CSS critique 1. Installer CasperJS : http://casperjs.org/ (Node.js) 2. Télécharger ce script : https://github.com/ibrennan/automation/tree/master/content/critical-css 3. >casperjs app.js pour l’exécuter 4. Répondre aux questions 5. Copier le code CSS sorti et le coller en inline avant l’inclusion des fichiers de style
  31. 31. 31#seocamp@LoukilAymen Mettre en place AMP = Rapide ?
  32. 32. 32#seocamp@LoukilAymen Page web
  33. 33. 33#seocamp@LoukilAymen Avec AMP
  34. 34. 34#seocamp@LoukilAymen AMP n’est rapide qu’à partir de la SERP
  35. 35. 35#seocamp@LoukilAymen Pardon ?
  36. 36. 36#seocamp@LoukilAymen Utilisez les “Resource Hints” https://w3c.github.io/resource-hints/
  37. 37. 37#seocamp@LoukilAymen rel=”prefetch”
  38. 38. 38#seocamp@LoukilAymen Quelle serait la next page ? https://github.com/SamKnows/futurelink
  39. 39. 39#seocamp@LoukilAymen DNS ASAP
  40. 40. 40#seocamp@LoukilAymen Passez en HTTP/2 HTTP/1.1 HTTP/2 Open Close Open Close T T Benefits : ● Multiplexing ● Header compression ● Better prioritization ● Server push
  41. 41. 41#seocamp@LoukilAymen Compression d’images Caesium : https://saerasoft.com/caesium/ - Choisir le pourcentage de compression - Version Desktop - Version CLI 25% d’une image est inutile (HTTPArchive)
  42. 42. 42#seocamp@LoukilAymen Métriques : FP, FCP, FMP, TTI https://developers.google.com/ ça arrive ? c’est utile ? c’est utilisable ?
  43. 43. 43#seocamp@LoukilAymen La console Chrome : your friend
  44. 44. 44#seocamp@LoukilAymen Lighthouse - Outil de diagnostic Score performance > 90 - 5% des top
  45. 45. 45#seocamp@LoukilAymen Automatiser vos rapports https://github.com/GoogleChrome/lighthouse $ npm install -g lighthouse $ lighthouse --perf https://paris.seo-campus.org $ lighthouse --output-path=./report.json --output json
  46. 46. 46#seocamp@LoukilAymen Rendering & Crawl
  47. 47. 47#seocamp@LoukilAymen Et le rendu ? Comment Google voit-il mon site ? - Fetch as Google (Search Console) - Google Cache - Se mettre dans la peau de Google ?
  48. 48. 48#seocamp@LoukilAymen Googlebot M41
  49. 49. 49#seocamp@LoukilAymen Polyfill et Feature detection
  50. 50. 50#seocamp@LoukilAymen Puppeteer : Chrome-Sans-tête https://github.com/GoogleChromeLabs/puppeteer-examples
  51. 51. 51#seocamp@LoukilAymen Détecter des features non supportées par G https://caniuse.com
  52. 52. 52#seocamp@LoukilAymen Headless Chrome Crawler https://github.com/yujiosaka/headless-chrome-crawler
  53. 53. 53#seocamp@LoukilAymen Et le JavaScript ? - Contenu visible ? - Erreurs JS
  54. 54. 54#seocamp@LoukilAymen Détecter des erreurs JS + remote report
  55. 55. 55#seocamp@LoukilAymen Groupe pour JS SEO https://groups.google.com/forum/#!forum/js-sites- wg Groupe Google autour du SEO JS
  56. 56. 56#seocamp@LoukilAymen Dette technique SEO
  57. 57. 57#seocamp@LoukilAymen Harder crawling, complexity @dawnieando
  58. 58. 58#seocamp@LoukilAymen Consistance SEO
  59. 59. 59#seocamp@LoukilAymen Signaux en conflit Canonical = A Hreflang = B Sitemap = B B=>C 301 dev.site.com www.site.com Robots.txt disallow Meta : index, follow
  60. 60. 60#seocamp@LoukilAymen Ce contenu mérite il une URL ? Posez vous la question avant de créer une nouvelle URL sur votre site : - Les tags ? - Les variants de produits ? - Un testimonial ? (3 lignes) - Storelocator listing / items..
  61. 61. 61#seocamp@LoukilAymen Qualité >>> Quantité #noindex #cleaning #lessismore #410Gone #Disallow #Prune
  62. 62. 62#seocamp@LoukilAymen Et le budget de crawl ?
  63. 63. 63#seocamp@LoukilAymen Analysez vos logs ● Les pages crawlées / non crawlées ● L’évolution de l’activité de Googlebot ● Les TOP pages crawlées (souvent des surprises) ● Les pages avec erreurs ● Les pages instables (parfois HTTP 200 parfois en erreur) ● Des pages non intéressantes et souvent crawlées (perte du budget) ● Des ressources gourmandes (css, js, Zip) et pas nécessaires au rendu ? ● Les pages lentes ? ● Les bots qui ne sont pas bienvenues (spam, scrap) ● MFI ? Croiser avec Analytics et d’autres données
  64. 64. 64#seocamp@LoukilAymen Économiser un peu de budget Pages indexées mais pas les plus importantes Ressources .. If-Modified-Since
  65. 65. 65#seocamp@LoukilAymen MFI : L’ordre du contenu
  66. 66. 66#seocamp@LoukilAymen Securité
  67. 67. 67#seocamp@LoukilAymen HTTPS
  68. 68. 68#seocamp@LoukilAymen Chasse au HTTP
  69. 69. 69#seocamp@LoukilAymen Contenus mixtes Tab : Security Tab : Console JS
  70. 70. 70#seocamp@LoukilAymen On va checker à la main toutes les pages !
  71. 71. 71#seocamp@LoukilAymen Reporting des erreurs HTTPS Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://votrEndpointDeReporting.com/report* Ajouter ce header dans vos réponses serveur : JSON
  72. 72. 72#seocamp@LoukilAymen HTTPS Headers https://www.cspisawesome.com/
  73. 73. 73#seocamp@LoukilAymen Utilisez les headers ● Strict-Transport-Security (HSTS) : Browser => Toujours en HTTPS (MiTM attack) ● Content-Security-Policy (CSP)2016 : Quels type de contenus sont autorisés (XSS, vol de données, malware..etc) -> Content-Security-Policy: default-src ‘self’; img-src site1.com site2.com; scripts-src googleapis.com jquery.com ● X-Frame-Options : Ne pas autoriser l’iframing du site (clickjacking) ● X-Content-Type-Options : Détecter un mismatch de type de contenu (malware) https://discuss.httparchive.org/t/adoption-of-http-security-headers-on-the-web/1259
  74. 74. 74#seocamp@LoukilAymen Schema.org
  75. 75. 75#seocamp@LoukilAymen Être Machine-readable, c’est l’opportunité « Schema.org rend ton site plus machine-readable: Compréhensible par Google, Il devine facilement ce que tu y raconte. Il peut donc proposer des résultats mieux formatés et plus adéquats avec le contexte de la recherche. »
  76. 76. 76#seocamp@LoukilAymen Entity first indexation “First part of query analysis is looking for entities” 2016 #SMX
  77. 77. 77#seocamp@LoukilAymen Schema.org n’est pas une mode
  78. 78. 78#seocamp@LoukilAymen Google Images / Product
  79. 79. 79#seocamp@LoukilAymen ItemList
  80. 80. 80#seocamp@LoukilAymen Schema/NewsArticle Schema/NewsArticle Schema/Organization
  81. 81. 81#seocamp@LoukilAymen Maîtrise des informations produits Schema/Product Schema/Car Schema/AggregateRating
  82. 82. 82#seocamp@LoukilAymen Schema/Recipe
  83. 83. 83#seocamp@LoukilAymen Schema/VideoObject Schema/BreadcrumbList Schema/Product Schema/AggregateRating
  84. 84. 84#seocamp@LoukilAymen Schema/Course
  85. 85. 85#seocamp@LoukilAymen JobPosting Schema/JobPosting
  86. 86. 86#seocamp@LoukilAymen LiveBlogPosting https://plus.google.com/u/0/+GoogleDevelopers/posts/UMFfemnynCg
  87. 87. 87#seocamp@LoukilAymen Schema.org/ClaimReview Schema/ClaimReview
  88. 88. 88#seocamp@LoukilAymen Schema.org/Question / acceptedAnswer
  89. 89. 89#seocamp@LoukilAymen Dernière version 3.3 HowTo NewsArticle TouristType, TouristAttraction
  90. 90. 90#seocamp@LoukilAymen Yandex et Schema
  91. 91. 91#seocamp@LoukilAymen Apple et Schema Schema:Name Schema:Price Schema:AggregateRating Schema:Description Schema:reviewCount
  92. 92. 92#seocamp@LoukilAymen Bing supporte enfin le JSON-LD !
  93. 93. 93#seocamp@LoukilAymen Process d’implémentation Schema.org Types definition Playground & test Check & validate Implementation Monitoring
  94. 94. 94#seocamp@LoukilAymen Définition des types Home Editorials E-commerce Store Locator AgendaAuthors Careers
  95. 95. 95#seocamp@LoukilAymen Définition des types Home Editorials E-commerce Store Locator AgendaAuthors Article NewsArticle Blogposting QAPage Person Organization Product Offer AggregrateRating ItemList CheckoutPage LocalBusiness Organization Address Event BusinessEvent SaleEvent MusicEvent …. Careers JobPosting Website Organization SearchAction
  96. 96. 96#seocamp@LoukilAymen Implémentation custom { "@context":"http://schema.org", "@type": "Product", "description": "...", "name": « iPhone 8”, "image":« iphone-8.jpg, "offers": { "@type": "Offer", "price": « 850.00", "priceCurrency": "EUR" } Framework PHP open source API Rest Data Model Schema.org ORM On peut personnaliser / créer des types Basé sur Symfony https://api-platform.com/
  97. 97. 97#seocamp@LoukilAymen Modèle de données sur Schema.org Se baser sur Schema.org pour générer votre modèle de données métier
  98. 98. 98#seocamp@LoukilAymen Tester la #Dev Localhost
  99. 99. 99#seocamp@LoukilAymen Schema.org pour E-commerce Product • Name • Brand • Price • Availability • ItemCondition • Color • gtinX • Logo • Material • Offers • SKU • AdditionalType • IsRelatedTo • IsSimilarTo • isAccessoryOrSparePartFor
  100. 100. 10 0#seocamp@LoukilAymen additionalType et ProductOntology http://www.productontology.org/ ● Permet de donner plus de précision sur l’objet (produit ou autre) ● Se baser sur les classes Wikipédia http://en.wikipedia.org/wiki/Hammer http://www.productontology.org/id/Hammer
  101. 101. 10 1#seocamp@LoukilAymen AdditionalType <script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "Product", "additionalType": "http://www.productontology.org/id/Racing_bicycle", "name": "Moto R1", "offers":{ "@type": "Offer", "availability": "http://schema.org/InStock", "serialNumber": "CONC91000937", … } } </script>
  102. 102. 10 2#seocamp@LoukilAymen GS1 + Schema
  103. 103. 10 3#seocamp@LoukilAymen Agilisez le SEO Transformer l’organisation - Casser les SILOS - Cross-discipline - Spirit de performance - Communication - KPIs - Test & learn
  104. 104. 10 4#seocamp@LoukilAymen Des mois d’attente..
  105. 105. 10 5#seocamp@LoukilAymen Pour éviter ça..
  106. 106. 10 6#seocamp@LoukilAymen Make User Experience great again “Let’s stop chasing the content train and get back to making experiences that perform.” Michael King(ipullrank)
  107. 107. 10 7#seocamp@LoukilAymen Question Mug “Quelle est la ressource hint la plus adaptée pour charger plus rapidement la prochaine page que l’utilisateur va visiter? ”
  108. 108. 10 8#seocamp@LoukilAymen Merci ! Continuons la discussion : @LoukilAymen #TechnicalSEO2018
  109. 109. 10 9 #seocamp MERCI AUX SPONSORS

×