Prima il mobile e il viewport

Modulo 4: Velocità, mobile e https · Tempo di lettura: 10 minuti

Obiettivo della lezione: Al termine di questa lezione saprà spiegare che cosa significa mobile-first indexing, riconoscere e scrivere un'impostazione corretta del viewport ed evitare le insidie per cui la Sua pagina mobile mostra meno contenuti o funziona peggio della pagina desktop.

Concetti chiave: mobile-first indexing, crawler per smartphone, design responsive, dynamic serving, sito mobile separato, <meta name="viewport">, width=device-width, initial-scale, blocco dello zoom, contenuti uguali, pop-up invasivi (interstitial), target di tocco

Google guarda con uno smartphone

Per molto tempo Google ha esaminato i siti web come farebbe un computer. Non è più così. Per indicizzare e posizionare le pagine, Google utilizza la versione mobile delle Sue pagine e la recupera con il crawler per smartphone di Googlebot. Questo si chiama mobile-first indexing. Nell'ottobre 2023 Google ha scritto che il passaggio è concluso: per quasi tutti i siti ora si parla semplicemente di "indicizzazione". Da luglio 2024 Google esegue la scansione con il crawler mobile anche degli ultimi siti che venivano ancora visitati con il crawler desktop; ciò che non è affatto raggiungibile da uno smartphone non può più essere indicizzato.

Che cosa significa in pratica? Ciò che non si trova sulla Sua pagina mobile, per Google non esiste. Se sullo smartphone omette una parte del testo, una tabella, gli orari di apertura o i dati strutturati "perché lo schermo è piccolo", Google non vede nemmeno quella parte.

Tre modi per realizzare un sito mobile

Quasi tutti i moderni strumenti per creare siti e i temi WordPress sono responsive. Anche un sito creato con l'AI Builder è responsive: un'unica pagina che si adatta. Se ha un vecchio sito con una versione m. separata, passare al responsive è spesso il miglioramento più importante che possa fare.

Il viewport: la riga che fa funzionare tutto

Il browser di uno smartphone non sa da solo che la Sua pagina è stata creata per uno schermo piccolo. Senza istruzioni si comporta come se lo schermo fosse molto più largo, ad esempio 980 pixel (l'esempio riportato nella documentazione di MDN), e riduce l'intera pagina finché non entra nello schermo. Risultato: un testo minuscolo su cui bisogna ingrandire. Anche un design responsive allora non funziona, perché il CSS crede che lo schermo sia largo.

La soluzione è una sola riga nella <head> di ogni pagina:

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

• width=device-width significa: rendi la pagina larga quanto lo schermo del dispositivo. Così il Suo CSS può lavorare con le larghezze dello schermo.
• initial-scale=1 significa: inizia senza ingrandire né ridurre.

È esattamente la riga consigliata da Lighthouse (il controllo integrato in Chrome e in PageSpeed Insights). Lighthouse boccia una pagina se la riga del viewport manca o non contiene width=.

Che cosa è meglio evitare

Alcuni siti aggiungono altro:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

In questo modo il visitatore non può più ingrandire. Sembra una soluzione ordinata ("il layout resta intatto"), ma per chi ha problemi di vista è un ostacolo. Le linee guida sull'accessibilità WCAG 2.2 richiedono, nel criterio di successo 1.4.4 (Ridimensionamento del testo, livello AA), che il testo possa essere ingrandito fino al 200 per cento senza perdita di contenuti o funzionalità. La regola di verifica ufficiale del W3C, "Meta viewport allows for zoom", boccia un viewport con user-scalable=no o con maximum-scale inferiore a 2. Ometta quindi queste parti. (Safari su iPhone oggi le ignora per impostazione predefinita, ma gli altri browser no.)

È sbagliata anche una larghezza fissa, come width=1024. In quel caso lo smartphone si comporta di nuovo come se lo schermo fosse largo 1.024 pixel e il Suo design responsive diventa inutile.

Contenuti uguali su mobile e desktop

Nella documentazione sul mobile-first indexing Google indica alcuni elementi che devono essere uguali in entrambe le versioni. Con un sito responsive lo sono automaticamente, con il dynamic serving e con un sito mobile separato occorre verificarlo:

• I contenuti stessi. Su mobile il testo può trovarsi in un blocco espandibile o in una scheda, ma deve essere presente nella pagina.
• Titolo e meta description (lezione 3.1) devono essere equivalenti.
• I dati strutturati (modulo 5) devono essere presenti in entrambe le versioni.
• Le immagini, con gli stessi testi alternativi e in buona qualità.
• Nessun contenuto che si carica solo dopo un'azione. Google lo dice esplicitamente: non caricare il contenuto principale solo quando il visitatore scorre, fa clic o digita; Googlebot non lo fa.
• robots.txt non deve bloccare le pagine mobili né i relativi CSS, JavaScript e immagini. Senza CSS Google non può vedere come appare la pagina.

Piacevole su uno schermo piccolo

Alcuni punti che Google indica come domande per una buona esperienza sulla pagina e che può controllare sul Suo smartphone:

• Testo leggibile senza dover ingrandire.
• Target di tocco (pulsanti, link in un menu) abbastanza grandi e non troppo ravvicinati, in modo da non toccare per sbaglio quello sbagliato.
• Nessun pop-up invasivo. Google scrive che gli elementi che coprono il contenuto (una finestra per la newsletter sull'intera pagina appena si entra) infastidiscono i visitatori e danneggiano la fiducia, e rendono più difficile per i motori di ricerca comprendere i Suoi contenuti. Preferisca una piccola barra. Le finestre obbligatorie per legge, come una verifica dell'età, non rientrano in questa linea guida.
• Nessuno scorrimento orizzontale: un'immagine o una tabella troppo larga spinge di lato l'intera pagina. Dia alle tabelle una propria barra di scorrimento.

A fine 2023 Google ha dismesso il test separato "Test di ottimizzazione mobile" e il rapporto Usabilità sui dispositivi mobili in Search Console. Oggi il controllo si fa con il proprio smartphone, con la visualizzazione mobile negli strumenti per sviluppatori del browser e con Lighthouse o PageSpeed Insights (lezione 4.3).

In pratica: controllare di persona

Apra il Suo sito in Chrome o Firefox sul computer, prema F12 e faccia clic sull'icona di uno smartphone e un tablet (barra degli strumenti del dispositivo). Scelga un dispositivo stretto e scorra le Sue pagine più importanti. Faccia attenzione al testo che esce dallo schermo, ai pulsanti sovrapposti e alle parti che mancano su mobile. Controlli poi nel codice sorgente (Ctrl+U) se la riga del viewport è presente.

L'AI Builder inserisce automaticamente la riga del viewport width=device-width, initial-scale=1 in ogni pagina. Lo fanno anche i temi WordPress e la maggior parte degli altri strumenti per creare siti. Con un sito fatto in casa o datato vale la pena verificarlo: è una sola riga, ma senza di essa il Suo design mobile non funziona affatto.

Riepilogo

• Google indicizza e posiziona la versione mobile delle Sue pagine; ciò che lì manca, Google non lo vede.
• Il design responsive è il metodo consigliato: un solo indirizzo, un solo HTML.
• Ogni pagina ha bisogno di <meta name="viewport" content="width=device-width, initial-scale=1">.
• Non blocchi lo zoom: niente user-scalable=no e niente maximum-scale inferiore a 2 (WCAG 1.4.4).
• Mantenga uguali contenuti, titolo, meta description e dati strutturati su mobile e desktop, ed eviti pop-up che coprono la pagina.

Quiz

Esercizio

Esercizio A4.2: La Sua pagina ha un viewport corretto? Inserisca l'indirizzo di una pagina (ad esempio la Sua homepage). Il programma legge l'HTML e verifica se nella <head> c'è esattamente un <meta name="viewport"> con width=device-width e se lo zoom non è bloccato (user-scalable=no o maximum-scale inferiore a 2). Osservi poi personalmente la stessa pagina nella visualizzazione mobile del Suo browser. Non ha un sito proprio? Usi www.wikipedia.org.

Per approfondire

• Google Search Central, Best practice per l'indicizzazione mobile-first: https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
• Google Search Central Blog, Mobile-first indexing has landed (2023): https://developers.google.com/search/blog/2023/10/mobile-first-is-here
• Google Search Central, Evitare interstitial e finestre di dialogo invasivi: https://developers.google.com/search/docs/appearance/avoid-intrusive-interstitials
• W3C, regola ACT Meta viewport allows for zoom: https://www.w3.org/WAI/standards-guidelines/act/rules/b4f0c3/
• MDN, Il meta tag viewport: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport
• W3C, Understanding SC 1.4.4 Resize Text: https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html