6 punti da tenere in considerazione per il Mobile
Il Mobile sta diventando sempre più importante, per questo motivo è fondamentale considerare ed avere una versione mobile del sito ben ottimizzata.
Grazie al crescente boom degli apparecchi portatili, anche Google sta offrendo sempre più soluzioni in quest’ottica, dopo la presenza all’interno del page speed e l’area dedicata all’interno del Google Webmaster Tool.
Proprio stamane fra l’altro un mio cliente mi ha segnalato una mail di errore inviatogli dal GWT inerente degli errori di visualizzazione da dispositivi mobili.
Google si è già adeguata da un po’, si pensi ad esempio ai nuovi annunci AdSense pensati appunto per il mobile, quelli con dimensione ‘Reattiva’ o ‘Dinamica’.
Sulla base della mia esperienza di diversi progetti SEO, ho creato questa breve guida che introduce il concetto del design pensato per il mobile.
Configurazione Siti per il Mobile
Nella gestione della versione mobile per il sito possiamo avere queste tre diverse configurazioni:
1. Responsive Web Design
2. Dynamic Serving
3. URL separati
Responsive Web Design
Quando utilizziamo la modalità responsive , il sito mobile avrà lo stesso codice HTML, gli stessi contenuti e le stesse URL a prescindere dal dispositivo scelto dell’utente.
Utilizzando l’attributo meta tag ” viewport ” nel sorgente del sito si aiuterà il browser ad identificare come regolare il contenuto.
I vantaggi del responsive web design
Il Responsive web design è molto popolare con piattaforme quali WordPress, ed è anche raccomandato da Google stessa.
Si dovrebbe prendere in considerazione il responsive perché :
- Facilità di condivisione dei contenuti da una singola URL
- Stesso contenuto per più pagine (desktop e mobile)
- Meno possibilità di commettere errori SEO
- Meno tempo di setup per le differenti versioni
- Googlebot utilizzerà meno risorse e rendere più efficiente la scansione
- Gli utenti non dovranno attendere i redirect del sito alla versione mobile
Come non fare il responsive:
Dynamic Serving
Con il dynamic serving le versioni desktop e mobile rispondono con codici sorgenti differenti (HTML, CSS e JS) mantenendo però la stessa URL.
Utilizzando l’intestazione HTTP Vary, si segnala in base alle richieste dell’utente quale versione servire.
URL separati
Come suggerisce il nome, questa configurazione implica avere URL diversi per la versione dekstop e mobile. Ogni URL è quindi univoca e dotata di codice HTML diverso per ogni rispettiva dimensione dello schermo.
Errori comuni da evitare in fase di progettazione mobile
1. Non bloccate Javascript, CSS e immagini
E’ comune per alcuni sviluppatori bloccare alcuni file Javascript, CSS ed immagini sui loro sito web. Questo è in realtà contro le linee guida di Google, perciò ricordatevi sempre di mantenere tutti i file visibili per il crawler del motore di ricerca.
Potrete testare la corretta visualizzazione del vostro sito utilizzando attraverso gli strumenti per i webmaster di Google il ‘Recupera e visualizza Pagina’.
Controllate sempre anche il robots.txt per assicurarvi di non nascondere nulla a Google.
2. Ottimizzate i video
Al fine di mostrare i video agli utenti (soprattutto a quelli Apple) suggeriamo di installare player video HTML5, per avere così la massima integrazione con tutti i dispositivi.
3. Siate chiari con le pagine 404
Alcuni siti web servono contenuti distinti per gli utenti desktop e mostrano pagine di errore 404 sgradevole per gli utenti mobili che accedono dalla stessa URL.
Ricordatevi sempre di implementare le corrette redirezioni se alcune pagine non sono visibili da mobile.
4. Usate il rel alternate media
Usate l’attributo Rel ‘Alternate media’ che vi permetterà di mappare facilmente la versione desktop con quella mobile.
5. Usate l’http header Vary ‘User – Agent’
Questa intestazione segnala ai server di caching utilizzati negli Internet Service Provider di tenere in considerazione lo user-agent per capire se pubblicare o meno la pagina in cache.
Senza questa intestazione la cache potrebbe mostrare agli utenti del mobile la versione cache della pagina desktop o viceversa.
6. Usate le sitemap per il mobile
Il Tag Canonical è usato per evitare problemi con contenuti duplicati.
Suggeriamo di aggiungere il Rel Canonical sulla versione mobile del sito web così da aiutare Google ad indicizzare correttamente le pagine del sito evitando contenuti duplicati o non originali.
I vantaggi di un design mobile friendly
I vantaggi nel disporre di un sito mobile sono molteplici.
- Più traffico dal sito web, si il mobile aiuta la SEO
- Miglioramento esperienze utente
- Tassi di conversione più elevati
- Maggiore tempo speso dagli utenti all’interno del tuo sito
- Frequenza di rimbalzo più bassa
- Tempi di caricamento della pagina più veloce
- Vantaggi di mercato competitivi, i competitor potrebbero non disporre ancora della versione mobile
- Coinvolgimento dell’utente, con conseguente aumento del brand awareness
- Incremento del CTR all’interno delle SERP, in quanto i siti che dispongono di una versione mobile hanno l’etichette mobile friendly, per far capire all’utente che la navigazione da mobile del sito è perfetta.
