Come posso assicurarmi che il mio sito sia mobile friendly? Una lista di controllo

Come riportato nel nostro riepilogo delle notizie SEM di venerdì, l'analista delle tendenze dei webmaster di Google John Mueller ha confermato che l'ultima ondata di modifiche al segnale di posizionamento ottimizzato per dispositivi mobili di Google è ora terminata.

Sin dall'iniziale aggiornamento " ^Mobilegeddon ", che ha debuttato il 21 aprile 2015, la compatibilità con i dispositivi mobili è stata un fattore di ranking significativo nei risultati di ricerca di Google. Nel suo post sul blog che prefigura le modifiche dell'algoritmo due mesi prima, Google ha affermato di volere che gli utenti "trovano più facile ottenere risultati di ricerca pertinenti e di alta qualità ottimizzati per i loro dispositivi [mobili]".

Google ha affermato e riaffermato il suo impegno per la compatibilità mobile nel corso degli anni, implementando un'etichetta "mobile friendly" per distinguere i siti Web adattati per dispositivi mobili, apportando modifiche alla pagina dei risultati di ricerca mobile, inclusi URL intuitivi e sitelink estesi, e il lancio di Accelerated Mobile Pages per fornire un'esperienza mobile ultraveloce.

Ora, con questo ultimo aggiornamento, Google ha ulteriormente rafforzato il suo segnale di ranking ottimizzato per i dispositivi mobili, rendendo ancora più importante per i webmaster avere un sito che soddisfi gli standard di Google.

Con questo in mente, come puoi assicurarti che il tuo sito sia all'altezza? Abbiamo messo insieme un pratico elenco di controllo delle cose che dovresti fare (o non fare) per ottenere la bolletta della salute mobile più pulita possibile da Google.

Non utilizzare Flash

La maggior parte dei browser per dispositivi mobili non è in grado di eseguire il rendering di contenuti Flash, quindi una regola pratica chiara nella creazione di un sito ottimizzato per dispositivi mobili è: non utilizzare Flash. Il rapporto sull'usabilità mobile di Google consiglia sassily di utilizzare "tecnologie Web moderne" per visualizzare invece i contenuti, le animazioni e la navigazione della pagina. Ahia!

Assicurati che il tuo viewport sia impostato correttamente

Un viewport è un tipo di meta tag che fornisce al browser istruzioni su come regolare le dimensioni della pagina e il ridimensionamento in base alle diverse larghezze del dispositivo. Questo dovrebbe apparire nell'intestazione della tua pagina web.

Se non è presente alcun tag viewport, i browser mobili visualizzeranno per impostazione predefinita la pagina alla larghezza dello schermo di un desktop. Google ha un tutorial su come impostare il viewport per la tua pagina e assicurarsi che sia accessibile.

Cosa non fare: imposta la tua finestra su una larghezza fissa. Alcuni sviluppatori definiranno il viewport su una larghezza di pixel fissa per adattarsi alle dimensioni comuni dello schermo mobile, ma questo non sarà comunque adatto a tutti i tipi di dispositivo, quindi Google non lo giudica mobile-friendly.

Se segui le istruzioni nel tutorial di Google e utilizzi il valore viewport width=device-width , ciò consentirà alla tua pagina di corrispondere alla larghezza di qualsiasi dispositivo utilizzato dai visitatori.

L'aggiunta dell'attributo initial-scale=1 consentirà inoltre alla tua pagina di riempire lo schermo indipendentemente dal fatto che il dispositivo sia verticale o orizzontale, sfruttando così l'intera larghezza dello schermo.

Infine, assicurati che il tuo contenuto abbia le dimensioni del viewport. Se imposti larghezze CSS assolute per elementi della pagina come immagini e video, ciò può causare un problema per i dispositivi che sono più stretti della larghezza che hai specificato. Puoi aggirare questo problema usando valori di larghezza relativa, come width: 100% , nel tuo CSS.

Usa caratteri grandi

Se hai configurato correttamente il tuo viewport, le dimensioni dei caratteri verranno ridimensionate in base al dispositivo dell'utente, ma Google fornisce alcuni suggerimenti aggiuntivi per i caratteri in aggiunta.

Si consiglia di utilizzare una dimensione del carattere di base di 16 pixel, con qualsiasi altra dimensione del carattere (come piccolo e grande) definita rispetto a quella linea di base. Lo spazio verticale tra le righe deve essere impostato a 1,2 em.

Cerca anche di evitare di utilizzare troppi caratteri e dimensioni dei caratteri diversi, il che porta a layout di pagina disordinati e complicati.

Distanzia i link e i pulsanti

Collegamenti e pulsanti, chiamati anche "tap target" da Google, sono più difficili da premere su un dispositivo mobile che su un browser desktop, perché le dita sono più larghe e generalmente meno precise del cursore del mouse.

Google penalizzerà tutte le pagine in cui i target di tocco sono troppo piccoli e ravvicinati per essere premuti con precisione.

Il polpastrello per adulti medio è largo circa 10 mm, quindi Google consiglia una dimensione minima del target del tocco di circa 7 mm o 48 pixel di larghezza, almeno per i target del tocco più importanti, come i pulsanti utilizzati di frequente, i collegamenti di navigazione, le barre di ricerca e i campi modulo.

I bersagli usati meno frequentemente possono essere più piccoli, ma dovrebbero comunque essere sufficientemente distanziati l'uno dall'altro in modo che un utente che tenta di premerne uno non colpisca accidentalmente un altro bersaglio. Lo spazio consigliato attorno a target di tocco più piccoli è di almeno 5 mm.

Non utilizzare i popup a schermo intero

Pop-up e overlay di grandi dimensioni oa schermo intero, detti anche "interstitial", come un modulo di iscrizione a una mailing list o una promozione di app, possono essere estremamente fastidiosi su un dispositivo mobile.

Sebbene un grande pop-up che attiri l'attenzione possa sembrare una buona idea dal punto di vista di un'azienda, Google riconosce che questi interferiscono con l'esperienza di navigazione di un sito su dispositivi mobili e penalizzeranno i siti che li utilizzano.

Invece di un popup a schermo intero, Google consiglia di utilizzare un banner o di implementare l'indicizzazione delle app, che consentirà ai contenuti della tua app di apparire nei risultati di ricerca, rendendolo un metodo di promozione molto efficace.

Esegui un controllo con gli strumenti di Google

Il modo più semplice per ricontrollare se il tuo sito sta raggiungendo tutti gli obiettivi giusti per l'ottimizzazione dei dispositivi mobili è utilizzare gli strumenti forniti da Google per eseguire un controllo.

La Search Console di Google, precedentemente nota come Strumenti per i Webmaster, ha una sezione "usabilità mobile" che diagnostica eventuali problemi persistenti con il tuo sito, di solito uno degli errori sopra elencati.

Puoi anche controllare lo stato mobile delle singole pagine web incollando l'URL nel test di ottimizzazione mobile di Google. E Google Developers ha una sezione che elenca gli errori comuni commessi durante la progettazione per dispositivi mobili, che ha alcuni dettagli aggiuntivi su cose come contenuti non riproducibili, reindirizzamenti errati e 404 e su come risolverli.

Il bisogno di velocità

Nei suoi consigli per lavorare con uno sviluppatore per creare un sito ottimizzato per i dispositivi mobili (se non sei in grado di apportare le modifiche necessarie al loro sito Web), Google suggerisce di chiedere al tuo sviluppatore di "prendere un impegno per la velocità".

Sebbene Google non includa una bassa velocità di caricamento come uno dei suoi problemi di compatibilità mobile "deve correggere", sappiamo che la velocità è un fattore di ranking e le statistiche mostrano che una bassa velocità di caricamento può spesso indurre gli utenti ad abbandonare le pagine web.

Quindi, se vuoi fornire la migliore esperienza utente e anche dare al tuo sito ottimizzato per dispositivi mobili le migliori possibilità di un posizionamento più elevato, considera di accelerarlo il più possibile.

PageSpeed ​​Insights di Google ha una scheda "mobile" che darà alla tua pagina una valutazione di velocità mobile su 100, con consigli su come correggere gli elementi che potrebbero rallentarla.

Conferirà inoltre alla tua pagina mobile un'esperienza utente classificata su 100 e segnalerà eventuali problemi di ottimizzazione dei dispositivi mobili allo stesso modo degli altri strumenti di Google.

Ci sono anche Accelerated Mobile Pages, le pagine Web mobili ultra veloci di Google che funzionano su una versione reinventata di HTML. Costruire una versione AMP del tuo sito per dispositivi mobili è un altro modo per essere sicuro che sia veloce e ottimizzato per i dispositivi mobili, sebbene molti SEO stiano ancora trattenendo l'implementazione di AMP per una serie di motivi. È un'opzione, ma non una necessità per avere un sito mobile veloce e compatibile con Google.

___
di Rebecca Sentenza