Compatibilité mobile : nouveau critère de référencement sur Google

Depuis le 21 avril 2015, Google prend en compte la compatibilité mobile des sites internet comme facteur de référencement. Êtes-vous bien préparé ? Voici comment vérifier que votre site est “mobile-friendly” selon les critères de Google  et comment agir efficacement.

Compatibilité mobile : ce qu’en dit Google

Publiée en février dernier sur le Webmaster Central Blog de Google, l’annonce est pour le moins explicite :

A partir du 21 avril, nous allons étendre notre utilisation de la compatibilité mobile pour en faire un critère de positionnement. Ce changement affectera les recherches mobiles dans toutes les langues partout dans le monde. L’impact sur les résultats de recherche sera significatif.

Ce facteur algorithmique ne concerne pas les recherches sur ordinateur de bureau ou portable.

Cette mise à jour de Google n’aura d’impact que sur les résultats de recherche effectuées sur smartphone ou tablette.

Sachez enfin que la compatibilité mobile est vérifiée page par page. L’impact négatif sur la visibilité de votre site pourra donc être granulaire. Par exemple, votre page d’accueil et vos landing pages peuvent être compatibles avec un affichage mobile, mais pas vos pages produits ou d’autres pages profondes. L’effet peut donc se faire ressentir sur votre trafic mobile de longue traine.

Votre site est-il “mobile-friendly” ?

Le label Google “mobile-friendly”

Depuis l’automne 2014, un nouveau marqueur est venu enrichir l’affichage de la méta-description dans les recherches sur smarphone et tablettes : “Site mobile”. Il indique que le site est compatible avec les critères mobiles définis par Google. Il sera peu ou non impacté par la mise à jour du 21 avril.

Pourquoi votre site n’affiche pas ce label ?

• Vous utilisez du flash.
• Les textes sont trop petits, ou les contenus sont illisibles sur mobile, sans zoomer ou scroller de gauche à droite.
• Les liens (surtout dans les menus de navigation) sont trop rapprochés pour pouvoir cliquer correctement à partir d’un écran tactile.

Si vous ne possédez pas ce label mobile, Google a pensé à vous. Plusieurs outils officiels permettent d’évaluer la compatibilité mobile d’un site sur des critères de design (l’affichage et l’ergonomie mobile), ainsi que sur des critères techniques (incompatibilités technologiques, poids des ressources téléchargées par GoogleBot…). Voici les différentes ressources techniques :

Test de compatibilité mobile

Accessible à cette adresse, l’outil officiel de Google permet de réaliser un rapide audit mobile pointant les facteurs bloquants qui empêchent l’affichage du précieux sésame “Site mobile” dans les résultats de recherche.

• Vert : le label est obtenu. Quelques erreurs mineures sont signalées. Notez l’affichage “Responsive Design” adapté aux mobiles.

• Rouge : le site est recalé sur les critères listés ci-dessus. Google renvoie alors aux ressources techniques pour les webmasters.

Test PageSpeed Insight : “light is right”

Qui dit mobile, dit réseau 3G ou 4G souvent défaillant, dont problèmes d’affichage des sites trop lourds. Selon Google, le confort du mobinaute tient donc aussi à la vitesse de chargement des ressources d’un site qui s’affiche au-dessus de la ligne de flottaison. PageSpeed Insight, qui note sur 100 la vitesse du site, permet d’identifier par exemple :

• Les images trop lourdes
• Les codes Javascript (un carrousel d’images animées) et CSS (une feuille de style gérant les menus)
• Le cache navigateur non exploité

L’outil, plutôt bien réalisé, propose dans la foulée les solutions techniques à mettre en place. Pas de panique si les voyants sont au rouge. Une  seconde note sur 100 intitulée “Expérience utilisateur” est souvent verte. Google pinaille un peu pour préserver ses data centers, donc ses propres ressources de traitement des données.

Google Webmaster Tools : menu “Ergonomie mobile”

Depuis fin 2014, Google Webmaster Tools affiche un nouveau rapport accessible depuis la rubrique “Trafic de recherche”, intitulé “Ergonomie mobile” et listant une série d’erreurs techniques et ergonomiques.

Début 2015, Google envoit un message alarmant aux webmasters des sites non compatibles mobile :

Nos systèmes ont testé XX pages de votre site et ont découvert que XX % d’entre elles contiennent des erreurs majeures d’ergonomie mobile (…). Ces pages ne seront pas considérées comme mobile-friendly (adaptées aux mobiles) dans la recherche Google, et seront affichées et classées en conséquence pour les utilisateurs de smartphones.

Ces données sont à transmettre à votre agence web qui réalisera les correctifs requis.

Comment rendre son site “mobile-friendly” ?

Faites le choix d’un site en Responsive Design ou d’un site mobile

Google recommande chaudement l’utilisation d’un site “Responsive Design” : selon l’appareil de l’internaute, l’agencement de la page s’adaptera à un affichage sur ordinateur, tablette, gros et petits écrans de smartphone. L’url de la page reste la même.

• Avantages : les contenus restent les mêmes, aucune redirection vers un contenu mobile n’est nécessaire
• Inconvénient : si votre site n’était pas compatible, vous devrez faire intervenir un designer et un développeur pour mettre votre système aux normes, voir changer de CMS si votre site est trop ancien.

Crédit : Stéphanie Walter –  CC BY-SA 3.0

Il est aussi possible de créer un site mobile dédié pour les visiteurs détectés comme utilisant un mobile. Par exemple : m.monsite.fr/produits/détail.

• Avantages : peu, sauf si le site est adapté aux internautes recherchant une information précise dans un contexte de mobilité (hébergements ou activités touristiques , services locaux, annuaires…).
• Inconvénients : les redirections des pages classiques vers les pages mobiles doivent être bien effectuées pour que l’internaute arrive sur le contenu qu’il recherche. Il est ensuite long et fastidieux de dupliquer à l’identique pour les mobiles les contenus web de toutes ses pages (textes, images, vidéos, formulaires…). Enfin, l’expérience utilisateur peut être décevante si vos concurrents ont choisi l’option Responsive Design.

Mettez en place les bonnes pratiques de compatibilité mobile

• Assurez vous que GoogleBot puisse crawler les ressources affichées au-dessus de la ligne de flottaison (JavaScript, CSS, images…)
• Adaptez le design de vos menus et de vos boutons aux usages tactiles : il n’existe rien de pire pour un utilisateur de tablette ou de smartphone que de ne pas pouvoir déployer un menu déroulant ou toucher “Annulez” plutôt que “Envoyer”.
• Banissez toute technologie obsolète (Flash) en adoptant le standard HTML5
• Adaptez et redimentionnez vos contenus aux différentes tailles d’affichage (pour les sites Responsive) en n’omettant la bonne implémentation de la balise viewport dans la section <head> de vos pages :  <meta name="viewport" content="width=device-width, initial-scale=1.0">
• Opimisez de chargement des pages : limitez l’usage de ressources JavaScript, différez leur chargement ou intégrez les directement dans le code HTML, utilisez des vidéos encapsulées en HTM5 plutôt qu’un lecteur vidéo propriétaire, compressez vos images…
• N’oubliez pas de contrôler et corriger vos erreurs 404 sur mobile si votre site n’est pas compatible Responsive Design. Elles peuvent en effet différer des erreurs 404 sur ordinateur (Google Webmaster Tools > Exploration > Erreurs d’exploration > Smartphone/téléphone).

Les outils listés ci-dessus vous seront d’une aide précieuse pour identifier les eventuelles erreurs, puis contrôler la compatibilité mobile de votre site une fois les optimisations réalisées.

Entourez-vous des bons prestataires !

Objectif Papillon a développé plusieurs dizaines de sites internet Responsive Design sous Drupal, WordPress et Prestashop. Nous pouvons donc vous conseiller au mieux et vous accompagner sur les solutions à adopter pour rendre votre site compatible mobile.

En résumé

1. A partir du 21 avril 2015, Google positionnera mieux les sites compatibles mobiles et tablettes dans ses résultats de recherche.
2. Cette évolution ne concerne que les résultats de recherche mobiles., sur lesquels: les sites non compatibles verrons leur ranking, donc leur trafic, baisser.
3. Pour être visible dans les résultats mobiles, la solutions consiste à se doter d’un site Responsive Design, ou d’un site mobile classique, en fonction des besoins précis des utilisateurs..