Un site web mobile « friendly » est avantagé dans le classement de Google. Qu’il soient simplement sous forme d’une Progressive Web Apps, responsive, en dynamic serving ou un véritable site pour mobile avec URLs différenciées il répond aux besoins des mobinautes de pouvoir consommer du contenu sur leur smartphone.
En effet, depuis mars 2018 l’apparition du
Index Mobile First (ou FMI en anglais), les contenus mobiles sont indexés par Google en priorité par rapport à la version desktop.
Rappelons au passage que Google détient plus de 93% de parts de marché des moteurs de recherche en France, il est donc nécessaire de suivre ses directives en termes de conception ou de design pour le web mobile et par-dessus tout, il y a des erreurs à absolument éviter sous peine d’être pénalisé dans votre référencement naturel (ou SEO).

Une UI non optilisée, des vidéos non disponibles, un site lent à charger ou encore des contenus Javascript, CSS ou Flash non disponibles pénalisent votre site web mobile
Infographie : Capucine Garabetian


Une UI non adaptée aux mobiles

L’User Interface (ou UI) est particulièrement importante sur mobile pour faciliter l’expérience utilisateur. Elle regroupe tous les aspects graphiques et esthétiques de l’interface utilisateur de votre site web, mais aussi l’emplacement des boutons et Call to action. Une mauvaise UI entraîne une lassitude de la part de l’utilisateur.
Il quittera votre site web mobile ce qui impactera négativement la popularité de votre site web mobile pris en compte par l’algorithme de ranking Google.

Voici quelques exemples de ce qu’il ne faut pas faire :

  • Fixer une taille minimale d’écran en valeur absolue dans votre balise méta viewport. Cette balise sert à indiquer au moteur de recherche comment ajuster la dimension de la page et l’échelle des différents éléments pour d’adapter aux devices.
  • Utiliser une taille de police trop petite ou trop grande.
  • Placer des éléments cliquables trop proches les uns des autres.
  • Placer des fenêtres publicitaires interstitielles ou des pop-ups qui vont perturber la navigation des mobinautes.

Comment adapter l’UI de mon site web mobile ?

Construire un bonne UI pour un site web mobile n'est pas toujours facile, voici quelques conseils.
Source : unDraw
  • Fixez la taille de votre balise méta viewport en valeur relative, en pourcentage par exemple, afin que vos pages s’adaptent au mieux à tous types de devices et de tailles d’écrans.
  • Pour déterminer si la taille de votre police est suffisamment grande, si vos boutons et éléments cliquables ne sont pas trop proches les uns des autres il faut procéder à des tests sur plusieurs devices mobiles différents. Vous pouvez utiliser des outils pour tester la responsivité de votre site Web en fonction des différents formats d’affichage d’écran.
  • Pour un résultat optimal, réaliser des test utilisateurs peut s’avérer très utile pour recueillir des feedbackset procéder aux réglages nécessaires.
  • Si vous souhaitez tout de même utiliser des publicités interstitielles, pour promouvoir votre application mobile par exemple, veillez à ce que son contenu ne représente pas plus de 20% de la taille de l’écran.

Des pages mobiles lentes au chargement pénalisent le SEO de votre site Web mobile

Depuis la Mobile Speed Update de Google en juillet 2018 la vitesse de chargement des pages est prise en compte par son algorithme de ranking. Un site web mobile lent sera pénalisé dans la quête à la première page. Cela s’avère d’autant plus vrai pour la consommation sur mobile car la patience des mobinautes est limitée. Une Etude Think with Google estime que 53% d’entre eux quittent un site mobile si le temps de chargement de la page excède les 3 secondes.

Comportement des mobinuates. 
37% des sessions sur mobile durent moins d'une minute
53% des mobinautes Français quittent un site web mobile si le temps de chargement est supérieur à 3 secondes
Infographie : Capucine Garabetian
Source : Culture Data & Think with Google

Il est primordial que les pages de votre site Web mobile aient une vitesse de chargement optimale, c’est à dire inférieure à 3 secondes.  

Comment optimiser la rapidité de chargement de mon site web mobile ?

Améliorer le temps de chargement d’une page web est un sujet qui nécessite de prendre en compte un grand nombre de paramètres. Pour faire un état des lieux, vous pouvez tout d’abord tester la vitesse de chargement de vos pages grâce à l’outil Google Page Speed Insights.

Gif présentant une page de chargement
C’est agaçant n’est pas ?

Voici quelques pistes à creuser si votre site web sur mobile est lent :

  • Optimisez vos images pour le web. Le poids des images impacte le temps de chargement de votre site web mobile, afin d’optimiser vos images veuillez à choisir le bon format (.png, .jpg ou .Gif) et une résolution la plus adaptée possible, en veillant à ne pas dépasser les 1000px. Vous pouvez par exemple utiliser des outils comme Pixlr pour adapter la taille de vos images.
  • Vérifier les performances de votre serveur ou hébergeur afin de vous assurer qu’elles correspondent à vos besoins et ne ralentissent pas le temps de chargement de vos pages web sur votre site mobile.

Bloquer le JavaScript, le CSS et les images pénalise le SEO de votre site Web Mobile

A tort, certains site mobiles via dynamic serving ou URLs différenciées allègent leurs contenus desktop afin de l’adapter à l’usage mobile, souvent dans l’optique d’améliorer le temps dechargement des pages. 
Malheureusement cette pratique dessert l’indexation des sites web mobiles par Google car puisque Content is King” en SEO, moins de contenu signifie moins de visibilité.

Privliégiez le HTML au Javascript ou au Flash pour améliorer les contenus de votre site web mobile
Source : unDraw

Il est donc primordial de rendre tout son contenu crawlable par le Google Bot y compris les contenus cachés, les contenus Javascripts, CSS et les images.
Il faut donc penser à permettre dans son fichier robots.txt l’indexation de ces éléments et ce pour éviter de saboter ses performances en termes de SEO.

Le fichier robots.txt, se place à la racine d’un site web. Il contient une liste de ressources et URL du site qui ne doivent pas être explorées par les robots des différents moteurs de recherches.
Ainsi, les robots vont d’abord consulter le fichier robots.txt avant d’explorer puis d’indexer un site Web.

Comment rendre l’ensemble des contenus accessibles au GoogleBot ?

  1. Vérifier à l’aide de l’outil Fetch as Google disponible sur la Search Console si le Google bot peut crawler vos contenus. Cet outil vous permet de voir exactement ce que voit et indexe le robot Google, et donc d’identifier les éléments non-visibles pour les corriger.
  2. Vérifier et tester vos fichiers robots.txt pour vérifier que votre site web mobile est accessible par le crawler.
  3. Faites un test grâce à l’outil Mobile-Friendly Test sur toutes vos pages web mobiles afin de vous assurer qu’elles soient bien Mobile-friendly et compatibles pour les utilisateurs mobiles.
  4. Si vous utilisez des URLs distinctes entre votre site desktop et votre site mobile, assurez-vousque les redirections sont correctement mises en place. Vous devez les tester systématiquement et ce afin de confirmer que la redirection est reconnue et crawlable. Vous pouvez utiliser screamingfrog pour tester vos redirections.

Des contenus vidéo non-accessibles tuent l’expérience utilisateur


La vidéo est de plus en plus appréciée par les mobinautes. Il faut cependant savoir que certains types de vidéos ne sont pas compatibles avec les devices mobiles à cause d’un format de données propriétaire sous licence ou à cause d’une technologie non supportée par le terminal mobile. Pour les utilisateurs il est très frustrant de constater que l’on ne peut pas lire une vidéo et une mauvaise expérience utilisateur vous pénalisera car les internautes délaisseront à terme votre site.

Comment rendre accessible les vidéos de mon site web mobile sur tous les devices ?

Au lieu d’utiliser des lecteurs média avec des vidéos au format propriétaire ou d’utiliser des contenus non-supportés sur mobile, il est recommandé d’utiliser des tags standards en HTML 5 pour inclure des vidéos ou des animations sur votre site web mobile.

Vous pouvez par exemple :

  • Utiliser les standards d’animation HTML 5 plutôt que le Flash pour rendre l’expérience agréable pour tous les utilisateurs.
  • Utiliser des vidéos dites “embedded”,c’est à dire des vidéos incorporées directement dans votre contenu grâce à un bout de code HTML, qui seront lisible par tous les terminaux. Vous trouverez un tutoriel complet pour intégrer des vidéos en HTML5.
  • Vous pouvez retranscrire le contenu de la vidéo en texte afin de parer les moteurs de recherche ne lisant les formats de vidéo propriétaires. Cela vous permettra par ailleurs de rendre votre site web mobile accessible aux personnes utilisant des technologies d’assistance.

Vous l’aurez compris, la qualité de votre site web mobile ainsi que l’expérience utilisateur vont impacter directement son SEO et donc son classement aux yeux du Google Bot.
D’après un étude menée par Cisco, le trafic généré par les devices sans fils et les mobiles représentera plus de 63% du volumetotal de trafic d’ici à 2021. Dans la mesure où le futur du SEO sera optimisépar des IA perpétuellement, il faut accorder toujours plus d’attention à votre site web mobile afin d’atteindre vos objectifs.


Sources : 
Google developer – Skeelbox – Search engine Land – WebRank Info – Think with Google

Photo utilisée en bannière by Charles Deluvio 🇵🇭🇨🇦 via Unsplash