Prise en compte site mobile par Google : soyez prêt(e) !

google-mobile-frendly-websites

Par le biais de deux communiqués officiels, Google a annoncé entre octobre et novembre 2014 la prise en compte effective de l’utilisabilité de la version mobile d’un site internet dans son positionnement. Autant dire que proposer une navigation agréable sur smartphones, iphones et tablettes devient un élément à prendre en compte dans sa stratégie SEO. Une bonne occasion de revoir les fondamentaux du référencement mobile.

UNE REPONSE A L’EXPLOSION DE LA NAVIGATION MOBILE

Comme souvent en SEO, la prise en compte de la qualité de la version mobile d’un site web dans l’algorithme de Google vise une amélioration de l’expérience utilisateur. Un consommateur satisfait en valant deux (voire beaucoup plus ?), un internaute satisfait de sa navigation sur smartphone/ tablette sera d’autant plus convaincu par le moteur de recherche lui ayant permis de trouver ce site. CQFD.

Un déploiement mondial des smartphones et tablettes…

Les statistiques fournies par Statcounter pour les douze derniers mois semblent confirmer une augmentation très significative de la navigation mobile (smartphones et tablettes) en 2014. Ce phénomène s’accentue par ailleurs grandement dans la seconde moitié de l’année.

Statcounter nous indique également qu’au 18 septembre 2014, l’utilisation des équipements mobiles au niveau mondiale aurait augmenté de soixante-sept pourcent sur une période de douze mois.

…applicable à la Belgique

La Belgique ne fait pas exception à ce phénomène. Les utilisateurs belges présenteraient ainsi une proportion de plus de 35% de navigation sur mobiles et tablettes, contre un peu plus de 64% de navigation avec un poste/ ordinateur de bureau.

evolution de l'utilisation des différents supports entre octobre 2013 et oct 2014

J’ai pu pour ma part observer cette tendance sur plusieurs sites, avec quelques fois une proportion dépassant les cinquante pourcents (!) de visiteurs mobiles sur certains sites orientés B2C… un chiffre qui m’aurait semblé impensable il y a à peine deux ans.

« Booster » l’expérience utilisateur via Tablette & Smartphone

Google met vraiment le turbo en cette fin d’année en apportant plusieurs modifications importantes consécutives. Le moteur ajoute ainsi de nouvelles fonctionnalités tant à l’interface client de son moteur de recherche qu’au support apporté aux webmasters. Cette évolution dépasse ainsi largement les problématiques de référencement et de positionnement, pour embrasser les notions d’ergonomie et d’expérience utilisateur.

Indication de compatibilité dans les SERPS

Innovation touchant l’affichage des résultats de recherche (SERPS), Google indique désormais la compatibilité présumée des pages web apparaissant dans ses résultats. Le snippet (vignette descriptive dans les SERPS) est désormais complété de la mention « mobile-friendly » lorsque la page indexée remplit les critères de Google.

Au-delà de la prise en compte dans le calcul du positionnement, cet affichage risque d’influencer le taux de clic (CTR) dans les SERPS, les snippets (vignettes présentant les différents sites internet) disposant de la mention « mobile-friendly » étant susceptibles de bénéficier d’un CTR supérieur. Un avantage qui rappelle un peu le « bonus » apporté par les rich snippet très appréciable dans les stratégies de référencement des sites marchands.

Fonctions disponibles via Webmaster Tools

La console Google Webmaster Tools dispose désormais d’une section dédiée
Traffic de recherche >>> Compatibilité mobile

Cette rubrique offre notamment des indicateurs et critères permettant d’améliorer la compatibilité de votre site web tels que :

  • la dimensions de la page web non compatible avec l’affichage sur écran de petite taille
  • le manque de lisibilité de la police (petite taille)
  • les boutons de petite taille
  • la mauvaise répartition des boutons (proximité trop importante)
  • etc.

Outils d’audit et informations disponibles

C’est “bien joli” de demander aux propriétaires de sites web de proposer une version mobile agréable et ergonomique, mais tout le monde n’est pas expert en la matière. Ne vous inquiétez pas, « papa Google » a pensé à tout et propose désormais une rubrique dédiée dans son espace développeurs : https://developers.google.com/webmasters/mobile-sites/

Très complète et accessible à tous (le ton est volontairement grand public et les pages sont même assorties d’un glossaire !), cette plateforme propose entre autre un formulaire pour tester les pages de votre site internet. Sans fournir un véritable audit de votre site, cet outil présente l’avantage d’être simple et rapide d’utilisation :
https://www.google.com/webmasters/tools/mobile-friendly/

De façon plus générale, le test de vitesse de téléchargement de pages web  (ou pagespeed) offre l’option de tester soit la version « classique »/ Ordinateur de bureau ou la version mobile. Cette option donne notamment des indications concernant l’expérience utilisateur : https://developers.google.com/speed/pagespeed/insights/

LES BONNES PRATIQUES

  • Ne pas utiliser de langages informatiques ou de logiciels mal supportés par les smartphones et les tablettes (ex : technologie Flash)
  • Utiliser un texte de taille suffisante pour permettre une lecture confortable sans avoir besoin de zoomer
  • Essayer d’adapter le contenu de façon à ce que l’internaute n’est pas à scroller verticalement ou horizontalement de façon excessive
  • Éloigner les liens entre eux afin de permettre à l’utilisateur de cliquer dessus sans confusion
  • Utiliser des boutons et images de taille adaptée (ni trop grand, ni trop petit)

Comment rendre son site web compatible

Trois options principales s’offrent aux webmestres souhaitant adapter leur site internet à la navigation sur une tablette, un smartphone ou un iphone. En tant que référenceur, j’aurais tendance à recommander l’utilisation du responsive quand cela est possible, à condition de vraiment contrôler le rendu sur les différents appareils.

Version mobile

Créer une version mobile revient à dupliquer son site internet dans une mise en page adaptée à ce support. Cette duplication se matérialise généralement par la création d’un sous-domaine de type www.m.monsite.be.
cette « déclinaison » bénéficie ainsi de ses propres fichiers CSS/ JS, ce qui permet d’adapter sa mise en forme indépendamment de la version affichée sur un ordinateur.

Le déclenchement de la version mobile VS version desktop peut se faire par différents biais notamment :

  • en fonction des propriétés de l’agent utilisateur du navigateur (user agent properties) : ces données sont envoyées par le navigateur dans l’entête http lors de la connexion au serveur du site visité ; c’est cette communication qui va permettre au serveur de s’assurer de la compatibilité site/ navigateur et de servir le contenu adapté. Par exemple dans le cas du navigateur Firefox installé sous Android, ce dernier enverra des informations concernant sa version (ex : Mozilla/5.0) et le système d’exploitation (ex : Linux; Android 4.0.4…)
  • En fonction de la résolution de l’écran : en dessous d’une certaine résolution, le serveur affichera la version mobile du site internet

La création d’une version smartphone d’un site internet présente à mon sens trois intérêts principaux :

  • Une grande flexibilité concernant le résultat final, puisque vous avez la possibilité de retravailler l’organisation du site indépendamment du site principal
  • Une rapidité d’implémentation
  • Un cout réduit comparativement à une refonte du template général du site pour le passer en responsif

Template responsive

Très en vogue depuis deux ans, le design responsif (ou responsive web design, RWD) permet d’adapter dynamiquement et en temps réel le contenu d’une page en fonction de la taille de la fenêtre du navigateur. Un peu à la manière d’une bonne vieille mise en page élastique mais en plus jolie 🙂

Le but du responsive design est d’offrir une qualité de navigation identique à l’utilisateur quel que soit l’appareil utilisé et la dimension de l’écran de ce dernier. Il suppose la mise en place de fonctionnalités spécifiques, notamment l’affichage des éléments de navigation ou les options de défilement (scroll)
L’arrivée du HTML5 et du CSS3 a permis d’améliorer grandement le rendu des templates responsive, en autorisant notamment des animations beaucoup évoluées sans pour autant faire appel aux technologies de type Flash ou Javascript.

En pratique, point de duplication de contenu mais un site unique dont les éléments de style sont conçus afin pouvoir adapter l’affichage en fonction de l’équipement ou de la dimension de l’écran. Ceci permet de résoudre certaines problématique de référencement telles que la bonne indexation du contenu et l’apparition potentielle de problème de contenu dupliqué/ duplicate content.

Création d’une application

Bien qu’elle présente un intérêt certain de par ses fonctionnalités, la création d’une application mobile est généralement pensée en complément d’un site internet et non pas en remplacement. Qui plus est son cout s’avère dissuasif hormis en cas de réel besoin.

Pour aller plus loin

Un commentaire ?