Le mobile d'abord et la balise viewport

Module 4: Vitesse, mobile et https · Temps de lecture : 10 minutes

Objectif pédagogique : à l'issue de cette leçon, vous saurez expliquer ce que signifie l'indexation mobile-first, reconnaître et écrire un bon réglage viewport, et éviter les pièges qui font que votre page mobile affiche moins de contenu ou fonctionne moins bien que votre page pour ordinateur.

Notions clés : indexation mobile-first, robot d'exploration pour smartphone, design responsive, diffusion dynamique (dynamic serving), site mobile séparé, <meta name="viewport">, width=device-width, initial-scale, blocage du zoom, contenu identique, fenêtres intrusives (interstitiels), zones tactiles

Google regarde avec un téléphone

Pendant longtemps, Google a consulté les sites web comme le fait un ordinateur. Cette époque est révolue. Pour indexer et classer vos pages, Google utilise leur version mobile et la récupère avec le robot d'exploration pour smartphone de Googlebot. C'est ce qu'on appelle l'indexation mobile-first. En octobre 2023, Google a annoncé que la transition était terminée : pour presque tous les sites, il s'agit désormais simplement d'« indexation ». Depuis juillet 2024, Google explore aussi avec le robot mobile les derniers sites qui étaient encore visités par le robot pour ordinateur ; ce qui est totalement inaccessible sur un téléphone ne peut alors plus être indexé.

Qu'est-ce que cela signifie concrètement ? Ce qui ne figure pas sur votre page mobile n'existe pas pour Google. Si, sur téléphone, vous supprimez un passage de texte, un tableau, vos horaires d'ouverture ou vos données structurées « parce que l'écran est petit », Google ne voit pas non plus ce contenu.

Trois façons de construire pour le mobile

Presque tous les créateurs de sites modernes et les thèmes WordPress sont responsive. Un site réalisé avec AI Builder est lui aussi responsive : une seule page qui s'adapte. Si vous avez un ancien site avec une version m. séparée, passer au responsive est souvent la plus grande amélioration que vous puissiez apporter.

La balise viewport : la ligne qui fait tout fonctionner

Le navigateur d'un téléphone ne sait pas de lui-même que votre page est conçue pour un petit écran. Sans instruction, il fait comme si l'écran était beaucoup plus large, par exemple 980 pixels (l'exemple donné par la documentation de MDN), puis réduit toute la page pour qu'elle entre dans l'écran. Résultat : un texte minuscule sur lequel il faut zoomer. Même un design responsive ne fonctionne plus, car le CSS croit que l'écran est large.

La solution tient en une ligne dans la balise <head> de chaque page :

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

• width=device-width signifie : donner à la page la largeur de l'écran de l'appareil. Votre CSS peut alors travailler avec les largeurs d'écran.
• initial-scale=1 signifie : commencer sans zoom avant ni arrière.

C'est exactement la ligne que recommande Lighthouse (le contrôle intégré à Chrome et à PageSpeed Insights). Lighthouse signale une page comme non conforme si la balise viewport est absente ou ne comporte pas de width=.

Ce qu'il vaut mieux éviter

Certains sites y ajoutent davantage :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Avec cela, un visiteur ne peut plus zoomer. Cela semble propre (« la mise en page reste intacte »), mais c'est un obstacle pour une personne malvoyante. La norme d'accessibilité WCAG 2.2 exige, dans son critère de succès 1.4.4 (Redimensionnement du texte, niveau AA), que le texte puisse être agrandi jusqu'à 200 pour cent sans perte de contenu ni de fonctionnalité. La règle de test officielle du W3C, « Meta viewport allows for zoom », refuse une balise viewport comportant user-scalable=no ou un maximum-scale inférieur à 2. Supprimez donc ces éléments. (Safari sur iPhone les ignore désormais par défaut, mais pas les autres navigateurs.)

Une largeur fixe, comme width=1024, est également une erreur. Le téléphone fait alors de nouveau comme si l'écran mesurait 1.024 pixels de large, et votre design responsive ne sert plus à rien.

Un contenu identique sur mobile et sur ordinateur

Dans sa documentation sur l'indexation mobile-first, Google cite plusieurs éléments qui doivent être identiques sur les deux versions. Avec un site responsive, c'est automatiquement le cas ; avec la diffusion dynamique ou un site mobile séparé, vous devez le vérifier :

• Le contenu lui-même. Sur mobile, le texte peut se trouver dans un bloc dépliable ou un onglet, mais il doit être présent dans la page.
• Le titre et la méta-description (leçon 3.1) doivent être équivalents.
• Les données structurées (module 5) doivent figurer sur les deux versions.
• Les images, avec les mêmes textes alternatifs et dans une bonne qualité.
• Aucun contenu qui ne se charge qu'après une action. Google le dit en toutes lettres : ne chargez pas le contenu principal seulement lorsque le visiteur fait glisser, clique ou saisit du texte ; Googlebot ne le fait pas.
• Le fichier robots.txt ne doit pas bloquer les pages mobiles ni leurs fichiers CSS, JavaScript et images. Sans CSS, Google ne peut pas voir à quoi ressemble la page.

Agréable sur un petit écran

Voici quelques points que Google cite comme questions à se poser pour une bonne expérience sur la page, et que vous pouvez vérifier sur votre propre téléphone :

• Un texte lisible sans zoomer.
• Des zones tactiles (boutons, liens d'un menu) assez grandes et pas trop rapprochées, pour éviter de toucher le mauvais élément par erreur.
• Pas de fenêtres intrusives. Google écrit que les éléments qui masquent le contenu (une fenêtre d'inscription à la newsletter couvrant toute la page dès l'arrivée) agacent les visiteurs, nuisent à la confiance et compliquent la compréhension de votre contenu par les moteurs de recherche. Préférez une petite barre. Les fenêtres imposées par la loi, comme une vérification de l'âge, ne sont pas concernées par cette recommandation.
• Pas de défilement horizontal : une image ou un tableau trop large décale toute la page. Donnez aux tableaux leur propre barre de défilement.

Fin 2023, Google a supprimé le « Test d'optimisation mobile » et le rapport Ergonomie mobile de Search Console. Pour vérifier, utilisez désormais votre propre téléphone, l'affichage mobile des outils de développement de votre navigateur, ainsi que Lighthouse ou PageSpeed Insights (leçon 4.3).

En pratique : vérifiez vous-même

Ouvrez votre site dans Chrome ou Firefox sur votre ordinateur, appuyez sur F12 et cliquez sur l'icône représentant un téléphone et une tablette (barre d'outils des appareils). Choisissez un appareil étroit et parcourez vos pages les plus importantes. Repérez le texte qui sort de l'écran, les boutons qui se chevauchent et les parties absentes sur mobile. Regardez ensuite dans le code source (Ctrl+U) si la balise viewport est bien présente.

AI Builder place automatiquement la balise viewport width=device-width, initial-scale=1 dans chaque page. Les thèmes WordPress le font aussi, comme la plupart des autres créateurs de sites. Pour un site fait maison ou ancien, cela vaut la peine de vérifier : ce n'est qu'une ligne, mais sans elle, rien de votre design mobile ne fonctionne.

Résumé

• Google indexe et classe la version mobile de vos pages ; ce qui y manque, Google ne le voit pas.
• Le design responsive est la méthode recommandée : une seule adresse, un seul HTML.
• Chaque page a besoin de <meta name="viewport" content="width=device-width, initial-scale=1">.
• Ne bloquez pas le zoom : pas de user-scalable=no ni de maximum-scale inférieur à 2 (WCAG 1.4.4).
• Gardez le contenu, le titre, la méta-description et les données structurées identiques sur mobile et sur ordinateur, et évitez les fenêtres qui recouvrent la page.

Quiz

Exercice

Exercice A4.2 : Votre page a-t-elle un bon viewport ? Saisissez l'adresse d'une page (par exemple votre page d'accueil). Le programme lit le HTML et vérifie qu'il y a exactement une balise <meta name="viewport"> dans la section <head> avec width=device-width, et que le zoom n'est pas bloqué (user-scalable=no ou maximum-scale inférieur à 2). Examinez ensuite vous-même la même page dans l'affichage mobile de votre navigateur. Vous n'avez pas de site ? Utilisez www.wikipedia.org.

Pour aller plus loin

• Google Search Central, Mobile-first indexing best practices : https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
• Google Search Central Blog, Mobile-first indexing has landed (2023) : https://developers.google.com/search/blog/2023/10/mobile-first-is-here
• Google Search Central, Avoid intrusive interstitials and dialogs : https://developers.google.com/search/docs/appearance/avoid-intrusive-interstitials
• W3C, règle ACT Meta viewport allows for zoom : https://www.w3.org/WAI/standards-guidelines/act/rules/b4f0c3/
• MDN, la balise meta viewport : https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport
• W3C, Understanding SC 1.4.4 Resize Text : https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html