Mobile friendly : un critère bientôt indispensable pour le SEO mobile

Google décerne depuis peu un label « compatible mobile » aux sites dont l’ergonomie mobile est satisfaisante selon lui. Sur son blog, le moteur américain indique qu’il expérimente actuellement la prise en compte de ce critère pour le ranking sur mobile. Pour les sites développés en Responsive Web Design, le simple fait de bloquer l’accès aux CSS et JS peut empêcher Googlebot de comprendre l’optimisation pour les mobiles. Autre point à soigner dès à présent : le temps de chargement des pages mobiles.

Un nouveau label « Mobile friendly » dans les SERP

Le 18 novembre 2014, Google annonçait officiellement dans son blog le déploiement d’un label « mobile friendly » ou « compatible mobile » au cours des prochaines semaines. Ce label s’affichera dans les pages de résultats de recherche sur mobiles, à gauche de la méta description.

mobile-friendlyPlus bas dans son article anglais, Google précise que l’utilisation de la compatibilité mobile comme critère de positionnement est en cours d’expérimentation.

Avec la mention « mobile friendly », Google lance un signal fort pour dire qu’il accorde de plus en plus d’importance à l’ergonomie mobile des sites internet. Est-ce une nouveauté ? Pas vraiment, Google communiquait déjà sur le Responsive Web Design comme solution préférée par Google pour garantir une bonne expérience utilisateur aux mobinautes en 2012.

En mars 2014, lors du SEO Camp’us Paris 2014, Zineb Ait BAhajji – Webmaster Trends Analyst chez Google – nous livrait les recommandations de Google pour créer des sites web mobiles Search Friendly.
Enfin, quand on voit la liste des outils Google disponibles pour mesurer et améliorer la performance des sites mobiles, on peut penser que l’ergonomie et les performances du site mobile ont un impact sur son positionnement dans les pages de résultats en réponse aux requêtes sur dispositif mobile.

Obtenir le label «optimisé mobile » comme certificat d’une ergonomie mobile soignée, s’avère donc aussi important à mon sens que soigner le contenu et la structure d’un site internet.

Comment Google évalue l’ergonomie mobile d’un site internet ?

Rappelons-nous que – une fois le modèle économique du moteur américain mis de côté – Google souhaite donner la meilleure réponse à la requête d’un internaute : non seulement du point de vue du contenu lui-même mais aussi du point de vue de la forme, c’est-à-dire de l’expérience utilisateur. Idéalement, les résultats de recherche mobile devraient donc proposer des sites réellement consultables sur mobiles.

Au travers de son blog officiel, Google indique que pour obtenir l’étiquette « compatible mobile », le site doit respecter les critères suivants :

•    Pas d’utilisation de contenu Flash
•    Affichage des contenus qui s’adapte automatiquement à la taille de l’écran pour éviter que le mobinaute scrolle de gauche à droite ou ait besoin de zoomer pour consulter les contenus
•    Taille de police de caractères qui s’adapte aux fenêtres d’affichage pour être lisible sans besoin de zoomer
•    Suffisamment d’espace entre des hyperliens ou des boutons pour faciliter leur utilisation tactile

Tester l’optimisation mobile d’un site internet

Google met à notre disposition un outil de test de l’ergonomie mobile
La capture d’écran ci-indique le résultat après un premier test sur un site WordPress.

 

Not-mobile-friendly

Quand le test n’est pas concluant, Google indique quatre catégories d’information :

  1. Les raisons pour lesquelles le site n’est pas optimisé pour les mobiles. En l’occurrence dans l’exemple affiché : fenêtre d’affichage plus large que l’écran, liens de navigation trop serrés
  2. Comment Googlebot voit le site en indiquant que le résultat de mesure est peut être faux puisqu’il dépend des informations fournies à Googlebot. Je reviendrai sur ce point capital deux paragraphes plus bas. En effet, si le robot n’a pas accès aux feuilles de styles, comment peut-il comprendre qu’un site est Responsive par exemple.
  3. L’outil de test a détecté que le site était propulsé par WordPress. Google propose alors un lien vers une aide en ligne pour choisir et configurer un thème Responsive Design.
  4. Une invitation à utiliser Google Webmaster Tools

Poursuivre le test d’ergonomie mobile avec Google Webmaster Tools

Faites l’essai avec votre site en cliquant sur « Compatibilité mobile » dans « Trafic de recherche » et vous verrez apparaître les erreurs mesurées par Google.

erreurs-compatibilite-mobile-GWT
Pour en savoir plus sur la façon dont Googlebot voit votre site, rendez-vous à la ligne « Explorer comme Google » dans « Exploration »

exploration-comme-googlebotVous indiquez la page que vous souhaitez explorer comme Googlebot en indiquant Ordinateur ou Mobile (plusieurs types possibles) et vous cliquez sur Explorer et Afficher.

ressources-bloquees-fichier-robotsNon seulement vous obtenez un affichage de la page (plus ou moins paniquant d’ailleurs) mais vous avez surtout la liste des ressources bloquées : feuille de style, script, … et à droite, un hyperlien vers la ligne du fichier robots.txt qui bloque tel qu’illustré dans l’image.
Pourquoi autant d’erreurs alors qu’on a par exemple choisi un thème WordPress Responsive Design.

Parmi les erreurs classiques : bloquer JavaScript, CSS et les fichiers image dans le fichier robots.txt

En bon référenceur, j’ai pris l’habitude d’utiliser le fichier robots.txt pour indiquer aux moteurs quels contenus doivent être indexés et pour bloquer l’accès à d’autres contenus privés ou inutiles pour le référencement naturel. Rassurez-vous, ce n’est évidemment pas ma seule technique, je prends aussi soin d’utiliser <meta name= »robots » content= »noindex, nofollow »> sur les pages bloquées.

Par exemple, avec WordPress, je bloquais l’accès aux fichiers du cœur de WordPress, aux fichiers du thème ou des plugins. Ce faisant, je bloquais l’accès aux CSS, JavaScript autrement dit aux éléments qui permettent justement aux robots de comprendre qu’il y a un thème Responsive Web Design et que le site est optimisé pour les mobiles.

Petit dilemme donc d’autant que certains spécialistes de WordPress nous invitent à bien configurer le fichier robots.txt en bloquant l’accès aux répertoires /wp-content/* et /wp-includes voire même à bloquer spécifiquement l’accès aux fichiers CSS et JS avec des lignes comme : Disallow: /*.css$ et Disallow: /*.js$

Pour ma part, j’ai décidé de franchir le pas et d’autoriser l’accès aux répertoires /wp-content/* et /wp-includes.

En fait, outre les indications explicites disponibles dans Google Webmaster Tools, j’ai retrouvé dans mes notes prises lors de la conférence de Zineb Ait BAhajji évoquée plus haut, un focus sur cette erreur classique de blocage d’accès aux CSS et JavaScript.
En clair, elle attirait déjà notre attention sur le fait d’autoriser l’accès aux robots.

Comment modifier le fichier robots.txt sous WordPress ?

Sous WordPress, vous pouvez facilement modifier le contenu de votre fichier robots.txt avec l’extension Yoast WordPress SEO : dans « Modifier les fichiers »

modification-fichier-robots-yoast-wordpress
Enregistrez les modifications du fichier et le tour est joué.

Refaites le test d’exploration comme GoogleBot dans Google Webmaster Tools et vous verrez alors que tout va bien :

explorer-comme-google-ok-GWT

 

 

 

 

 

 

C’est l’heure de revenir au test de compatibilité mobile. Normalement, vous devriez avoir la satisfaction d’obtenir un résultat vert, comme ça par exemple :

bevisible-est-mobile-friendly

Yes ! mon site est « mobile friendly » mais attention à la vitesse de chargement

Pourquoi j’en parle ?

D’abord parce que l’erreur de pages mobiles lentes à charger est citée dans la liste officielles des erreurs classiques au chapitre SEO Mobile

Ensuite, parce que Google met à notre disposition un outil très complet – Page Speed Insights – pour évaluer la vitesse des sites en version mobile et en version desktop avec recommandations à la clé.

test-vitesse-google-page-speed

En complément de l’outil, Google nous informe d’ailleurs dans son blog à destination des développeurs qu’il convient de viser un temps de chargement inférieur à une seconde pour les contenus au-dessus de la ligne de flottaison.

En enfin, parce que Zineb Ait BAhajji – toujours elle –- a énormément insisté sur cette notion lors de sa conférence en reprenant d’ailleurs la valeur de une seconde comme cible de temps de chargement. A la question de l’auditoire « Est-ce un critère pour le ranking des sites ? ». Elle avait répondu en mars 2014 : « La réponse officielle est non ».

Fin 2014, on peut cependant se poser la question. Mettons-nous un instant à la place de Google qui veut servir la meilleure réponse à ses mobinautes. Serait-ce logique de continuer à présenter des résultats avec des temps de chargement supérieur à 3 secondes par exemple.

Je ne vais pas rentrer dans les détails de temps de latence du réseau, de réponse du serveur, d’application du code, de mise en page et de chargement. Il me semble clair que les performances de vitesse des sites vont entrer (si ce n’est déjà fait) dans l’algorithme de ranking sur mobiles.

Les recommandations Google disponibles avec l’outil Page Speed Insights constituent déjà un bon plan d’actions.

Vous pouvez compléter cette analyse avec l’outil Pingdom Website Speed Test en prenant soin de préciser Amsterdam dans les paramètres (settings) sous peine de faire une simulation de connexion depuis New York ou Dallas.

Essai Pingdom Website Speed Test

Mais là, il y a de quoi rédiger un autre article tellement il y a d’informations disponibles, d’optimisations possibles et de compromis à réaliser.