Per mostrare contenuti diversi su mobile e desktop in WordPress puoi nascondere dei blocchi in base alla dimensione dello schermo, così ogni dispositivo riceve la stessa pagina e il browser nasconde ciò che non serve, oppure lasciare che il server riconosca il dispositivo e invii a ciascuno una pagina diversa. Nascondere per dimensione dello schermo è la scelta giusta per il layout e funziona con qualsiasi cache di pagina; le regole per dispositivo lato server servono nel raro caso in cui un telefono non debba ricevere affatto un certo contenuto.
Questo articolo spiega entrambi gli approcci, come impostarli (con l'editor a blocchi, un page builder, poche righe di CSS o un plugin) e le due trappole in cui cadono quasi tutti: la cache di pagina e l'indicizzazione mobile-first di Google.
Due modi per mostrare contenuti diversi su mobile e desktop
La differenza sta in dove viene presa la decisione.
- In base allo schermo (CSS): la pagina intera arriva a ogni visitatore. Delle regole di stile, chiamate media query, nascondono alcune parti quando lo schermo è più stretto o più largo di una certa misura. Non viene tolto nulla, semplicemente non viene mostrato.
- In base al dispositivo (lato server): quando la pagina viene richiesta, WordPress guarda cosa dice di sé il browser (lo user agent e, nei browser moderni, un'indicazione che dice «mobile» oppure no) e costruisce una pagina diversa per i telefoni e per i computer.
| In base allo schermo (CSS) | In base al dispositivo (lato server) | |
|---|---|---|
| Cosa decide | La larghezza della finestra del browser | Quello che il browser dice di essere |
| Contenuto nascosto nel codice sorgente | Sì, viene comunque inviato | No, non viene mai inviato |
| Funziona con una cache di pagina | Sì | Solo se la cache tiene copie separate per il mobile |
| Tablet | Trattati in base alla loro larghezza | Di solito contati come mobile |
| Una finestra desktop ristretta | Passa al layout mobile | Resta desktop |
| Adatto a | Layout: testi più brevi, immagini diverse, menu, pulsanti | Contenuti che un telefono non deve caricare o ricevere affatto |
Per la maggior parte dei siti la risposta è la prima colonna. Continua a leggere per capire quando la seconda vale la cura in più.
Opzione 1: nascondere i blocchi in base allo schermo
È quello che in pratica significa «design responsive»: una sola pagina, disposta in modo diverso su ogni schermo. Ci sono quattro modi comuni per farlo.
L'editor a blocchi di WordPress
Da WordPress 7.0 l'editor a blocchi può nascondere qualsiasi blocco supportato su desktop, tablet o mobile. Trovi l'opzione Nascondi nella barra degli strumenti del blocco e nella Vista elenco, dove una piccola icona segnala i blocchi con una regola di visibilità. Come spiega il team di WordPress nella nota per sviluppatori sulla visibilità dei blocchi (in inglese), i blocchi nascosti in questo modo restano nella pagina e l'occultamento avviene in CSS. In 7.0 i punti di interruzione (breakpoint) sono fissi.
Il tuo tema o page builder
I page builder hanno i loro interruttori. In Elementor, per esempio, seleziona un widget o un contenitore, apri la scheda Avanzato e usa Nascondi su Desktop, Nascondi su Tablet e Nascondi su Mobile nella sezione Responsive. Anche alcuni temi offrono opzioni simili. Controlla quali larghezze usa il tuo builder, perché possono essere diverse da quelle del tema.
Poche righe di CSS
Se te la cavi con un po' di codice, dai al blocco un nome di classe nel suo pannello Avanzate, nel campo Classe/i CSS aggiuntiva/e, per esempio nascondi-su-telefono. Poi aggiungi questa riga al CSS aggiuntivo del sito:
@media (max-width: 781px) { .nascondi-su-telefono { display: none; } }
Cambia il numero per spostare il punto di interruzione. Per l'effetto opposto usa min-width con una classe come nascondi-su-desktop.
Un plugin
Con Content Gate Pro, il pannello Visibilità di ogni blocco ha un'opzione Nascondi su con tre caselle: Telefono (schermi fino a 781 pixel di larghezza), Tablet (da 782 a 1023 pixel) e Scrivania (da 1024 pixel in su). Anche questa funziona in CSS, quindi è sicura con la cache di pagina, e richiede che Consenti di nascondere i blocchi in base allo schermo sia attiva nelle Impostazioni, come è di default. Su WordPress 7.0 l'opzione integrata copre già i casi semplici; il plugin è utile quando riservi lo stesso blocco anche agli utenti che hanno fatto accesso o a certi ruoli. Vedi Proteggi un singolo blocco.
Opzione 2: regole per dispositivo lato server
Qui WordPress decide prima che la pagina lasci il server. Il suo controllo, la funzione wp_is_mobile() (documentazione in inglese), legge la descrizione che il browser dà di sé. Il riferimento ufficiale è chiaro su tre punti: non misura la larghezza dello schermo, i tablet contano come dispositivi mobili e qualsiasi cache di pagina deve tenere copie separate per i visitatori mobile e desktop.
Quando ne vale la pena? Quando un telefono non deve ricevere qualcosa affatto, per esempio:
- un contenuto incorporato pesante, come un grande visualizzatore 3D o un configuratore, che preferisci non far caricare ai telefoni;
- il download di un software per desktop che su un telefono non ha senso;
- una pagina che deve mandare altrove i visitatori da telefono.
Come impostarlo con Content Gate
Le condizioni per dispositivo sono una funzione Pro. In una regola, il passaggio 6 Dispositivi ha due caselle, Scrivania e Telefono; se non spunti nulla vale per tutti i dispositivi. Il dispositivo si aggiunge al gruppo che mantiene l'accesso: spunta Scrivania ed entrano solo i visitatori da computer che corrispondono anche al passaggio 2 Chi può vedere, mentre i visitatori da telefono ricevono quello che dice il passaggio 4 Cosa ricevono gli altri, per esempio un messaggio o un reindirizzamento a una pagina pensata per il telefono. Su un sito dove i visitatori non fanno accesso, abbinalo a Solo i visitatori che non hanno fatto accesso.
Per una parte di pagina, lo shortcode accetta l'attributo devices: [content_gate who="logged_out" devices="desktop"]Scarica il software[/content_gate] mostra il testo solo ai visitatori da computer che non hanno fatto accesso. L'elenco completo delle opzioni è in Come funzionano le regole.
La guida stessa del plugin consiglia di non toccare le regole per dispositivo se non ti servono davvero. Il server sa distinguere un telefono da un computer, non la dimensione esatta dello schermo. I tablet contano come telefoni, tranne gli iPad recenti, che si presentano come un Mac e contano come desktop.
Cache di pagina e SEO: le due trappole
La cache di pagina
Una cache di pagina conserva una copia già pronta di ogni pagina e la serve ai visitatori successivi. Se il primo visitatore dopo lo svuotamento della cache arriva da un telefono, la versione mobile può essere servita a tutti, compresi i visitatori da desktop, finché la cache non scade. Nascondere in base allo schermo non ha questo problema, perché ogni dispositivo riceve la stessa pagina.
Se usi regole per dispositivo lato server, fai una di queste cose:
- attiva l'opzione del tuo plugin di cache o del tuo hosting che tiene una cache separata per i dispositivi mobili, se esiste;
- escludi dalla cache le pagine interessate;
- oppure chiedi al tuo hosting come la sua cache gestisce i visitatori mobile.
Google indicizza la versione mobile
Google usa la versione mobile di una pagina, scansionata con l'agente per smartphone, per l'indicizzazione e il ranking, e chiede che la versione mobile abbia gli stessi contenuti di quella desktop (vedi le best practice di Google per l'indicizzazione mobile-first). Se togli del testo sul server per i telefoni, probabilmente Google non lo vedrà mai. Tieni i contenuti importanti anche su mobile e usa le regole per dispositivo per gli extra, non per il testo con cui vuoi posizionarti.
Come provare entrambe le versioni
- Esci dall'account, o usa una finestra privata. Con Content Gate gli amministratori vedono sempre tutto, quindi dal tuo account le regole sembrano non funzionare.
- Occultamento in base allo schermo: restringi la finestra del browser, oppure usa la vista dispositivo degli strumenti per sviluppatori del browser, e guarda i blocchi comparire e sparire.
- Regole lato server: prova su un telefono vero. Una finestra desktop ristretta per il server è sempre un desktop.
- Con una cache: svuotala, apri la pagina prima su un telefono e poi su un computer, e controlla che ciascuno riceva la sua versione.
Quale opzione fa per te
Per mostrare contenuti diversi su mobile e desktop per ragioni di layout (un titolo più corto, un'immagine più piccola, un pulsante comodo da telefono), nascondi i blocchi in base allo schermo: usa l'editor a blocchi da WordPress 7.0 in poi, gli interruttori del tuo page builder o una riga di CSS. È semplice, funziona con ogni cache e segue l'approccio responsive che Google raccomanda.
Usa le regole per dispositivo lato server solo quando un telefono non deve ricevere qualcosa, e prepara la cache di conseguenza. Se usi già Content Gate per limitare i contenuti per ruolo utente, le sue condizioni per dispositivo della Pro ti permettono di aggiungere questa decisione alle stesse regole.
Domande frequenti
Nascondere un blocco su mobile rende la pagina più veloce?
Non necessariamente. Quando un blocco è nascosto in base allo schermo, il suo HTML viene comunque inviato al telefono e viene solo spenta la sua visualizzazione. Per impedire che un telefono riceva un contenuto serve una regola lato server.
Perché il contenuto per mobile compare su desktop?
Se il contenuto viene scelto sul server in base al dispositivo, probabilmente una cache di pagina ha salvato la versione per telefono e la serve a tutti. Tieni una cache separata per il mobile, escludi la pagina dalla cache oppure passa a nascondere in base allo schermo.
Mostrare contenuti diversi su mobile fa male alla SEO?
Cambiare il layout va benissimo. Togliere testo importante dalla versione mobile è rischioso, perché Google indicizza la versione mobile delle tue pagine.
I tablet contano come mobile o come desktop?
Se nascondi in base allo schermo, un tablet viene trattato in base alla sua larghezza. Con il riconoscimento lato server la maggior parte dei tablet conta come mobile, anche se gli iPad recenti si presentano come un Mac e vengono trattati come desktop.
