Il tuo sito deve essere mobile-friendly. Questa dovrebbe essere la priorità numero uno al giorno d’oggi. Se vuoi migliorare il tuo posizionamento mobile, è necessario non soltanto migliorare le prestazioni del tuo sito, ma anche fare in modo che offra all’utente un’esperienza eccellente.
In questo articolo troverai una panoramica di best practice per migliorare il tuo sito mobile anche dal punto di vista SEO.
Quando un sito è mobile-friendly?
Un sito è ottimizzato per dispositivi mobili quando:
- viene caricato correttamente su un dispositivo mobile come uno smartphone o un tablet,
- viene caricato velocemente,
- presenta i contenuti in modo leggibile, senza che gli utenti debbano pizzicare lo schermo per ingrandire,
- la navigazione tra le sezioni del sito è facile e intuitiva,
- offre un valore aggiunto per gli utenti mobili,
- è immediatamente comprensibile per i motori di ricerca.
Perché è importante la SEO mobile?
La SEO per dispositivi mobili rende sicuro il tuo sito mobile garantendo la migliore presentazione possibile del tuo contenuto ad un utente mobile.
Dal momento che il nostro mondo è sempre più mobile-oriented, è diventato un must che i siti siano mobile-friendly.
Se il tuo sito non è disponibile per gli utenti mobili, o non lo è in modo adeguato, sappi che sta perdendo costantemente posizioni tra i risultati dei motori di ricerca e, quindi, ti sta facendo perdere reddito.
Per questo dovresti fare tutto quello che è in tuo potere per rendere sempre migliore la versione mobile del tuo sito, in realtà dovrebbe essere già eccellente!
Dall’inizio di quest’anno, Google utilizza anche la versione mobile del tuo sito per determinare la sua posizione nella SERP.
Non sai se il tuo site è responsive? Non hai idea di come fare a saperlo?
I migliori tool per verificare il sito
Ecco il tool online di google che ti permette di verificarlo in un secondo: mobile-friendly test.
Ipotesi 1. Il tuo sito non è responsive: devi subito correre ai ripari! Stai perdendo posizioni a vista d’occhio.
Ipotesi 2. Il tuo sito è responsive ma, come in ogni cosa, ci si può sempre migliorare. Google ci mette a disposizione un altro tool, che forse hai già visto: Page speed inside.
I risultati di questo tool saranno presentati su due diverse schede, una dedicata al mobile e una dedicata al desktop. Inutile dire che maggiore è il punteggio in entrambe le sezioni migliore sarà l’esperienza dell’utente e quindi il posizionamento.
C’è ancora uno strumento che vale la pena utilizzare, sempre by Google, testmysite.com. Questo articolo ti spiegherà come decifrare i punteggi che otterrai!
Oltre ai tool di Google citati dall’articolo che ti ho appena linkato, ci sono altri servizi, gratuiti ed online, che ti offrono una panoramica e valutazione del tuo sito dal punto di vista della velocità e ottimizzazione delle risorse.
Eccoli qui: gtmetrix.com e tools.pingdom.com. Non temere se il risultato è disastroso o se non comprendi tutto quello che viene evidenziato: controllare punto per punto e trovare una soluzione rimane sempre la migliore tattica!
Fino a questo momento abbiamo visto molti punteggi, magari negativi, vediamo ora come trasformarli, correggere e migliorare ogni aspetto per avere un sito davvero efficace !
Perché dovresti continuare a leggere questa guida? Perché ho raccolto SOLO indicazioni utili, comprensibili e subito applicabili.
Ci sono tante guide nel web in merito all’ottimizzazione e tutti gli strumenti di test offrono numerosi consigli… peccato che la maggior parte delle volte tutte queste cose risultino incomprensibili o meglio, fini a se stesse, sappiamo di avere un problema ma non come risolverlo.
Consigli PRATICI per migliorare il tuo sito web (da mobile e non solo)
Per capire davvero in che modo migliorare il proprio sito può essere utile suddividere tutti i suggerimenti che vedrai, in due macro-categorie, la velocità e l’usabilità.
La velocità di caricamento e fruizione di un sito è una discriminante importante in termini di bounce rate e di durata della visita (il bounce rate è la frequenza di rimbalzo ovvero quanti utenti dopo essere entrati sul tuo sito, se ne sono andati subito dopo).
L’usabilità è fondamentale per garantire un’esperienza positiva e completa all’utente che, se riesce a trovare un ambiente a sua portata, è più portato ad interagire con il tuo sito.
Vediamo ora nel dettaglio questi due aspetti partendo da una situazione che forse ti sarà famigliare.
1. Come ottimizzare la Velocità
Vediamo ora una serie di correzioni che si possono fare e che, se applicate tutte insieme, migliorano nettamente le prestazioni del tuo sito, da mobile come anche da desktop.
– Evita troppi reindirizzamenti.
Se hai, con gran fatica, realizzato il tuo sito e solo dopo ti sei accorto dell’enorme importanza che ha il mobile, forse rendere mobile-friendly il tuo sito sarà un’impresa troppo ardua. Non disperate una soluzione c’è ed è quella di realizzare un sito ad hoc per il mobile che avrà come indirizzo m.miosito.com/home. Il browser, leggendo la provenienza dell’utente lo porterà automaticamente sulla versione più consona.
Bisogna però evitare che ci siano troppi redirect automatici e quindi:
Corretto: miosito.com -> m.miosito.com/home.
Errato: miosito.com -> www.miosito.com -> m.miosito.com -> m.miosito.com/home.
– Ottimizza le immagini
Questione ormai trita e ritrita però spesso ci si dimentica di applicare questa regola.
Ripetiamo allora insieme come fare:
- ridimensiona e salva per web! Se hai a portata uno strumento potente come photoshop allora: ridimensiona in modo appropriato l’immagine, Esporta>Salva per Web, jpeg con qualità 40-60 e voilà, il gioco è fatto!
- altrimenti puoi utilizzare software gratuiti come ImageOptim o PicMonkey
- o ancora utilizzare plugin di WordPress come WP Smush o ShortPixel Image Optimizer
– Minimizza il codice – Caching, JavaScript, HTML….
Tante, tantissime cose tecniche da aggiustare. Cominciamo una per volta.
Facciamo un primo passo: hosting. L’hosting fa davvero la differenza in molti aspetti della resa del tuo sito, uno tra tutti la velocità.
Per andare sul sicuro affidati a sitegroung: hosting veloce e ampio margine di manovra (su WP Pratico c’è una guida molto esaustiva sulla scelta del piano adatto al tuo progetto e alla sua configurazione).
Diamo poi per scontato che tu abbia scelto il tema corretto: leggero, responsive, e soprattutto serio (a livello tecnico). Se hai dubbi su dove trovarlo: themeforrest, senza ombra di dubbio.
A questo punto ci sono alcuni plugin che possono aiutarci a gestire tutti o quasi gli aspetti tecnici.
Se hai preso la saggia decisione di affidarti a siteground allora amerai SG Optimizer, il plugin appositamente creato dal team di Siteground, per mettere le ali al tuo sito, in modo del tutto automatico!
Se non usi l’hosting segnalato, WP Super Cache è quello che fa per te.
WP Super Cache è un plugin dall’installazione davvero rapida e semplice che creerà dei file html statici del tuo blog, molto più leggeri e velocemente caricabili.
Il metodo che ti consiglio di scegliere per un’impostazione completa, efficace ma allo stesso tempo semplice è quella PHP Caching.
In tre semplici passaggi sarà tutto pronto:
1. Scegli la tab del menu “Facile”, seleziona “Cache attiva (raccomandato)” e clicca poi “Aggiorna lo stato”
2. Nella tab “Avanzato” imposta i seguenti settaggi:
- Cache hit di questo sito per accesso rapido (raccomandato);
- Utilizza PHP per servire i file in cache;
- Compressione delle pagine in modo che esse siano servite più rapidamente ai visitatori (raccomandato);
- Non servire pagine cache per utenti conosciuti;
- Rigenerazione cache. Serve un file supercache agli utenti anonimi quando un nuovo file è stato generato (raccomandato);
- Supporto;
- Extra homepage checks (raccomandato).
3. A questo nella tab “Pre-Carica”, clicca su Modalità Pre-Carica ed infine su Aggiorna Impostazioni.
Un altro plugin che ci viene in soccorso è Autoptimize. Anche in questo caso le impostazioni del plugin sono abbastanza semplici e tutte raccolte nella tab “principali” del menù”.
Per una prima impostazione, le voci da flaggare sono:
- Ottimizzare il codice HTML
- Ottimizzare il codice JavaScript
- Ottimizzare il codice CSS
- Aggregare anche il CSS inline
Se non vedi queste impostazioni controllate di aver selezionato la vista delle impostazioni avanzate.
– Usa pop-up SOLO ottimizzati per il mobile
Il problema principale dei popup è la loro chiusura, se da desktop ormai siamo diventati dei ninja nel chiudere i popup senza cliccarci sopra, da mobile la cosa ancora non ci riesce troppo bene.
Un po’ perché chi fa i banner non si cura della loro versione mobile e un po’ perché gli schermi -anche se possiedi un “telefono mattonella”- sono sempre e comunque più piccoli di quelli del computer.
Vuoi sapere come risolvere questo problema, senza perdere tutta la potenza-marketing dei popup?
Beh lascia che te lo dica: devi scegliere una soluzione premium! Leggiti tutti i consigli della guida per usare al meglio i popup e privilegia sempre le soluzioni adatte al mobile!
2. Come migliorare l’Usabilità del sito
Evita plug-in inutili e ridondanti
Sono gratis, facili da installare e sembra che ne esistano per ogni cosa MA non per questo è utile e saggio installarne troppi, soprattutto se finiscono per essere uno la copia dell’altro.
Mi raccomando: scegli i migliori plugin per wordpress e disattiva quelli che non usi più.
Configura l’area visibile
Le pagine ottimizzate per essere visualizzate correttamente sui dispositivi mobili devono includere un metatag viewport nell’intestazione del documento con la specifica width=device-width, initial-scale=1.
<meta name=viewport content="width=device-width, initial-scale=1”>
Troppo complicato? Vero, allora fai una cosa saggia, scegli un template responsive, uno di quelli professionali.
Imposta dimensioni appropriate per “target tocco”
Assicurati che il tuo sito mobile sia perfettamente leggibile su dispositivi mobili.
Chiediti: le immagini si vedono bene? Si vedono intere o vengono brutalmente tagliate
Ma soprattutto…
Quante volte vogliamo scegliere una voce di menù e invece finiamo per cliccarne 3 in contemporanea e non otteniamo nulla? Massima attenzione quindi alle dimensioni di link e pulsanti, rendili facilmente cliccabile (anche qui il template è essenziale).
Utilizza dimensioni di carattere leggibili
Lo stesso discorso fatto per i pulsanti è valido anche per la dimensione del carattere, controlla che il tuo testo sia leggibile da ogni dispositivo.
Integra Google AMP
Accelerated Pagine Mobile (AMP) è un nuovo progetto di Google e altri partner importanti per realizzare pagine web che si carichino super velocemente su dispositivi mobili.
Avvolgendo il contenuto del sito con uno special codice HTML, è possibile ottimizzare le pagine in un modo che Google utilizzi con loro una sorta di trattamento speciale. Le pagine vengono memorizzate nella cache da Google e mostrate all’utente con una presentazione ridotta per assicurarsi che la pagina venga caricata alla velocità della luce.
La tecnica delle AMP è ancora relativamente nuova, ma in rapida crescita. Quasi ogni sito può beneficiare di questa tecnica. Se il tuo sito è realizzato in WordPress è sufficiente installare il plugin ufficiale.
In Conclusione
Il mobile è il futuro. Questa affermazione andava bene qualche anno fa, il mobile è il presente. Fai tutto il possibile per renderlo perfetto, veloce, navigabile, usabile, rendi l’esperienza del tuo utente migliore possibile.
Non farlo solo per Google, per scalare i risultati, fallo per creare esperienze memorabili, per far restare gli utenti quanto più possibile sul tuo sito, per farli tornare spesso, per far si che si ricordino di te.
Se riuscirai a fare tutto questo, gli utenti diventeranno clienti e la risalita in SERP sarà una passeggiata.