Mobile Friendly Checker
Questo checker mobile gratuito legge l'HTML di una pagina e testa gli elementi che determinano il funzionamento su telefono: un tag meta viewport corretto, zoom non disabilitato, nessun tag Flash o plugin, nessun font troppo piccolo o layout a larghezza fissa, attributi di immagini responsive e tap target di dimensioni ragionevoli. È un controllo euristico dell'HTML, quindi ogni risultato indica cosa può e non può provare.
Mobile Friendly Checker
Technical SEO
Informazioni su questo strumento
Google indicizza prima la versione mobile di una pagina e la maggior parte dei visitatori arriva da smartphone. Una pagina che richiede zoom per leggere, che esce dallo schermo o i cui link sono troppo piccoli per toccare li perde in secondi. Google ha ritirato il suo Mobile-Friendly Test nel 2023, quindi i proprietari di siti hanno bisogno di un modo rapido per verificare i fondamentali prima di guardare una pagina su un vero telefono.
Il checker scarica l'HTML che il server invia e cerca i segnali che determinano il comportamento mobile: il tag meta viewport e se imposta width=device-width senza bloccare lo zoom, tag plugin come Flash che i telefoni non possono eseguire, dimensioni font sotto 12 pixel negli stili inline e blocchi di stile, tabelle ed elementi con larghezze fisse più larghe dello schermo del telefono, immagini con attributi srcset o sizes, media query negli stili inline, link il cui testo è troppo corto per toccare facilmente, tag font legacy e link AMP o mobile-alternate.
Non può renderizzare la pagina o leggere fogli di stile esterni, quindi non può misurare come il layout appare effettivamente, se il testo è veramente leggibile o se gli elementi si sovrappongono. Una pagina che supera ogni controllo qui può comunque essere scomoda su un telefono, e una pagina che usa CSS esterno per tutto può attivare avvisi che non merita. Tratta il risultato come una checklist, poi apri la pagina su un vero telefono e in modalità dispositivo di Chrome DevTools.
Domande frequenti
Quale tag meta viewport dovrebbe avere ogni pagina?
Lo standard è <meta name="viewport" content="width=device-width, initial-scale=1">. Dice ai telefoni di impaginare la pagina alla larghezza dello schermo invece di fingere di essere un desktop da 980 pixel e rimpicciolire tutto. Senza di esso, il testo è minuscolo e i visitatori devono fare zoom per leggere.
È male disabilitare lo zoom con user-scalable=no?
Sì. Impedisce alle persone con scarsa vista di ingrandire il testo ed è un fallimento di accessibilità secondo WCAG. iOS moderno lo ignora comunque. Rimuovi user-scalable=no e maximum-scale=1 a meno che la pagina non sia un'app a schermo intero con i suoi controlli di zoom.
Cosa è successo al Mobile-Friendly Test di Google?
Google lo ha chiuso nel dicembre 2023, insieme al rapporto di usabilità mobile in Search Console. Lighthouse in Chrome DevTools e PageSpeed Insights segnalano ancora problemi mobile come viewport, dimensione font e tap target, e questo checker copre i fondamentali a livello HTML per una rapida prima occhiata.
Quale dovrebbe essere la dimensione dei tap target?
Almeno 48 per 48 pixel CSS con circa 8 pixel di spazio tra loro, così un dito colpisce un link e non il suo vicino. Gli elenchi di navigazione con link strettamente impacchettati e i link solo icona sono i soliti colpevoli. Il padding sul link, non solo sul testo, rende il target più grande senza cambiare l'aspetto.
Perché il checker non mostra come appare la pagina su un telefono?
Perché legge l'HTML senza renderizzarlo o scaricare fogli di stile, il che mantiene il controllo veloce e sicuro ma significa che non può vedere il layout finale. Per un controllo visivo, apri la pagina in Chrome, premi F12, attiva la barra degli strumenti dispositivo e scegli un telefono, o semplicemente aprila sul tuo telefono.