Comment créer un site mobile compatible seo ? conférence Seocampus

4 863 vues

Publié le

Cette présentation présente les outils disponibles gratuitement pour auditer et analyser la compatibilité mobile de votre site (mobile friendly) ainsi que les outils pour vous aider à rendre votre site compatible avec les smartphones et terminaux mobiles.

0 commentaire
8 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
4 863
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2 041
Actions
Partages
0
Téléchargements
103
Commentaires
0
J’aime
8
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Comment créer un site mobile compatible seo ? conférence Seocampus

  1. 1. Comment créer un site mobile compatible seo UN ENJEU MAJEUR Benoit Chevillot, Divioseo, @beunwa, info@divioseo.fr
  2. 2. • Content, perf, usability, linking • Une annonce google inhabituelle • Une deadline qui approche Evolution des critères de classement 0 14 28 42 56 70 84 Content Perf Usability Linking
  3. 3. • Les évolutions des critères de classement de recherche évoluent, après le critère de linking pur, le contenu (panda) a pris de plus en plus d’importance • Puis la performance est devenu un critère primordial, au même titre que la qualité (voir les guidelines quality raters) et maintenant l’utilisabilité Content, perf, usability, linking
  4. 4. • Le 27 février 2015 google a annoncé officiellement un changement majeur dans son algorithme prévue le 21 avril 2015 : • Apporter des résultats plus adaptés aux utilisateurs mobiles dans le moteur de recherche • Google en remet une couche le 17 mars en annonçant une série de vidéo et webinar destinés à vous aider à passer au mobile : https://plus.google.com/s/%23MobileMadness • Généralement google n’annonce pas ses changements, il faut donc certainement la prendre au sérieux Une annonce inhabituelle
  5. 5. • + de sites mobile-friendly dans les résultats de recherche. • Nous allons étendre notre utilisation du critère de compatibilité mobile pour en faire l'un des critères de positionnement du moteur. Ce changement affectera les résultats de recherche mobiles partout dans le monde et dans toutes les langues, et son impact sera significatif. • + de contenu issu d'applications dans les résultats de recherche • Informations provenant des applications indexées comme critère de positionnement, pour nos utilisateurs connectés et qui ont déjà installé les applications en question sur leur appareil mobile Le 21 avril la donne va changer
  6. 6. • Outils en ligne • Outils navigateurs Verifier la compatibilité mobile
  7. 7. • Outil google : https://www.google.com/webmasters/tools/mobile-friendly/ https://developers.google.com/speed/pagespeed/insights/ • W3C mobile test (outil intégriste) : http://validator.w3.org/mobile/ • Emulateur online : http://www.mobilephoneemulator.com/ • Responsive test online : http://mattkersley.com/responsive/ • Page speed https://developers.google.com/speed/pagespeed/ http://gtmetrix.com/ • Browserstack et compagnie (saucelabs, browserling, mobiletestme, …) Outils en ligne
  8. 8. • Chrome dev tools https://developer.chrome.com/devtools ctrl + shift + i puis clic sur icone mobile • Mode responsive de firefox https://developer.mozilla.org/fr/docs/Outils/Vue_adaptative ctrl + shift + m • Emulateur Iphone (xcode) https://developer.apple.com/library/ios/documentation/IDEs/Conceptu al/iOS_Simulator_Guide/ Open developper tools -> ios simulator • Genymotion (emulateur android) https://www.genymotion.com Ajouter un terminal virtuel -> lancer Outils navigateur et OS
  9. 9. • Guidelines • Quick n Dirty • Optimisations • CMS Améliorer la compatibilité mobile
  10. 10. Si vous avez déjà un site bien optimisé pour le seo vous n’avez que quelques « détails » à régler : • Page speed : TTFB • Les mobiles sont encore plus sensibles aux problématiques de performance et de temps de chargement à cause de leur hardware et leur connectivité limitée (de moins en moins vrais) : limitez les appels réseaux et optimisez vos contenus pour les alleger • Design mobile • N’utilisez pas FLASH (bien que certain navigateurs mobiles le supporte : firefox par exemple) • N’utilisez pas les popups (utilisez les popins responsive au besoin) • Pensez que les utilisateurs ont des gros doigts (mettez de l’air autour de vos zones chaudes) • Keep it stupid simple Guidelines
  11. 11. • Optimisez (encore vos titles et meta description) • L’espace d’affichage restreint des mobiles nécessite de raccourcir encore vos titles et description tout en restant pertinent. • Abusez des micro données • L’espace d’affichage restreint permet de faire sauter aux yeux les rich snippets, profitez en. • Choisissez la technologie adequate • Responsive, dynamic serving, separate url Guidelines
  12. 12. Si vous n’avez ni temps ni budget voici la solution magique : • Utilisez la balise viewport • <meta name="viewport" content="width=device- width, initial-scale=1.0"> Evidement cette solution (utilisée seule) ne règle que les problèmes en apparence mais vous permettra de passer le 21 avril sereinement (ou pas) Quick hack
  13. 13. • Utilisez des typos d’icones : fontawesome, flaticon, icomoon, … • Transformez vos images en sprites quand cela est possible : css.spritegen.com, spritepad, spritizer, … • Concatenez vos script javascript et vos feuilles de style Réduction du nombre de ressources
  14. 14. • Compressez au maximum vos images sans perdre en qualité visuelle, en utilisant les outils adaptés vous pourrez gagner en moyenne 25% sur le poids de vos images : smush.it (devenu imgopt.com), gtmetrix report, riot (logiciel desktop), kraken.io (payant) Optimisation des images
  15. 15. Le but est d’accélérer au maximum l’affichage de la page (en dehors de la problématique TTFB) • Evitez l’accumulation de librairies js hétérogènes • Réduisez la complexité du Document Object Model : KISS Simplification du dom
  16. 16. Les media queries sont un mécanisme css permettant de détecter la configuration d’un terminal et d’adapter la feuille de style délivrée. • Utilisez les media queries pour délivrer un contenu adapté à la taille de l’écran • En utilisant de manière adéquate les css vous pourrez également délivrer des images (en background) adaptées en taille Media queries
  17. 17. Tous les CMS modernes proposent des thèmes et templates responsive, vous pouvez en trouver sur tous les sites ou vous avez l’habitude d’en chercher. http://themeforest.com http://www.elegantthemes.com/ http://www.templatemonster.com Bon courage : la plupart génèrent un code mal optimisé (plusieurs H1, …) Themes responsive pour CMS
  18. 18. • Responsive web design • Dynamic serving • Separate mobile site • Comparaison • Lequel choisir Technologies disponibles
  19. 19. • Le même code html est généré et envoyé aux différents terminaux (mobiles, desktops, tablettes, …) • Utilisation des médias queries pour adapter le design à la taille de l’écran via les feuilles de style. • Gestion du contenu centralisée. • Indexation simplifiée pour les robots. • Pas de redirection basée sur la détection de user agent (sujette à erreur). • https://developers.google.com/webmasters/mobile-sites/mobile- seo/configurations/responsive-design?hl=fr • ATTENTION : pensez votre contenu pour le mobile en premier (mobile first), vous n’aurez ainsi aucun problème pour adapter votre design aux version desktop. Responsive web design
  20. 20. • Le code html, css et js généré est différent en fonction des terminaux connectés. • Les urls restent les mêmes quelque soit le terminal • La détection du terminal se base sur le user agent, le serveur DOIT RENVOYER une entête http « vary » qui permet aux robots d’êtres informés que le contenu varie selon le user agent et ainsi d’afficher la bonne version de cache par exemple. • Attention aux erreurs lors de la détection des user agent : Il ne doit pas rechercher Googlebot de manière spécifique. Tous les user-agents Googlebot sont considérés comme des appareils mobiles spécifiques. Vous devez traiter ces user-agents Googlebot de la même manière que ces appareils. Dynamic serving
  21. 21. • Les terminaux sont redirigés via http vers des urls distinctes en fonction de leur configuration, un code html spécifique est généré sur ces urls. • Utilisation des balise rel=alternate et rel=canonical sur chaque page et dans le sitemap. rel=alternate sur la version desktop rell=canonical sur la version mobile • Attention aux erreurs lors de la détection des user agent : Il ne doit pas rechercher Googlebot de manière spécifique. Tous les user-agents Googlebot sont considérés comme des appareils mobiles spécifiques. Vous devez traiter ces user-agents Googlebot de la même manière que ces appareils. • Gestion du contenu complexifiée Separate mobile website
  22. 22. Comparaison Configuration Mêmes urls ? Même code HTML Responsive Web Design Dynamic serving Separate mobile website
  23. 23. • A moins que vous n’ayez pas le choix et que vous héritiez d’une version mobile de votre site avec des urls distinctes je vous conseille d’opter pour la version responsive design qui est la plus simple à gérer et à mettre en place, elle évite également les erreurs potentielles de redirection et de balise canonical mal configurés. • La version Dynamic serving demande un peu plus de setup mais va permettre de servir une version « sur mesure » pour les mobiles (javascript et médias adaptés) Lequel choisir
  24. 24. • Lisez les guidelines • Testez • Faites appel à un pro • Choisissez la techno adaptée à votre cas de figure • Venez au TEKNSEO le 13 JUIN à LYON : http://teknseo.com Conclusion oit Chevillot, Divioseo, @beunwa, info@diviose

×