SEO Mobile

Mobile-first indexing

Dal marzo 2021 Google utilizza esclusivamente il mobile-first indexing per tutti i siti web. Questo significa che il crawler di Google (Googlebot) scansiona e indicizza la versione mobile delle pagine come versione primaria, indipendentemente dal dispositivo con cui l'utente effettua la ricerca.

Le implicazioni pratiche sono enormi: se il tuo sito ha contenuti, meta tag, dati strutturati o link interni presenti solo nella versione desktop ma non in quella mobile, Google semplicemente non li vedrà. Per verificare come Google visualizza il tuo sito mobile, utilizza il report "Usabilità su dispositivi mobili" in Google Search Console e lo strumento di test dell'URL.

Per garantire la compatibilità con il mobile-first indexing, assicurati che:

• La versione mobile contenga gli stessi contenuti della versione desktop (testo, immagini, video)
• I meta tag (title, description, robots) siano identici su mobile e desktop
• I dati strutturati (Schema Markup) siano presenti anche nella versione mobile
• Le immagini abbiano attributi alt e siano accessibili al crawler mobile
• I link interni puntino alle stesse URL sia da mobile che da desktop

"Non esiste più una versione mobile separata da ottimizzare: la versione mobile È il tuo sito web. Se non funziona su smartphone, non funziona per Google."

Responsive design

Il responsive web design (RWD) è l'approccio raccomandato da Google per la SEO mobile. Un sito responsive utilizza un'unica URL e un unico codebase che si adatta automaticamente alle dimensioni dello schermo del dispositivo tramite CSS media query.

Le tre principali strategie per servire contenuti mobili sono:

• Responsive design (raccomandato): un unico sito che si adatta a tutti i dispositivi. Stessa URL, stesso HTML, layout diverso tramite CSS. Google lo preferisce perché elimina problemi di duplicazione e semplifica la scansione
• Dynamic serving: stessa URL ma HTML diverso servito in base al dispositivo (tramite header Vary: User-Agent). Più complesso da gestire e soggetto a errori di rilevamento
• URL separate (m.example.com): versione mobile su dominio o sottodominio diverso. Approccio obsoleto che Google sconsiglia attivamente per la complessità di gestione e i rischi di contenuto duplicato

Il responsive design offre vantaggi SEO significativi: consolida il link equity su un'unica URL, semplifica la gestione del robots.txt e della sitemap, ed elimina la necessità di redirect tra versioni mobile e desktop che rallentano il caricamento.

Viewport meta tag

Il viewport meta tag è l'elemento HTML fondamentale che controlla come il browser mobile renderizza la pagina. Senza questo tag, il browser tenta di visualizzare la pagina nella larghezza desktop (tipicamente 980px), costringendo l'utente a zoomare e scorrere orizzontalmente.

La configurazione standard e raccomandata è:

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

Questo tag istruisce il browser a impostare la larghezza della viewport uguale alla larghezza del dispositivo e il livello di zoom iniziale al 100%. Errori comuni da evitare:

• Non impostare maximum-scale=1.0 o user-scalable=no: impedire lo zoom viola le linee guida di accessibilità e può penalizzare il sito nei test di usabilità mobile
• Non usare larghezze fisse: valori come width=320 non si adattano ai diversi dispositivi
• Non dimenticare il tag: l'assenza del viewport meta tag è uno dei problemi più comuni segnalati nel report di usabilità mobile di Google Search Console

Velocità mobile

La velocità di caricamento su mobile è un fattore di ranking confermato da Google e un elemento critico per l'esperienza utente. Le connessioni mobili, nonostante il 5G, restano mediamente più lente e instabili rispetto alle connessioni fisse, e i dispositivi mobili hanno meno potenza di calcolo per elaborare JavaScript complesso.

Strategie specifiche per la velocità mobile:

• Immagini responsive: usa l'attributo srcset e il tag <picture> per servire immagini ottimizzate per ogni dimensione di schermo. Formati moderni come WebP e AVIF riducono il peso fino al 50% rispetto a JPEG
• Lazy loading: carica immagini e iframe solo quando entrano nel viewport con l'attributo loading="lazy". Riduce drasticamente il tempo di caricamento iniziale
• Critical CSS inline: incorpora il CSS necessario per il rendering above-the-fold direttamente nell'HTML e carica il resto in modo asincrono
• Minimizza JavaScript: ogni KB di JavaScript richiede tempo di download, parsing ed esecuzione. Rimuovi script non necessari, usa il tree shaking e dividi il codice con il code splitting
• Service worker e cache: implementa una strategia di caching aggressiva per le visite successive e considera l'approccio Progressive Web App (PWA)
• Preconnect e prefetch: usa <link rel="preconnect"> per le risorse esterne critiche e <link rel="prefetch"> per le pagine probabilmente visitate successivamente

L'obiettivo è raggiungere un Largest Contentful Paint (LCP) inferiore a 2,5 secondi e un Interaction to Next Paint (INP) inferiore a 200ms anche su dispositivi di fascia media con connessione 4G. Monitora questi parametri nel report Core Web Vitals di Search Console.

UX mobile e touch targets

L'esperienza utente su mobile differisce radicalmente da quella desktop. Lo schermo è più piccolo, l'interazione avviene tramite tocco anziché mouse e l'attenzione dell'utente è più frammentata. Una UX mobile ottimizzata non è solo un fattore di ranking indiretto (tramite metriche di engagement) ma incide direttamente sul tasso di conversione.

Linee guida fondamentali per la UX mobile:

• Touch targets: i pulsanti e gli elementi interattivi devono avere una dimensione minima di 48x48 pixel (raccomandazione Google) con almeno 8px di spaziatura tra elementi adiacenti. Le WCAG 2.2 richiedono almeno 24x24 pixel come requisito minimo
• Font leggibili: dimensione base di almeno 16px per il testo del corpo. Evita font con tratti sottili che diventano illeggibili su schermi piccoli
• Navigazione semplificata: menu hamburger per la navigazione principale, breadcrumb per l'orientamento, pulsanti di azione (CTA) sempre visibili e raggiungibili con il pollice
• Form ottimizzati: input type appropriati (email, tel, number) per attivare la tastiera corretta, autocompletamento, riduzione dei campi al minimo indispensabile
• Contenuto prioritizzato: mostra le informazioni più importanti per prime. Il contenuto above-the-fold su mobile deve comunicare immediatamente il valore della pagina
• Nessun popup invadente: Google penalizza i siti che mostrano interstitial invadenti su mobile che coprono il contenuto principale. Gli unici interstitial consentiti sono quelli legali (cookie banner, verifica età)

"Un sito mobile non è una versione ridotta del desktop: è un'esperienza progettata per un contesto d'uso completamente diverso. Progetta per il pollice, non per il mouse."

AMP: pro e contro

AMP (Accelerated Mobile Pages) è un framework open source creato da Google nel 2015 per velocizzare il caricamento delle pagine mobili. Le pagine AMP utilizzano un sottoinsieme limitato di HTML e JavaScript, con risorse servite dalla cache CDN di Google.

Nel 2026, la situazione di AMP è notevolmente cambiata rispetto ai suoi anni d'oro: