Votre site internet s'affiche-t-il correctement sur un téléphone ?

La plupart des visiteurs consultent votre site sur un téléphone. Google fait de même : Google utilise la version mobile de vos pages pour les indexer et les classer. Ce qui n'apparaît pas sur votre téléphone, Google ne le voit donc pas non plus. Dans cet article, vous découvrez comment vérifier vous-même si votre site fonctionne bien sur un petit écran.

La règle du viewport

Un téléphone ne sait pas automatiquement que votre page a été conçue pour un petit écran. Sans instruction, le navigateur agit comme si l'écran était beaucoup plus large et réduit toute la page. Vous obtenez alors un texte minuscule dans lequel il faut zoomer. La solution est une seule ligne dans le <head> de chaque page :

<meta name="viewport" content="width=device-width, initial-scale=1">

• Pas de largeur fixe comme width=1024 : le téléphone agirait de nouveau comme si l'écran était large.
• Ne bloquez pas le zoom : omettez user-scalable=no et maximum-scale=1. Les personnes malvoyantes doivent pouvoir agrandir le texte.

L'IA Builder, les thèmes WordPress et la plupart des autres créateurs de sites web insèrent eux-mêmes cette ligne dans chaque page. Pour un site fait maison ou ancien, il vaut la peine de vérifier : ouvrez une page, cliquez avec le bouton droit, choisissez Afficher le code source de la page (ou Ctrl+U) et recherchez avec Ctrl+F le terme viewport.

Tester vous-même

1. Ouvrez votre site sur votre propre téléphone et parcourez vos pages principales.
2. Ou sur l'ordinateur : ouvrez votre site dans Chrome ou Firefox, appuyez sur F12 et cliquez sur l'icône d'un téléphone et d'une tablette. Choisissez un appareil étroit.
3. Soyez attentif au texte qui dépasse de l'écran, à une page qu'il faut faire défiler latéralement, aux boutons trop petits ou qui se chevauchent, et aux éléments absents sur mobile.
4. Testez ensuite dans PageSpeed Insights sous l'onglet Mobile. La façon de lire ce rapport est expliquée dans Lire PageSpeed Insights : les Core Web Vitals en langage clair.

Le test d'optimisation mobile distinct de Google ainsi que le rapport sur l'ergonomie mobile dans Search Console n'existent plus depuis le 1 décembre 2023. Si vous les rencontrez dans un ancien article, suivez désormais les étapes ci-dessus.

Le même contenu sur mobile et sur ordinateur

Pour un site responsive (une seule adresse et une seule page qui s'adapte à la largeur de l'écran), le contenu est naturellement identique. Google recommande cette méthode. Si vous avez un site mobile distinct, comme m.example.com, ou un système qui envoie d'autres pages aux téléphones, vérifiez alors :

• le même texte, même s'il se trouve sur mobile dans un bloc déroulant ;
• le même titre et la même description ;
• les mêmes images avec les mêmes textes alternatifs ;
• aucun contenu qui ne se charge que lorsque le visiteur balaie l'écran, clique ou tape : Google ne le fait pas.

Pour aller plus loin

• Google : bonnes pratiques pour l'indexation axée sur le mobile (en anglais)
• MDN : la règle du viewport (en anglais)