Comment créer un site mobile compatible seo UN ENJEU MAJEUR Benoit Chevillot, Divioseo, @beunwa, info@divioseo.fr Content, perf, usability, linking Une annonce google inhabituelle Une deadline qui approche Evolution des critères de classement 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 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 + 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 Outils en ligne Outils navigateurs Verifier la compatibilité mobile 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 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/Conceptual/iOS_Simulator_Guide/ Open developper tools -> ios simulator Genymotion (emulateur android) https://www.genymotion.com Ajouter un terminal virtuel -> lancer Outils navigateur et OS Guidelines Quick n Dirty Optimisations CMS Améliorer la compatibilité mobile 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 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 Si vous n’avez ni temps ni budget voici la solution magique : Utilisez la balise viewport 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 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 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 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 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 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 Responsive web design Dynamic serving Separate mobile site Comparaison Lequel choisir Technologies disponibles 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 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 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 Comparaison Configuration Mêmes urls ? Même code HTML Responsive Web Design Dynamic serving Separate mobile website 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 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 Benoit Chevillot, Divioseo, @beunwa, info@divioseo.fr
Please download to view
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
...

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

by benoit-chevillot

on

Report

Download: 0

Comment: 0

3,146

views

Comments

Description

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

Transcript

Comment créer un site mobile compatible seo UN ENJEU MAJEUR Benoit Chevillot, Divioseo, @beunwa, info@divioseo.fr Content, perf, usability, linking Une annonce google inhabituelle Une deadline qui approche Evolution des critères de classement 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 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 + 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 Outils en ligne Outils navigateurs Verifier la compatibilité mobile 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 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/Conceptual/iOS_Simulator_Guide/ Open developper tools -> ios simulator Genymotion (emulateur android) https://www.genymotion.com Ajouter un terminal virtuel -> lancer Outils navigateur et OS Guidelines Quick n Dirty Optimisations CMS Améliorer la compatibilité mobile 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 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 Si vous n’avez ni temps ni budget voici la solution magique : Utilisez la balise viewport 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 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 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 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 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 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 Responsive web design Dynamic serving Separate mobile site Comparaison Lequel choisir Technologies disponibles 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 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 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 Comparaison Configuration Mêmes urls ? Même code HTML Responsive Web Design Dynamic serving Separate mobile website 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 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 Benoit Chevillot, Divioseo, @beunwa, info@divioseo.fr
Fly UP