Mobile SEO: come costruire e ottimizzare un sito mobile

L’importanza di una presenza mobile.

Perché diventa necessario ottimizzare anche per la SEO mobile? Be’ prima di tutto, perché sono oramai più di dieci anni che si parla del boom del mobile, della sua importanza, ecc. ecc. Da alcuni anni gran parte dei siti web viene realizzato secondo la logica del “mobile first”, ovvero pensando prima alla progettazione del layout mobile del sito e non di quella desktop, come avveniva fino a pochi anni fa.

Inoltre, da qualche anno, grazie all’avvento del Mobile First Index, Google indicizza le pagine web a partire dalla loro versione mobile. Anche questo ha segnato un importante cambiamento, ponendo l’attenzione nella realizzazione di siti mobili snelli, semplici da navigare e con immediato accesso alle informazioni cercate dall’utente.

Ciò che dovrebbe spingere tutte le aziende ad investire in una presenza mobile ottimizzata, sono i punti elencati nella ricerca rilasciata qualche anno fa da Google e, che per sintetizzare, riporto nelle slides seguenti.

1. i consumatori ricercano sui siti mobile durante tutto il processo di acquisto.

2. i consumatori tendono a cercare la posizione di un punto vendita sul cellulare.

3. il 93% degli utenti che usa il mobile per ricercare arriva ad acquistare.

Da non sottovalutare neanche il fatto che sempre più utenti comprano (e compreranno) direttamente dai loro dispositivi mobili. Il resto lo potete leggere nel Think Insights di Google.

Tutto questo si scontra con la realtà italiana; quanti ristoranti hanno in Italia un versione mobile del loro sito? Pochissimi!

Le soluzioni per la costruzione di una presenza mobile.

Dal punto di vista tecnico è possibile progettare un sito mobile seguendo una delle tre alternative che seguono:

1. Responsive Design;

2. Dynamic Serving;

3. Sito separato con indirizzo url dedicato.

Analizzerò una per una le alternative evidenziandone pro e contro e fornendo le best practice per l’ottimizzazione seo (mobile seo).

1. Responsive Web Design.

credit immagine: SEL

La caratteristica principale del responsive design è che da qualsiasi dispositivo visualizzate un sito, il layout si adatterà alle dimensione dello schermo. Il responsive web design, oltre ad essere l’alternativa da noi preferita per la costruzione di un sito mobile, è quella consigliata dallo stesso Google.

Quindi ad esempio, agendo direttamente nel file css, utilizzando le media query, abbiamo la possibilità di definire come verrà visualizzato il template su dispositivi iPhone, anche in modalità landscape.

@media screen and (max-width: 600px) 
   { h1 { 
      font: 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif; 
      }
 }

Nell’esempio, il codice utile al cambiamento della dimensione del font.

I vantaggi del responsive Design sono:

• l’esistenza di un unico template html (più unico sito e quindi unica identità istituzionale per il brand nel web);
• unico file css, grazie alle media query;
• nessuno script per il riconoscimento del dispositivo;
• unica ottimizzazione SEO

Tra gli svantaggi del responsive, spesso si legge in giro che i tempi di caricamento dell’unico template siano elevati, rispetto alla costruzione di un sito separato. In realtà questo è un falso mito, perché dipende tutto da quello che intendiamo caricare. Se evitiamo di mostrare all’utente contenuti poco utili alle sue esigenze di navigazione come ad esempio l’advertising e/o dei video, i tempi di caricamento non saranno elevati e daremo priorità anche da mobile ai contenuti “above the fold”.

fonte immagine: feedthebot – prioritize visible content

2. Dynamic Serving

credit immagine: www.ayima.com

Attraverso il dynamic serving, abbiamo comunque un’unica url sulla quale verranno caricati i contenuti da mobile, il server però intercetta la tipologia di device che l’utente sta utilizzando e dal quale avviene la richiesta e restituisce il contenuto più appropriato per la tipologia di device. La differenza col responsive design è che in questo vengono erogati più template html e css a seconda del dispositivo che effettua la richiesta.

Tra i vantaggi del Dynamic Serving c’è sicuramente la possibilità di offrire template più personalizzati a seconda del dispositivo e, come per il responsive design, l’esistenza di un’unica url e identità istituzionale del brand. Tra gli svantaggi, le difficoltà di implementazione, in quanto dovrete dotarvi di un bravo programmatore che vada a modificare le intestazione HTTP affinché rispondano correttamente alle richieste.

GET /page-1 HTTP/1.1
Host: www.example.com
(...rest of HTTP request headers...)

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(... rest of HTTP response headers...)

3. Sito mobile separato

La terza alternativa è quella di sviluppare un sito mobile separato, su una url differente. Questa è, da quello che vedo, una delle alternative molto utilizzate. A mio modo di vedere è l’alternativa più complessa e dispendiosa da scegliere perché, oltre a dover costruire e mantenere due siti differenti (pensate a un e-commerce, quando dovrete aggiornate la linea di prodotti sul sito desktop dovrete aggiornarla anche nelle pagine del sito mobile), richiede una serie di interventi seo atti a far comprendere ai bot che ci si trova di fronte ad una versione mobile di un sito.

Tra i vantaggi, il sito separato offre però sicuramente la totale personalizzazione dell’esperienza di navigazione mobile.

Best practice sulla mappatura dei Redirects per siti mobili separati.

Innanzitutto bisogna fare molta attenzione alla correttezza dei redirects. Vi è mai capitato ad esempio di salvarvi una url da mobile, di un sito mobile separato, per poi doverla riaprire a casa dal vostro desktop e vedervi mostrata la versione mobile? (su desktop!). Oppure viceversa aprire una url di un sito dal vostro cellulare e vedervi caricare la sua versione desktop (e magari sapevate anche dell’esistenza della versione mobile del sito).

Facciamo quindi attenzione a reindirizzare gli utenti che richiedono una url del sito desktop alla sua corrispettiva url mobile e utenti che navigano da mobile e richiedono una url mobile, alla sua versione desktop.

Per la gestione dei redirects noi consigliamo la scrittura di uno script, da inserire in header che intercetta il dispositivo e carica la versione corretta.

Evitiamo quindi di vederci caricate, da desktop, situazioni del genere (e non parliamo di sitarelli eh!)

Cosa c’è di peggio di non reindirizzare l’utente (e il bot) alla corretta url? Reindirizzarlo alla homepage! Se la url richiesta dall’utente non ha una sua corrispettiva versione mobile è sempre meglio mostrargli la versione desktop della url richiesta. E’ inutile reindirizzarlo alla homepage, perché non è la homepage la risorsa che in quel momento l’utente sta richiedendo.

Redirects per navigazioni da Tablet

Inoltre Google consiglia di reindirizzare gli utenti tablet sulla versione desktop dei siti web, in quanto dai dati raccolti è venuto fuori come quest’ultima sia la versione preferita mentre si naviga da tablet.

Attenzione inoltre ai tempi di caricamento dei redirects da mobile, meglio tenerli i più brevi possibili. In questo studio è stato infatti mostrato come l’aggiunta anche di un solo secondo ai tempi di caricamento dei contenuti da mobile, impatti molto e negativamente su pagine viste, tasso di abbandono e conversioni.

credits: webperformancetoday

In termini di velocità di caricamento poi, tenere sempre d’occhio le prestazioni e i consigli di ottimizzazioni forniti da tool come PageSpeed di Google.

Aggiunta di meta tag per url mobile

Una cosa che non ho mai trovato presente e che sto consigliando ai programmatori con cui collaboro, è quella dell’aggiunta di due meta tag nelle versioni desktop e mobile delle url dei siti.

Negli header delle versioni mobile delle url sarà necessario aggiungere il rel=”canonical” che punta alla versione desktop della stessa url. Questo, oltre a consolidare indicizzazione e ranking della pagina, permetterà a Google di evitare potenziali problematiche di duplicazione contenutistica.

La versione desktop della url dovrà invece contenere il rel=alternate media, per mappare url desktop e mobile.

E con i Popup?

Infine, se l’azienda possiede anche un’applicazione mobile, evitiamo di mostrare un gigantesco pop-up all’utente che lo invita a scaricare l’applicazione. Semmai fosse necessario, mostriamogli il contenuto della pagina e il link al download dell’applicazione, come nell’esempio sotto riportato.

Concludendo: quale alternativa è migliore?

Diciamo che dipende molto da quali sono gli obiettivi della presenza mobile. Il sito è vetrina, informativo e l’obiettivo è quello di permettere la lettura di contenuti? Allora il sito responsive fa al caso vostro. Nel caso di progetti più complessi dove gli obiettivi sono quello di convertire, pensiamo a un’e-commerce, forse sarebbe meglio progettare un sito separato. In ogni caso però, il tutto dovrebbe prevedere un’analisi dettagliata dell’esperienza di ricerca dell’utente, andandosi a spulciare bene Google Analytics e confrontando devices di utilizzo e comportamento on-site.

fonte: https://ssl.gstatic.com/think/docs/creating-moments-that-matter-infographic_infographics.pdf