Qu'est-ce que l'Index Mobile First ?

Selon Médiamétrie, 75 % du temps passé sur internet se fait sur mobile. Face à l'augmentation du nombre de requêtes web sur smartphone, Google a annoncé en novembre 2016, l'apparition du Mobile First Index (MFI).

Concrètement, cela signifie que c'est la version mobile d'un site web qui est crawlée prioritairement par les Google Bots et non plus la version desktop. D'où l'importance pour les entreprises d'avoir un site web adapté à la navigation mobile, si elles souhaitent que les pages de leur site internet se positionnent correctement dans les SERP Google.

Qu'est-ce que le mobile first index ?

Le Mobile Index First est l'algorithme développé par Google pour crawler, puis indexer, les pages de la version mobile d'un site web. Si la version mobile est prioritaire, les pages de la version desktop sont toujours visitées par les robots indexeurs.

Pourquoi avoir créé le Mobile First Index ?

L'une des volontés de Google est d'offrir aux internautes une expérience web positive. Le nombre de recherches sur mobile ayant explosé, puis dépassé le nombre de recherches sur desktop, Google a souhaité adapter son moteur de recherche aux pratiques des usagers.

Si les internautes utilisent plus fréquemment le mobile pour naviguer sur internet, et que ce sont les pages mobiles qui lui sont proposées, il semble plus cohérent de se baser sur la version mobile pour déterminer la pertinence d'une page.

3 modes de compatibilité mobile

Le responsive design 

Le responsive design est une technique de conception de sites web permettant aux pages des sites web de s'afficher correctement, quel que soit le type d'écrans utilisés : ordinateurs, tablettes ou smartphones.

Le principal objectif du responsive design est d'assurer une expérience utilisateur fluide et optimale, indépendamment de la taille de l'écran ou de la résolution. Le design adaptatif ajuste et redimensionne automatiquement le contenu, les images et la mise en page en fonction de la taille de l'écran sur lequel le site est consulté.

Voici quelques éléments clés d'un site web responsive design :

• Grilles flexibles : Les éléments de la page (comme les images et les blocs de contenu) sont disposés dans une grille flexible qui s'adapte à la largeur de l'écran.
• Images adaptatives : Les images sont redimensionnées en fonction de l'espace disponible.
• Media queries : Ce sont des techniques CSS qui permettent d'appliquer différents styles et mises en page selon les caractéristiques de l'appareil (comme la largeur, la hauteur ou la résolution de l'écran).
• Menus adaptatifs : Les menus de navigation peuvent se transformer en menu déroulant ou en menu hamburger sur les petits écrans pour économiser de l'espace.
• Élimination du contenu superflu : Sur les petits écrans, certains contenus moins pertinents peuvent être retirés pour faciliter la navigation.

Le dynamic serving 

Le dynamic serving est une technique utilisée pour afficher des versions différentes d'une page web en fonction du type d'appareil qui en fait la demande, tout en conservant la même URL. Plutôt que d'ajuster la mise en page comme le fait le responsive design, le dynamic serving détecte le type d'appareil en utilisant le "User Agent" et délivre ensuite une version spécifique de la page pour cet appareil.

Fonctionnement du dynamic serving :

• Détection de l'appareil : Lorsqu'une demande est faite à un serveur pour une page web, le serveur identifie le type d'appareil qui fait cette demande en se basant sur le User Agent HTTP header.
• Servir la version appropriée : En fonction de l'appareil détecté (par exemple, desktop, smartphone, tablette), le serveur enverra la version de la page optimisée pour cet appareil.
• Même URL : Contrairement à la conception de sites distincts pour le mobile et le desktop (où des URL différentes sont utilisées pour chaque version), le dynamic serving conserve la même URL quelle que soit la version de la page servie.

Avantages du dynamic serving :

• L'optimisation spécifique : Puisque des versions différentes de la page sont créées pour différents appareils, elles peuvent être hautement optimisées pour chaque type d'appareil.
• La flexibilité : Vous pouvez servir un contenu ou un design radicalement différent pour les appareils mobiles, les tablettes et les ordinateurs de bureau si nécessaire.

Inconvénients du dynamic serving :

• La maintenance : La maintenance peut être plus exigeante, car des versions différentes de chaque page doivent être mises à jour séparément.
• La détection d'appareil : La nécessité de détecter avec précision les appareils peut conduire à des erreurs, surtout si la base de données de détection n'est pas régulièrement mise à jour.

La configuration d'URL distinctes 

Dans une configuration d'URL distinctes, le site mobile peut avoir une URL totalement différente de la version desktop.

Voici quelques caractéristiques :

• Préfixe ou sous-domaine mobile : Les sites utilisant cette technique peuvent avoir un sous-domaine spécifique pour mobile, tel que "m.example.com" pour les versions mobiles et "www.example.com" pour les versions desktop.
• Redirection basée sur l'appareil : Lorsqu'un utilisateur accède au site, le serveur détecte quel type d'appareil est utilisé grâce au User Agent. Si c'est un appareil mobile, l'utilisateur est redirigé vers l'URL mobile (par exemple, de "www.example.com" à "m.example.com").
• Balises d'annotation : Pour aider les moteurs de recherche à comprendre la relation entre les versions mobile et desktop, les webmasters utilisent généralement des balises "rel=alternate" et "rel=canonical". La version desktop pointe vers la version mobile avec "rel=alternate", et la version mobile pointe vers la version desktop avec "rel=canonical".

Si vous envisagez d'utiliser des URL distinctes pour mobile, il est essentiel d'assurer une mise en œuvre correcte pour éviter des problèmes de SEO. Avec l'index mobile first de Google, la version mobile de votre site est celle qui sera principalement utilisée pour l'indexation. Donc, même si vous utilisez des URL distinctes, assurez-vous que la version mobile est bien optimisée et contient toutes les informations nécessaires.

Cependant, au regard de l'importance de l'index mobile first, beaucoup considèrent désormais que le responsive design est une approche plus moderne et moins compliquée pour répondre aux besoins des utilisateurs mobiles, sans avoir à gérer des URL séparées.

En résumé, il est préférable d'avoir un site conçu pour une navigation optimale à la fois sur mobile et sur ordinateur grâce au responsive design.

Quels sont les critères essentiels d'un site mobile friendly ?

Un design responsive 

Comme vu plus haut dans cet article, le design responsive permet à une page de s'adapter dynamiquement à la taille de l'écran de l'appareil sur lequel elle est consultée.

Rapport de l'ergonomie sur mobile depuis la Google Search Console

Des images optimisées pour le web

Les utilisateurs mobiles s'attendent à ce que les pages se chargent rapidement. Un site lent peut entraîner une augmentation du taux de rebond et une diminution de la conversion.

• Optimisation des images : Les images non optimisées sont l'une des principales causes des temps de chargement lents. Il est essentiel de compresser les images, d'utiliser des formats modernes comme WebP, et d'implémenter des techniques comme le "lazy loading" pour améliorer la vitesse.
• Code épuré : Minimiser et compresser le CSS, le JavaScript et les autres ressources pour réduire le temps de chargement.

Une expérience utilisateur optimale 

L'expérience utilisateur (UX) sur mobile diffère de celle sur desktop. La navigation doit être intuitive, le contenu lisible et les actions facilement réalisables.

• Navigation simplifiée : Les menus doivent être concis et faciles à utiliser sur un petit écran. Les menus déroulants ou "hamburger" sont couramment utilisés pour économiser de l'espace.
• Boutons et zones cliquables : Ils doivent être suffisamment grands et espacés pour éviter les clics accidentels.
• Formulaires optimisés : Les formulaires, en particulier ceux utilisés pour la saisie de données ou les transactions, doivent être simplifiés et faciles à remplir sur mobile.
• Distance entre les éléments : Assurez-vous qu'il y ait un espace suffisant entre les éléments cliquables afin d'éviter que les utilisateurs cliquent accidentellement sur le mauvais élément.
• Texte lisible : Le texte doit être lisible sans avoir besoin de zoomer. La taille de la police doit être appropriée et le contraste entre le texte et le fond suffisamment marqué.
• Pas de pop-ups : Les pop-ups peuvent être difficiles à fermer sur un appareil mobile, ce qui peut frustrer les utilisateurs.

Vous avez un projet de création ou de refonte de site web ? Contactez Numacom pour parler de votre projet.