Come affrontare il mobilegeddon del 21 aprile in un’infografica

Il 21 aprile è, per chi lavora sul web, una data da segnare in rosso sul calendario, quella designata da Google per cominciare a punire chiunque non abbia ancora ben compreso che i siti web devono essere visualizzabili correttamente da mobile. Il 21 aprile è stato viene definito in tanti modi: mobilepocalyse, mobocalypse, mopocalypse e il nostro preferito, mobilegeddon. Non che debba essere considerata una novità, sono almeno due anni che i segnali lanciati da Google sono più che chiari, palese riflesso di quelle che sono le abitudini degli utenti, sempre più avvezzi all’utilizzo dei loro dispositivi mobile per fare ricerche, socializzare, spostarsi, condividere esperienze ed emozioni. Il mobile è entrato prepotentemente nelle vite di tutti noi, dai più giovani ai più anziani, e di sicuro Google non poteva stare a guardare né permettere che qualcuno lo facesse. Detto ciò dal 21 aprile sarà un obbligo rivedere la propria presenza online in funzione del mobile e l’infografica che proponiamo oggi, pubblicata da Search Engine Journal, riassume i passaggi fondamentali per affrontare il mobilegeddon.

Sono tre le configurazioni che possono essere adottate per rendere un sito mobile, la più consigliata è l’implementazione di un design responsive, ma non ci sono preferenze in merito da parte di Google. L’importante è che Google riesca a comprendere qual è la configurazione che è stata scelta e che sia accessibile da tutti gli user agent di Googlebot.

Responsive web design

Non è necessario cambiare il formato delle URL e non è necessario modificare il codice HTML delle pagine. Il sito è mobile perché viene realizzato in maniera che si adatti ai dispositivi da cui viene visualizzato. Il consiglio è di usare il metatag viewport nell’intestazione della pagina web, con la specifica width=device-width, initial-scale=1. Questo metatag serve a definire l’area visibile della pagina a seconda del dispositivo da cui il sito viene visualizzato.

Google, fra tutti, raccomanda l’utilizzo del responsive web design perché:

• È più facile per gli utenti condividere i tuoi contenuti, dal momento che le URL rimangono invariate.
• Facilita l’indicizzazione corretta delle pagine, senza richiedere segnali che indichino quali sono le pagine per desktop e quali per mobile.
• Non c’è bisogno di redirect nel caso di navigazione da mobile, perciò si riducono i tempi di caricamento delle pagine.
• Riduce la possibilità di errore.
• Richiede minor tempo di gestione del sito e minor tempo di sviluppo.
• Facilita la scansione del sito da parte dei crawler e consente a Google di rilevare più facilmente la freschezza dei contenuti che pubblichi.

Pubblicazione dinamica

Con questa configurazione le URL rimangono le stesse, ma cambia il codice HTML e i CSS. Secondo la definizione di Google: è una configurazione in cui il server risponde con un codice HTML (e CSS) diverso per lo stesso URL a seconda dello user-agent che richiede la pagina.

Richiede l’uso dell’intestazione HTTP Vary, che serve a indicare al browser che i contenuti della risposta variano in base allo user-agent che richiede la pagina.

I principali problemi con questa configurazione sono:

• Il rilevamento degli user-agent dipende dall’esistenza di un elenco di user-agent con cui effettuare un confronto, spesso però questi elenchi sono obsoleti e difficili da aggiornare, motivo per cui l’esperienza utente potrebbe essere negativa.
• È frequente che la corrispondenza tra user-agent sia errata, quindi uno user-agent mobile potrebbe essere rilevato come desktop e viceversa. Similmente accade che tablet e smartphone vengano trattati allo stesso modo, creando quindi problemi di visualizzazione.
• Occorre fare attenzione al cloaking (contenuti differenti per motore di ricerca e utenti), poiché quando viene rilevato lo user-agent viene cercato un riferimento al dispositivo nella stringa. Ogni user-agent Googlebot si identifica con uno specifico dispositivo, ad esempio Googlebot per smartphone si identifica con un iPhone perciò quello che vede tale user-agent deve essere uguale a quello che vedrebbe un utente che naviga con tale dispositivo.

URL separati

In questa configurazione cambiano le URL e cambia il codice HTML, poiché viene creata una versione apposita per il mobile. Per implementare questa soluzione è necessario:

• Utilizzare il tag link rel=”alternate” nella pagina desktop per indicare l’URL corrispondente su mobile.
• Utilizzare il tag link rel=”canonical” nella pagina mobile per indicare l’URL desktop corrispondente.

Insieme al rel=”alternate” è necessario indicare tramite tag media le dimensioni dello schermo da cui mostrare la versione alternativa della pagina. Le stesse indicazioni devono poi essere riportate nella sitemap, sempre con l’utilizzo del rel=”alternate”.

In questa configurazione è indispensabile mantenere un rapporto di tipo 1:1, ovvero a ogni pagina desktop deve corrispondere una pagina mobile e non indirizzare gli utenti verso altre pagine o verso l’homepage.

Altre raccomandazioni

• Assicurati che tutti i tuoi contenuti possano essere scansionati, per accertartene utilizza la funzione “Visualizza come Google” in Webmaster Tools.
• Testa il robots.txt, sempre in Google Webmaster Tools.
• Controlla le pagine del tuo sito con il Test di compatibilità con dispositivi mobili.
• Se si utilizzano URL eparati occorre controllare che i redirect vengano rilevati correttamente e funzionino.
• Utilizza l’HTML5 per i contenuti animati, in maniera che possano essere visti correttamente da tutti i dispositivi. Per i video assicurati di utilizzare un player compatibile anche con il mobile e di inserire una trascrizione dei video, dedicata a chi utilizza browser testuali.
• Controlla sempre la correttezza dei redirect e la quantità di 404 rilevate da Webmaster Tools. La pagina 404 deve essere ottimizzata per mobile, quindi in caso di URL separati o Pubblicazione dinamica ricordare che dalla pagina di errore è necessario riportare gli utenti all’homepage corretta per la versione che stanno navigando.
• Usare PageSpeed Insights per verificare la velocità delle pagine del sito e correggere gli errori rilevati.
• Nel design delle pagine web fai in modo che gli elementi possano essere toccati facilmente e senza errori. Non utilizzare Flash ed evita i pop-up, che si chiudono difficilmente da mobile.

Clicca sull’immagine per l’infografica completa