Aller au contenu
Accueil » Blog » Contenu plus large que l’écran : comment régler ce problème ?

Contenu plus large que l’écran : comment régler ce problème ?

ecran-trop-large-resoudre-search-console-problème

Vous venez de terminer ce site. Vous en êtes content : good job ! Et voilà que vous recevez par courriel un message de cet amie qui nous veut du bien, j’ai nommé la Search Console : problème d’ergonomie mobile… Caramba !

Le contenu de la version mobile déborde du cadre

Vous voilà donc en visite chez la dame Console, bien résolu à résoudre le mystère. Car mystère, il y a : au vu des divers essais que vous avez effectués sur différents appareils mobiles, vous ne comprenez pas à quoi correspond cette alerte. Le contenu de vos pages s’affiche parfaitement… 

Cherchez l'erreur

Résistez à la tentation d’ignorer l’avertissement. Il est rare que la Search Console se trompe et si ses critères ne sont pas les vôtres, n’oubliez pas que ce sont ceux de Google… Lequel, depuis son virage mobile-first de 2019, risque bien de ne pas vous laisser grimper dans les SERPS. Il en va donc de l’indexation des pages incriminées et par là même, du positionnement de votre site. De quoi combattre votre envie de j’m’enfoutisme !

RDV dans la Search Console

Au fait des risques encourus, vous cliquez donc sur le bouton dans le corps du mail qui vous conduit directement vers le rapport d’ergonomie mobile de la Search Console.

Le type de problèmes et les pages concernées sont indiqués clairement. Contenu plus large que l’écran, éléments cliquables trop rappochés, textes illisibles car trop petits sont les messages d’erreur les plus courants.

Un contrôle technique pointilleux

Pour autant, si les erreurs sont identifiées, la façon de les corriger reste nébuleuse. Il va vous falloir procéder méthodiquement afin de vérifier chaque éléments de la page fautive à l’aune de son ou de ses problèmes (car la même page peut cumuler les erreurs d’ergonomie mobile). 

Ainsi dans le cas de contenus trop larges pour l’écran :

  • vérifier la taille des images (y compris les images de background). Passez-les à 100%, entières ou auto (dans Élémentor) sur cellulaires ET tablettes.
  • définissez des marges minimales à droite et à gauche pour chaque élément.

 

Pour les éléments cliquables trop rapprochés :

  1. Assurez-vous d’une marge de sécurité confortable en haut et en bas de chaque éléments (cliquable et ses voisins).

 

Pour les textes illisibles :

  • Agrandissez les textes même s’ils semblent corrects
  • Pensez aux textes des boutons d’où vient très souvent le problème ! 

Pensez à demander la validation !

Dernière étape et non la moindre, tenir au courant Google ! Selon le cas, la Search vous proposera de cliquer sur un bouton de signalisation de résolution du problème ou vous aurez à redemander l’indexation de la page “guérie”. Quelle que soit l’option, vous recevrez rapidement des nouvelles de la Search par courriel vous annonçant votre réintégration dans le cercle des bons élèves !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *