Connessione non riuscita. Per favore riprova.

Vai al contenuto
SEO Tools
Aiuto e documentazione
UX / UI Impatto critico Facile 2 min

Viewport / visualizzazione su mobile

Il meta viewport garantisce una corretta visualizzazione su mobile.

Cos'è

Il meta tag viewport indica al browser come scalare la pagina in base alla larghezza del dispositivo. Senza di esso il mobile renderizza la larghezza desktop e tutto risulta "piccolo e lontano".

Perché è importante

Google indicizza mobile-first — valuta principalmente la versione mobile. Senza un viewport corretto il sito fallisce il test di usabilità su mobile, il che abbassa direttamente le posizioni, dato che la maggior parte delle visite proviene da mobile.

Come fare

  1. 1Inserisci nell'<head> il meta tag viewport standard.
  2. 2Non disabilitare lo zoom (maximum-scale=1 / user-scalable=no) — danneggia l'accessibilità.
  3. 3Verifica che il contenuto non trabocchi orizzontalmente e che i pulsanti siano sufficientemente grandi (vedi l'audit UX).

Esempio

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

Conclusione

Una sola riga nell'header, ma fondamentale per un mondo mobile-first. Senza di essa il sito su mobile è praticamente inutilizzabile e Google lo penalizza duramente. Dopo l'implementazione, testa su un telefono reale e con lo strumento di usabilità mobile.

Argomenti correlati