Site mobile-friendly et SEO

Les moteurs de recherche tiennent à proposer la meilleure pertinence à leurs utilisateurs. Ils innovent en permanence, en tenant compte des évolutions des comportements et des technologies. Le développement des smartphones avec l’apparition en juin 2007 du premier iPhone a modifié les habitudes de consultation des sites web : des écrans plus petits, une navigation tactile, une connexion parfois moins puissante ou moins stable ont conduit à des attentes spécifiques des utilisateurs de téléphones mobiles.

Les stratégies pour développer un site SEO-Friendly

Trois options s’offrent aux développeurs et éditeurs de sites qui désirent bénéficier d’une présence mobile optimale, en SEO comme en expérience utilisateur.

Le responsive design

Dans un site responsive, le design de chaque s’adapte à la taille du terminal utilisé. Les éléments et blocs de contenus se recombinent différemment ou sont redimensionnés pour une accessibilité du contenu.

Le responsive web design tient aussi compte de l’expérience utilisateur. Les liens des menus, les appels à l’action sont adaptés à un usage tactile : par exemple, les liens d’un menu sont écartés pour faciliter un clic du bout du doigt.

Cette solution est la plus simple à gérer techniquement. Vous avez une seule URL, un seul code source.

Le responsive design est la solution privilégiée et recommandée par Google.

Des versions distinctes

Certains éditeurs de sites développent deux versions distinctes :

  1. une version desktop (https://www.boulanger.com/)
  2. une version mobile (https://m.boulanger.com/)

En fonction du terminal utilisé, l’internaute est redirigé vers la version adaptée. Les versions distinctes d’un même contenu sont précisées par l’utilisation des balises <link rel=”canonical”> et <link rel=”alternate”>, situées entre les balises <head></head>.

Sur la page web pour ordinateur (https://www.boulanger.com/c/gros-electro-menager), vous ajoutez :

<link rel="alternate" href="https://m.boulanger.com/c/gros-electro-menager"/>

Il est possible d’ajouter une information supplémentaire, pour préciser à partir de quelle résolution on privilégie la version mobile. Ce qui donne alors :

<link rel="alternate" href="https://m.boulanger.com/c/gros-electro-menager"media="only screen and (max-width: 640px) />

Sur la page web pour mobile (https://m.boulanger.com/c/gros-electro-menager), vous ajoutez :

<link rel="canonical" href="http://www.example.com/page-1">

Ces deux balises <link> sont indispensables pour votre référencement. Sans elles, vous enverrez des signaux difficiles à interpréter par Google ou un autre moteur de recherche : le site est-il disponible en version mobile, ou est-il dupliqué ?

Cette solution est plus complexe à gérer et peut proposer des problèmes pour votre SEO, si vous ne gérez pas parfaitement les relations entre les deux versions.

Le dynamic serving

Des codes HTML différents sont délivrés en fonction du navigateur (mobile ou desktop) pour la même URL.

Vous devez utiliser une en-tête HTTP “Vary” pour informer les serveurs de cache des FAI qu’ils doivent prendre en compte la version HTML qui est adaptée à l’agent utilisateur (navigateur de l’internaute). L’en-tête HTTP “Vary” permet aussi à Googlebot de détecter le contenu qui est bien compatible avec un affichage mobile, sur smartphone ou tablette. Vous pouvez utiliser pour cela le fichier .htaccess.

La diffusion dynamique est la solution la plus compliquée à mettre en place, à maintenir en bon état de fonctionnement, et pose le plus de problèmes potentiels en termes SEO. Une mauvaise gestion des agents utilisateurs peut envoyer le code HTML desktop à un navigateur mobile et inversement. Si vous envoyez le code HTML desktop au Googlebot mobile de Google, vous serez considéré comme non mobile-friendly.

Le dynamic serving est la solution la moins confortable pour un développeur de site et un référenceur.

Vous pouvez consulter la documentation de Google sur les principaux enjeux attachés à chaque option.

Être mobile-friendly dans une démarche SEO

Les moteurs de recherche ont rapidement proposé des interfaces adaptées à ces nouveaux terminaux. Mais ce n’était qu’une étape ! Pour répondre aux attentes des mobinautes, Google et ses concurrents ont aussi intégré la compatibilité mobile parmi leurs principaux facteurs de pertinence. Votre site doit impérativement être mobile-friendly si vous souhaitez construire une stratégie SEO pérenne !

De mobilegueddon à mobile first

Depuis 2015, Google publie des mises à jour afin de valoriser les contenus qui offrent une expérience utilisateur optimale sur smartphone ou tablette.

La première grosse mise à jour à ce sujet a été, événement rare, annoncé à l’avance par Google. Déployée en avril 2015, elle a hérité du nom de “Mobilegeddon“, précisant que les critères de positionnement entre les versions mobile et desktop allaient commencer à différer.

La deuxième mise à jour majeure pour le SEO, appelée Mobile-friendly 2, a été déployée en mai 2016. Elle a pour vocation de privilégier les sites mobile-friendly sur la version mobile de Google.

Initiée en novembre 2016, la mise à jour mobile-first a l’ambition majeure d’accompagner le glissement de centre de gravité du web du desktop au mobile. Puisque les utilisateurs de smartphones, ou mobinautes, prennent le pas sur les internautes fidèles à leur ordinateur fixe ou portable, la version mobile des sites web devient la version de référence pour le premier moteur de recherche au monde.

Penser SEO en 2021, c’est penser SEO mobile, tout simplement !

Un contenu pleinement accessible sur mobile

Puisque la version mobile est la version de référence, tous les éléments qui participent de l’expérience utilisateur doivent être affichés dans la version visible sur mobile : liens, contenus, appels à l’action, etc.

Vous devez vous assurer par exemple que les menus sont bien présents. Si vous souhaitez réduire le scrolling, vous pouvez opter pour la mise en accordéon de certains contenus : ils demeurent accessibles et peuvent préserver une expérience utilisateur.

Des signaux web essentiels à optimiser

J’ai souvent constaté un temps de chargement dégradé sur mobile, par rapport à la version Desktop.

Vous devez aussi travailler vos Core Web Vitals ou signaux web essentiels, des indicateurs autour de l’expérience utilisateur qui prennent notamment en compte des critères de temps de chargement et de performance. Pour les travailler, vous notamment utiliser :

  • Google Search Console, si votre site a un trafic suffisant pour la remontée d’informations
  • PageSpeed Insights, un outil gratuit de Google à tester avec chaque type de page de votre site (et même avec plusieurs URL par type de page)

L’utilisation du format AMP peut aussi être un signal positif et vous offrir une visibilité supérieure sur la page de résultats de Google.

Être SEO mobile-friendly avec le responsive web design

Vous souhaitez optimiser votre référencement naturel sur mobile ? Un site internet en responsive web design est la solution la plus simple et la plus confortable pour atteindre votre objectif. Le travail d’optimisation repose notamment sur le webdesigner et l’intégrateur HTML : votre design doit pouvoir s’adapter facilement à un affichage mobile.

Vous pouvez valider la compatibilité mobile de votre site web très facilement :

  • Par Google Search Console, qui vous remontera d’éventuelles erreurs
  • Par l’outil en ligne Test Mobile Friendly, proposé par Google (pensez à tester les différents templates de pages)

Vous devez aussi être attentif au temps de chargement. Des optimisations spécifiques au mobile peuvent être possibles, comme un redimensionnement des images.

Être SEO mobile-friendly avec deux versions distinctes

Dans le cadre d’un projet de création ou de refonte, je vous recommande de privilégier le responsive design. Si vous conserver des URL distinctes, vous devrez être attentif à trois aspects fondamentaux :

  1. la bonne utilisation des balises <link> pour présenter les différentes versions d’une même page web;
  2. le caractère mobile-friendly de la version pour smartphones et tablettes (m.monsite.com), que vous pouvez valider avec l’outil de Google Test Mobile Friendly;
  3. la reprise de tout le contenu sur la version mobile (pas de contenu “allégé”.

Être SEO mobile-friendly avec le dynamic serving

Ce choix est le plus risqué en référencement naturel. Si vous décidez de l’utiliser, vous devrez porter toute votre attention sur la bonne détection des user-agents (agents utilisateurs).

Vous ne devez pas rechercher Googlebot de façon spécifique, mais considérer les différentes versions de Googlebot comme des appareils mobiles spécifiques. Vous trouverez des informations détaillées dans la documentation de Google, dont je vous partage le lien à la fin de ce dossier.

Vous pouvez consulter la documentation de Google sur les principaux enjeux attachés à chaque option.

Sélection d’outils SEO