Message Google Search Console : "Corriger les problèmes en lien avec Ergonomie mobile"

Comprendre les messages de Google Search Console

Vous avez enregistré votre site sous Google Search Console et vous avez peut-être reçu ce message :

En effet Google intègre de plus en plus de contrôles et augmente la sensibilité de ces derniers, afin d'inciter les webmasters à améliorer sans relâche l'affichage de leurs sites sous mobile.

Vous retrouvez la liste de ces alertes sous Google Search Console en "Ergonomie mobile" dans le menu de gauche :

Pour chaque critère, le nombre de pages concerné est indiqué, le graphique au-dessus indique la tendance journalière.

Si vous cliquez sur l'un des critères vous obtenez le graphique spécifique de la tendance de ce critère. Ce sont souvent les mêmes pages qui sont concernées par tous les critères.
Mais surtout ce qui est intéressant est que Google Search Console fournit le détail des pages incriminées (cf ci-dessous pour "Texte illisible, car trop petit") :

En survol d'une url, on fait apparaître 2 icônes pour ouvrir la page incriminée dans le navigateur (1) et lancer un test d'inspection de l'url avec les outils Google (2). Cette inspection est technique et peu visuelle, nous conseillons de visualiser l'url au format mobile dans la console du navigateur (voir ci-après).

Soit ces urls sont valides et effectivement il faut corriger l'anomalie d'affichage, soit ce sont des anciennes urls indexées par Google et il convient de les supprimer via le lien dans le menu de gauche en "Anciens outils et rapports" :

Visualiser en mobile et corriger les anomalies

Sur la documentation Google, page https://support.google.com/webmasters/answer/9063469  vous trouverez une xeplication assez claire des différentes alertes.
Par exemple pour "Texte illisible, car trop petit" : "Ce rapport signale les pages dont la taille de police est trop petite pour être lisible et sur lesquelles les mobinautes devraient "pincer pour zoomer" afin de lire le contenu. Après avoir spécifié une fenêtre d'affichage, définissez les tailles de police afin qu'elles s'adaptent correctement dans la fenêtre d'affichage".
Par exemple pour "Contenu plus large que l'écran" : "Ce rapport indique les pages qu'il est nécessaire de faire défiler horizontalement pour voir les mots et les images qu'elles contiennent. Cela se produit lorsque des pages utilisent des valeurs absolues dans des déclarations CSS, ou des images conçues pour avoir une meilleure apparence avec une largeur de navigateur particulière (980 px, par exemple). Pour corriger cette erreur, assurez-vous que les pages utilisent des valeurs relatives de largeur et de position pour les éléments CSS, et vérifiez que la taille des images est également évolutive."

Pour se rendre compte rapidement de l'affichage mobile :

1- afficher l'url incriminée dans le navigateur
2- faire un click-droit et choisir "Inspecter" (sous Chrome)
3- cliquer sur l'icône  en haut à droite de la fenêtre (cf ci-dessous en 1), pour afficher la page sous un format d'écran mobile

On constate dans l'exemple ci-dessous que le texte est effectivement trop petit, car il n'occupe que la moitié de l'écran mobile en portrait (cf 2).

L'origine du problème d'affichage provient de l'élément 3 qui occupe une largeur fixe et que nous devons corriger. 

Sur l'image ci-dessous, on visualise précisément l'erreur de paramétrage dans le HTML : il s'agit d'un élément HTML de type "table" auquel on a associé une largeur de 730px. Or cette largeur, directement intégrée au HTML sera prise en compte par tous les navigateurs sur tous les appareils, y compris sur mobile en portrait. Ce dernier format est large d'environ 450px, il ne peut donc pas afficher un élément de largeur fixe de 730px, ni s'adapter en responsive car le style "width:730px" est inséré dans le HTML.

La solution consiste à supprimer le style "width:730px" dans le HTML, mais est-ce suffisant ?

En effet, cela va rétablir un affichage correct sur l'ensemble de la page (ce qui est notre objectif) mais il faut réaliser que cet élément de type table sera affiché de façon très resserrée (on compresse 730px dans un espace de 450px). Il est possible, voire probable, que cet élément sera signalé ultérieurement par Google Search Console comme source d'affichage d'un texte trop petit.

Deux possibilités s'offrent à vous pour une solution pérenne :

1- de revoir le principe de la table et trouver une autre solution de présentation quel que soit le type d'appareil

2- créer 2 modules sous Joomla : 1 pour l'affichage ordinateur/tablette, et 1 pour l'afficage mobile (voir notre article Un affichage mobile performant pour votre site Joomla).