La Sua pagina web è ottimizzata per gli smartphone?
La maggior parte dei visitatori consulta il Suo sito web da telefono. Anche Google fa lo stesso: Google utilizza la versione mobile delle Sue pagine per indicizzarle e posizionarle. Ciò che sul telefono non compare nella pagina, Google quindi non lo vede. In questo articolo scoprirà come verificare autonomamente se il Suo sito funziona bene su uno schermo piccolo.
La regola del viewport
Un telefono non sa automaticamente che la Sua pagina è stata creata per uno schermo piccolo. Senza un'istruzione specifica, il browser si comporta come se lo schermo fosse molto più largo e rimpicciolisce l'intera pagina. Il risultato è un testo minuscolo che costringe a ingrandire la visualizzazione. La soluzione è una sola riga nell'<head> di ogni pagina:
<meta name="viewport" content="width=device-width, initial-scale=1">
- Nessuna larghezza fissa come
width=1024: altrimenti il telefono tornerà a comportarsi come se lo schermo fosse largo. - Non bloccare lo zoom: ometta
user-scalable=noemaximum-scale=1. Le persone con difficoltà visive devono poter ingrandire il testo.
L'AI Bouwer, i temi di WordPress e la maggior parte degli altri costruttori di siti web inseriscono automaticamente questa riga in ogni pagina. Per un sito creato autonomamente o datato vale la pena controllare: apra una pagina, clicchi con il tasto destro, selezioni Visualizza sorgente pagina (o Ctrl+U) e cerchi con Ctrl+F il termine viewport.
Eseguire un test autonomamente
- Apra il Suo sito sul Suo telefono e scorra le pagine più importanti.
- Oppure dal computer: apra il Suo sito in Chrome o Firefox, prema F12 e clicchi sull'icona di un telefono e tablet. Scelga un dispositivo stretto.
- Presti attenzione a testo che esce dallo schermo, a una pagina che richiede uno scorrimento laterale, a pulsanti troppo piccoli o sovrapposti, e a parti mancanti nella versione mobile.
- Successivamente, effettui un test su PageSpeed Insights nella scheda Mobile. Come leggere questo rapporto è spiegato in Leggere PageSpeed Insights: i Core Web Vitals spiegati in parole semplici.
Il test di compatibilità mobile separato di Google e il rapporto sulla Usabilità mobile in Search Console non esistono più dal 1 dicembre 2023. Se li incontra in un articolo datato, utilizzi ora i passaggi sopra indicati.
Stesso contenuto su mobile e desktop
In un sito responsive (un solo indirizzo e un'unica pagina che si adatta alla larghezza dello schermo) il contenuto è automaticamente identico. Google consiglia questo approccio. Se dispone di un sito mobile separato, come m.example.com, oppure di un sistema che invia ai telefoni pagine diverse, verifichi quanto segue:
- lo stesso testo, anche se su mobile è contenuto in un blocco a comparsa;
- lo stesso titolo e la stessa descrizione;
- le stesse immagini con gli stessi testi alt;
- nessun contenuto che si carica solo quando il visitatore scorre, clicca o digita: Google non esegue queste azioni.
Per saperne di più
- Google: best practice per l'indicizzazione mobile-first (in inglese)
- MDN: la regola del viewport (in inglese)