Comment être 100% mobile-friendly dans les résultats de recherche

Quelle que soit l’industrie dans laquelle nous travaillons, nous voyons les visites à partir de supports mobiles (cellulaire, tablette, phablette,…) en pleine expansion. De ce fait, la nécessité de développer des « sites mobiles » se fait de plus en plus grande, surtout quand on voit le nombre croissant des résultats de recherche optimisés proposant la mention « site mobile ».

Mobile-search results

Alors comment Google analyse t’il ces sites et quels sont les facteurs rendant un site 100% mobile-friendly?

Comment Google voit-il les pages d’un site?

Avant de commencer un travail qui pourrait être d’envergure, il est important de savoir comment Google perçoit un site.

Pour analyser une page, il est possible d’utiliser l’outil de compatibilité mobile de Google. Ce dernier donne des informations détaillées sur une page et les différentes actions que l’on peut mener afin de la rendre « mobile friendly ».

Mobile Compatibility Test

Comment rendre un site mobile-friendly?

Afin d’être 100% mobile-friendly, il existe 3 solutions qui ne sont pas toujours très claires pour l’industrie du marketing numérique :

  • site responsive
  • diffusion dynamique
  • URLs différentes

Le tableau suivant, permet de comprendre les principes de base de chaque solution sur 2 importants éléments d’un point de vue SEO :

  • L’URL
  • Le code
How-do-you-make-a-site-mobile-friendly

On voit donc ainsi que la solution qui engendre le moins de changement est la mise en place d’un site responsive, alors que les URLs distinctes sous-entendent le développement d’une seconde version de votre site.

Un site en responsive design

A-site-using-responsive-design

Un site responsive signifie qu’il s’adapte en tout temps, à tous les supports de navigation, et ce, quelle que soit la taille de l’écran. Les actions ont lieu au niveau du code HTML, et plus précisément au niveau du langage CSS qui va indiquer les dimensions à afficher pour s’adapter à l’écran de navigation.

D’un point de vue technique, il faut que les user-agents Googlebot soient autorisés à analyser tous les éléments de votre site. Ils détecteront ainsi la balise « viewport » qui montrera au navigateur les dimensions à afficher.

Mobile-Viewport-Tag

Si nous reprenons l’exemple de Ben&Jerry’s, nous retrouvons bien cette balise dans le « head » de toutes les pages du site.

Mobile-Meta-Viewport-Tag-Example

Les avantages d’un site responsive sont multiples. Outre le fait qu’il facilite grandement l’expérience utilisateur, il permet à Google d’effectuer une analyse plus approfondie et plus rapide de toutes les pages d’un site facilitant l’indexation de ses pages.

La diffusion dynamique

Dynamic-Serving-Mobile

La diffusion dynamique est une manière différente de s’adresser aux user-agents Googlebot. Ces derniers n’ayant pas trouvé directement dans le code HTML une indication redirigeant vers une version mobile, le serveur envoie au Googlebot une information située dans l’en-tête HTTP « Vary ».

Cette réponse du serveur indique qu’il existe d’autres versions du site sur des formats « prédéfinis » pour les supports mobiles visés. En sommes, si l’on se trouve sur un iPhone, le user agent de ce dernier va recevoir de la part du serveur une réponse lui indiquant qu’une version mobile est disponible.

Exemple de réponse fournit par l’en-tête HTTP Vary :

Dynamic-Serving-Mobile-HTTP-header

Cependant, il n’existe pas toujours une version adaptée à  tous les cellulaires…

Si nous prenons l’exemple d’Air Canada, on voit que le site n’est pas optimisé pour les mobiles quel que soit la taille de l’écran.

Air Canada iPhone 5S vs Galaxy Note2:

Mobile-Not-Optimized-Website-Smartphone

Réponse du serveur d’Air Canada :

Mobile-Not-Optimized-Website-Server

Comme on peut le constater au travers de ces exemples, à l’inverse du responsive qui va proposer une version s’adaptant à la taille du support de navigation, la diffusion dynamique va proposer un format défini se rapprochant des dimensions de la fenêtre mais n’étant pas toujours le plus optimal.

Des URLs différents

Cette dernière solution est beaucoup plus simple à maitriser puisqu’il s’agit ici de créer un site distinct du site initial avec le sous-domaine m. comme on peut le voir sur l’exemple ci-dessous avec le site Michelin canadien.

Résultats de recherche mobile vs desktop :

Mobile-Website-Distinct-URL

Les user-agents Googlebot détectent directement le support sur lequel la recherche est effectuée et peut ainsi proposer dès les résultats de recherche le format de site idéal.

Site optimisé mobile VS desktop:

Mobile-Website-Distinct-URL-Design

Cependant, comme la version mobile est le plus souvent une copie du site desktop il est impératif d’éviter la duplication de contenu et d’intégrer sur :

  • la version desktop une balise rel= « alternate » renvoyant vers la version mobile,
  • la version mobile une balise rel= « canonical» renvoyant vers la version desktop.

En résumé, la balise canonical va informer Google qu’elle est une duplication de la version desktop et la balise alternate d’indiquer au Googlebot où se situe la version mobile de la page.

Corriger les erreurs

Quelle que soit la solution retenue, les erreurs peuvent être fréquentes. Dans le cadre d’une veille sur la compatibilité d’un site, on peut utiliser « Google Webmaster Tools » afin d’identifier les potentielles erreurs.

Dans la section « Compatibilité mobile » du menu « Trafic de recherche », Google Webmaster Tool explique clairement les éléments à corriger tels que : proximité des boutons, taille de la police,…

Résumé

En somme, il n’y a pas une solution meilleure qu’une autre, car chacune comporte ses avantages et ses inconvénients vis-à-vis de son site web et de sa stratégie numérique. L’important et de bien comprendre et maitriser celle que l’on choisit. Toutefois, il est possible que le temps de chargement soit plus long pour un site responsive et puisse indirectement avoir une conséquence sur le SEO.

Ensuite, une page « mobile-friendly » doit avoir un texte lisible sans avoir besoin de zoomer, des boutons et liens facilement cliquables, et tout cela sur des pages s’adaptant à la taille de l’écran. Pour finir, nous recommandons d’éviter d’implémenter des formats non lisibles sur plateforme mobile tel que Flash.c

Caroline Ventezou on linkedin
Caroline Ventezou
Caroline has been evolving in the digital marketing field for many years. Before she joined Mediative's team in Montreal as Senior SEO Strategist, Caroline worked in different domains such as PPC, social media and content creation.
She gained experience working for global companies, especially in the automotive industry, or for national brands (in tourism, banks, retail,...).
As a geek and open-minded person, she loves to discover new fields of expertise that can broaden her abilities. Her last project focuses on learning different computer codes.