Adattare la pagina allo schermo di un telefono
Descrizione
Questo criterio verifica che la pagina si visualizzi correttamente su un telefono. iPand la carica su un Pixel 7 simulato, largo 412 px, e controlla quattro punti: il tag viewport dichiara width=device-width senza bloccare lo zoom, la pagina non supera la larghezza dello schermo, almeno il 60% del testo visibile misura 12 px o più, e l’impaginazione si sposta poco durante il caricamento (CLS non superiore a 0,1).
Perché è importante per le AI
Google indicizza la versione mobile delle tue pagine, scansionata dal suo crawler per smartphone, e sia AI Overviews sia AI Mode si basano su questo indice. Google conta anche la visualizzazione adatta ai dispositivi mobili tra gli elementi di una buona esperienza sulla pagina, che consiglia per le sue funzionalità di AI.
- Senza tag viewport, il telefono mostra la pagina come uno schermo di computer rimpicciolito: testo minuscolo e zoom obbligatorio.
- Bloccare lo zoom (user-scalable=no) impedisce alle persone ipovedenti di leggere la pagina; le regole di accessibilità WCAG richiedono un ingrandimento di almeno due volte.
- Un contenuto che si sposta durante il caricamento fa toccare il punto sbagliato: il CLS misura questi spostamenti, e web.dev lo giudica buono fino a 0,1.
Come correggere
- 1 Dichiara l’area di visualizzazione Inserisci nell’intestazione della pagina il tag <meta name="viewport" content="width=device-width, initial-scale=1">. Non aggiungere user-scalable=no, né un maximum-scale inferiore a 2: i tuoi visitatori devono poter ingrandire. È il punto che pesa di più nel criterio.
- 2 Elimina lo scorrimento orizzontale La pagina non deve essere più larga dello schermo, cioè 412 px per iPand. Cerca gli elementi a larghezza fissa: immagini, tabelle, video incorporati, blocchi dimensionati in pixel. Dai alle immagini max-width: 100% e preferisci impaginazioni flessibili (Flexbox, Grid) alle larghezze fisse.
- 3 Ingrandisci il testo Almeno il 60% del testo visibile deve misurare 12 px o più. Tieni il corpo del testo vicino ai 16 px, la dimensione predefinita dei browser, e controlla note legali, menu e piè di pagina, spesso scritti troppo piccoli.
- 4 Riserva lo spazio di immagini e riquadri Il CLS non deve superare 0,1. Indica width e height su immagini e video, riserva l’altezza di banner, pubblicità e widget prima del loro caricamento, e non inserire contenuti sopra quelli già visualizzati.
In breve
Google legge la versione mobile della tua pagina. Dichiara l’area di visualizzazione senza bloccare lo zoom, evita lo scorrimento orizzontale e mantieni un testo leggibile e un’impaginazione stabile.
