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.
Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017
Comment créer un site mobile compatible seo ? conférence Seocampus
1. Comment créer
un site mobile
compatible seo
UN ENJEU MAJEUR
Benoit Chevillot, Divioseo, @beunwa,
info@divioseo.fr
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. • 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. • 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. • + 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. • Outils en ligne
• Outils navigateurs
Verifier la compatibilité mobile
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. • 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. • Guidelines
• Quick n Dirty
• Optimisations
• CMS
Améliorer la compatibilité mobile
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. • 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. 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. • 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. • 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. 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. 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. 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. • Responsive web
design
• Dynamic serving
• Separate mobile site
• Comparaison
• Lequel choisir
Technologies disponibles
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. • 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. • 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
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. • 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