Sito Mobile E Ottimizzazione SEO: La Soluzione Migliore

29 Giu

Mobile SEO Soluzioni Applicative

Gli utenti sono sempre più orientati verso un mondo mobile

La disponibilità di dispositivi sempre più potenti e sempre più a basso costo ha cambiato le abitudini dei navigatori. Oggi le informazioni sono, e devono essere, a portata di smartphone. Secondo i dati di StatCounter, a maggio il mobile ha rappresentato il 41% del traffico e in Italia la soglia è ancora leggermente sotto al 25%.

La quota del mobile dipende moltissimo dal settore d’appartenenza del sito: uno dei nostri principali clienti nel mondo dell’arredamento con il suo ecommerce raggiunge quota 22% del traffico qualificato. Se però ci spostiamo nel settore informazioni, il nostro più grande cliente supera da mobile il 69%, del traffico qualificato con un picco negli ultimi mesi grazie all’applicazione di Accelerate Mobile Page, da noi coordinata.

Siti Mobile e SEO

Un sito mobile per essere ottimizzato (agli occhi di Google) deve:

Superare l’esame di Google Mobile Friendly: una serie di test automatici che consentono a Google di capire se quel sito è amichevolmente propenso alle SERP Mobile. Tale “esame” consente al sito di ottenere una piccola label in SERP “Mobile Friendly” e una spinta sul rank (posizionamento)
Avere la versione Accelerate Mobile Page, nel caso di sito già inserito nelle fonti news di Google
Avere una buona esperienza utente: diciamo che non è un fattore diretto di rank ma a lungo andare sicuramente porta benefici alla SEO (al posizionamento)
Avere una corretta impostazione strutturale: si possono scegliere 3 diverse modalità , che vedremo ora.

Le soluzioni di Google

Google ha dedicato davvero molto impegno nella creazione della documentazione per il mobile. In particolare ha definito in modo puntuale 3 soluzioni applicative affinché un sito sia ottimizzato dal punto di vista strutturale per il mobile: Responsive, Pubblicazione Dinamica, URL separati.

Mobile con Responsive

Il sito si adatta (per questo spesso chiamata anche soluzione adattativa) alla risoluzione del device. Questo è possibile tramite la corretta configurazione di CSS e Javascript.

Pregi:

Unico codice da manutenere e creare
Unico contenuto da indicizzare da parte di Google
È la soluzione di progettazione consigliata da Google, ma non per questo riceve un beneficio sul posizionamento

Difetti:

Prevedere l’adattamento in base alla risoluzione del browser
Prevedere la gestione della visualizzazione dei contenuti

Mobile con Pubblicazione Dinamica

Il server, in base al device che richiede una risorsa, può rispondere con un sito diverso: una sorta di cloaking legalizzato e ammesso. Quello che richiede Google è di inserire (devo andare sul tecnico) una notazione a livello di HTTP Header in cui si dice a Google che quel sito potrà presentare versioni diverse per la stessa URL a seconda del dispositivo: Vary: User-Agent.

Pregi:

Unica URL da gestire da parte di Google
Maggiore libertà per gli sviluppatori
Minor quantità di HTML/CSS/JS necessario

Difetti:

Sono a tutti gli effetti 2 siti da gestire (come frontend, cioè lato codice cliente)
Bisogna gestire gli User-Agent

Mobile con URL Separati

È la soluzione più impegnativa: si tratta di n siti diversi, in base a quante versioni del sito si vogliono costruire. Ogni versione del sito dovrà essere accessibile da URL diverse: in questo caso si consiglia l’uso di prefissi di dominio o di cartelle separate. Dal punto di vista SEO fortunatamente anche qui Google è stato molto chiaro, ma sono costretto a scendere in tecnicismi:

La versione desktop dovrà indicare, tramite il tag <link>, le versioni mobile disponibili in base al tipo di device o in base alle risoluzioni: su w3schools un’ampia carrellata dei valori possibili. Riporto di seguito un esempio applicativo:
```
<link rel="alternate" media="only screen and (max-width: 640px)" 
href="http://m.example.com/page-1">
```
Che si traduce in: solo gli screen (a cui appartengono anche gli smartphone e i tablet) con risoluzione fino a 640 pixel.
Le versioni mobile dovranno avere il canonical che punta sempre alla corrispondente URL desktop. Ad esempio:
```
<link rel="canonical" href="http://www.example.com/page-1">
```

Pregi:

Maggiore libertà per gli sviluppatori
Minor quantità di HTML/CSS/JS necessario
Possibilità di permettere all’utente di cambiare tra le versioni del sito (tramite la URL)

Difetti:

Sono due siti completamente diversi da gestire
Bisogna prevedere l’accorgimento tecnico dei link (canonical e alternate)

Che soluzione scegliere?

La risposta è una sola: quella che dà la migliore esperienza utente. In base al tipo di sito e al comportamento previsto degli utenti in relazione al mobile, una scelta può essere meglio di un’altra. Senza contare che è necessario scegliere anche in base alle capacità e ai limiti della produzione di cui disponiamo.

La soluzione in alcuni contesti potrebbe essere anche quella ibrida, ovvero due versioni del sito raggiungibili da URL diverse (www.example.com, m.example.com) ed entrambe responsive, in modo che siano in grado di adattarsi a tipologie di device diverse (mobile, desktop) ma anche dare il meglio con risoluzioni diverse.