Technical seo tips and tricks actionnables 2018
•
14 j'aime•10,578 vues
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
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (17)
Similaire à Technical seo tips and tricks actionnables 2018
Similaire à Technical seo tips and tricks actionnables 2018 (20)
Plus de Aymen Loukil
Plus de Aymen Loukil (11)
Technical seo tips and tricks actionnables 2018
- 1. 1#seocamp@LoukilAymen SEO Technique : Tips & Tricks Actionnables pour 2018 Aymen Loukil
- 2. 2#seocamp@LoukilAymen Aymen Loukil #TechnicalSEO #entrepreneur #semanticweb #speaker #ex-développeur Consultant SEO International https://www.aymen-loukil.com @LoukilAymen
- 3. 3#seocamp@LoukilAymen Performance Les must-have Technical SEO 2018 Rendering & Crawl Sécurité Schema.org
- 5. 5#seocamp@LoukilAymen Imaginez.. 30min à la porte du magasin 10min pour pouvoir changer de rayon 7min pour pouvoir toucher un produit
- 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#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#seocamp@LoukilAymen Qu’est ce qui coûte ? Parse Compile ExecuteDownload Réseau Matériel (processeur, mémoire)
- 9. 9#seocamp@LoukilAymen “En performance, la taille (du code) compte”
- 10. 10#seocamp@LoukilAymen “Le nombre de requêtes compte aussi”
- 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#seocamp@LoukilAymen Un peu de réseau Une page web en moyenne : 3.6Mb* 3.6 Mb 14 Mbps = 25s 16s(Japan)
- 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€)
- 15. 15#seocamp@LoukilAymen Vous en avez vraiment besoin ? - CTR ? - Utilisé ? - Faire autrement ? - L’animation vitale ? - AB test ?
- 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#seocamp@LoukilAymen Alléger le code Code non exécuté Code exécuté Une revue du code est nécessaire*
- 18. 18#seocamp@LoukilAymen Automatiser code coverage https://www.npmjs.com/package/page-coverage - Check systématique - Release - QA
- 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#seocamp@LoukilAymen Et les scripts externes ? Third party badges
- 21. 21#seocamp@LoukilAymen Bloquer le chargement d’une ressource
- 22. 22#seocamp@LoukilAymen Comparer https://developers.google.com Les scripts externes [non maitrisés] peuvent dégrader la performance
- 23. 23#seocamp@LoukilAymen Faire autrement, plus light vanilla-js.com 35X plus rapide que jQuery
- 24. 24#seocamp@LoukilAymen JS est le plus coûteux des ressources 38 fois plus coûteux qu’un JPEG
- 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#seocamp@LoukilAymen Les ressources chargées avant le rendu Faites le tri dans les ressources en vert https://www.webpagetest.org/
- 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>
- 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#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#seocamp@LoukilAymen Mettre en place AMP = Rapide ?
- 34. 34#seocamp@LoukilAymen AMP n’est rapide qu’à partir de la SERP
- 36. 36#seocamp@LoukilAymen Utilisez les “Resource Hints” https://w3c.github.io/resource-hints/
- 38. 38#seocamp@LoukilAymen Quelle serait la next page ? https://github.com/SamKnows/futurelink
- 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#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#seocamp@LoukilAymen Métriques : FP, FCP, FMP, TTI https://developers.google.com/ ça arrive ? c’est utile ? c’est utilisable ?
- 43. 43#seocamp@LoukilAymen La console Chrome : your friend
- 44. 44#seocamp@LoukilAymen Lighthouse - Outil de diagnostic Score performance > 90 - 5% des top
- 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
- 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 ?
- 49. 49#seocamp@LoukilAymen Polyfill et Feature detection
- 51. 51#seocamp@LoukilAymen Détecter des features non supportées par G https://caniuse.com
- 52. 52#seocamp@LoukilAymen Headless Chrome Crawler https://github.com/yujiosaka/headless-chrome-crawler
- 53. 53#seocamp@LoukilAymen Et le JavaScript ? - Contenu visible ? - Erreurs JS
- 54. 54#seocamp@LoukilAymen Détecter des erreurs JS + remote report
- 55. 55#seocamp@LoukilAymen Groupe pour JS SEO https://groups.google.com/forum/#!forum/js-sites- wg Groupe Google autour du SEO JS
- 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#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#seocamp@LoukilAymen Qualité >>> Quantité #noindex #cleaning #lessismore #410Gone #Disallow #Prune
- 62. 62#seocamp@LoukilAymen Et le budget de crawl ?
- 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#seocamp@LoukilAymen Économiser un peu de budget Pages indexées mais pas les plus importantes Ressources .. If-Modified-Since
- 65. 65#seocamp@LoukilAymen MFI : L’ordre du contenu
- 69. 69#seocamp@LoukilAymen Contenus mixtes Tab : Security Tab : Console JS
- 70. 70#seocamp@LoukilAymen On va checker à la main toutes les pages !
- 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
- 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
- 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#seocamp@LoukilAymen Entity first indexation “First part of query analysis is looking for entities” 2016 #SMX
- 77. 77#seocamp@LoukilAymen Schema.org n’est pas une mode
- 78. 78#seocamp@LoukilAymen Google Images / Product
- 81. 81#seocamp@LoukilAymen Maîtrise des informations produits Schema/Product Schema/Car Schema/AggregateRating
- 89. 89#seocamp@LoukilAymen Dernière version 3.3 HowTo NewsArticle TouristType, TouristAttraction
- 92. 92#seocamp@LoukilAymen Bing supporte enfin le JSON-LD !
- 93. 93#seocamp@LoukilAymen Process d’implémentation Schema.org Types definition Playground & test Check & validate Implementation Monitoring
- 94. 94#seocamp@LoukilAymen Définition des types Home Editorials E-commerce Store Locator AgendaAuthors Careers
- 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#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#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
- 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. 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. 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>
- 103. 10 3#seocamp@LoukilAymen Agilisez le SEO Transformer l’organisation - Casser les SILOS - Cross-discipline - Spirit de performance - Communication - KPIs - Test & learn
- 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. 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. 10 8#seocamp@LoukilAymen Merci ! Continuons la discussion : @LoukilAymen #TechnicalSEO2018