Qu'est-ce que l'indexation Mobile-First et comment s'y adapter
En 2019, Google a annoncé quelque chose de radical : à partir de maintenant, c'est la version mobile de votre site qui sera principalement indexée et classée.
Avant, Google indexait la version desktop et adaptait pour le mobile. Maintenant, c'est l'inverse.
Si votre site mobile est mauvais, ce n'est pas juste votre trafic mobile qui en pâtit. C'est votre classement global. Desktop compris.
Pourquoi ce changement ?
Les stats sont implacables :
- 60%+ du trafic web mondial est mobile
- En Belgique, 65% des recherches Google se font sur smartphone
- Pour les recherches locales ("restaurant près de moi"), c'est 80%+
Google indexe ce que la majorité des utilisateurs voient. Logique.
Comment Google indexe en Mobile-First
Le processus
- Googlebot (smartphone) visite votre site
- Il voit ce qu'un utilisateur mobile verrait
- Il indexe ce contenu
- Il classe votre site en fonction de cette version mobile
Ce qui compte : ce que Googlebot smartphone voit. Ce qui ne compte pas (ou moins) : ce que les utilisateurs desktop voient.
Le piège classique
Votre site est "responsive". Il s'adapte à la taille de l'écran. Mais :
- Le menu hamburger cache la moitié de la navigation
- Les images sont trop lourdes pour le mobile
- Le texte est trop petit
- Les boutons sont trop petits pour un doigt
- Le contenu est tronqué ou réorganisé
Google voit tout ça. Et pénalise.
Les critères Mobile-First essentiels
1. Le contenu identique
Règle d'or : le contenu visible sur mobile doit être identique (ou quasi) à celui sur desktop.
| ❌ Mauvais | ✅ Bon |
|---|---|
| Contenu desktop riche, mobile allégé | Même contenu, reorganisé |
| Paragraphes cachés derrière "Lire la suite" | Tout le contenu visible |
| Images différentes | Mêmes images, optimisées |
Google détecte le contenu masqué ou tronqué. Il le considère comme moins important.
2. La lisibilité
| Critère | Seuil minimum |
|---|---|
| Taille de police | 16px |
| Espacement entre lignes | 1.5x |
| Largeur de contenu | Pas de scroll horizontal |
| Contraste texte/fond | Ratio 4.5:1 minimum |
Un texte en 12px blanc sur gris clair ? Google et vos visiteurs détestent.
3. Les boutons cliquables
| Critère | Seuil minimum |
|---|---|
| Taille tactile | 48×48px |
| Espacement entre boutons | 8px minimum |
| Zones de clic | Assez grandes pour un pouce |
Rien de plus frustrant qu'un bouton "Commander" impossible à toucher sans zoomer.
4. La vitesse mobile
Le mobile est souvent sur une connexion 4G (ou pire, 3G en zone rurale). Un site qui charge en 2 secondes sur le Wi-Fi met 6 secondes sur le réseau mobile.
| Métrique | Objectif mobile |
|---|---|
| LCP | < 2.5s |
| FID/INP | < 100ms |
| CLS | < 0.1 |
5. Les interstitiels intrusifs
Les pop-ups qui couvrent tout l'écran au chargement sur mobile sont pénalisées.
| ❌ Pénalisé | ✅ Accepté |
|---|---|
| Pop-up plein écran immédiat | Bannière cookie discrète |
| Interstitiel publicitaire | Pop-up après interaction |
| Fenêtre newsletter qui cache le contenu | Slide-in en bas d'écran |
6. Le viewport configuré
<meta name="viewport" content="width=device-width, initial-scale=1">
Sans cette balise, Google considère que votre site n'est pas optimisé mobile.
Comment vérifier votre site
Test 1 : Google Search Console
- Rapport "Convivialité mobile"
- Liste les pages avec problèmes
Test 2 : PageSpeed Insights (mode mobile)
- Le score mobile est celui qui compte
- Un score < 50 = urgence
Test 3 : Test d'optimisation mobile Google
- search.google.com/test/mobile-friendly
- Test URL par URL
Test 4 : Votre propre smartphone
- Naviguez sur votre site pendant 5 minutes
- Essayez de tout faire (commander, contacter, lire)
- Notez chaque friction
Les erreurs fréquentes
Le "responsive" faux
Le site utilise un framework CSS qui réorganise les éléments. Mais certaines sections disparaissent sur mobile. Ou deviennent inutilisables.
Solution : testez chaque page sur mobile. Pas seulement l'accueil.
Le menu caché
Le menu hamburger contient 15 liens. Impossible à naviguer. Googlebot ne les trouve pas facilement.
Solution : menu simplifié, liens vers les pages importantes visibles.
Les images non optimisées
Mêmes images lourdes sur desktop et mobile. Le mobile télécharge 5 Mo d'images pour rien.
Solution : srcset responsive, format WebP, lazy loading.
Le contenu décalé (CLS)
La page se charge, l'utilisateur commence à lire, une pub s'insère, tout décale. L'utilisateur clique sur la mauvaise chose.
Solution : pré-réserver l'espace pour les images et publicités.
Notre approche Next.js
Next.js est mobile-first par conception :
- CSS Modules / Tailwind : styles responsive natifs
- Image component : images adaptées à la taille d'écran
- Font optimization : polices qui chargent rapidement sur mobile
- SSG : HTML léger, pas de calcul serveur
- Code splitting : seul le JS nécessaire est chargé
Quand on livre un site Promto.be, on teste systématiquement :
- iPhone (Safari)
- Android (Chrome)
- Différentes tailles d'écran
- Connexion lente simulée
Le futur : Mobile-First → User-First
Google va au-delà du mobile. Il parle désormais de "Page Experience" : l'expérience globale, quelle que soit l'appareil.
Mais le mobile reste le dénominateur commun. Un site qui fonctionne parfaitement sur mobile fonctionnera partout.
Conclusion
L'indexation Mobile-First n'est pas une option. C'est la réalité depuis 2019.
Si votre site est pensé desktop first et adapté en catastrophe pour le mobile, vous êtes pénalisé. Peut-être sans le savoir.
La solution ? Concevoir pour le mobile dès le départ. C'est ce qu'on fait avec Next.js. Chaque composant est testé sur mobile avant d'être validé.
Votre site doit être aussi beau et fonctionnel sur un smartphone que sur un écran 27 pouces. C'est la norme.