\nUn sito \u00e8 ottimizzato per dispositivi mobili quando:<\/p>\n
- \n
- viene caricato correttamente su un dispositivo mobile come uno smartphone o un tablet,<\/li>\n
- viene caricato velocemente,<\/li>\n
- presenta i contenuti in modo leggibile, senza che gli utenti debbano pizzicare lo schermo per ingrandire,<\/li>\n
- la navigazione tra le sezioni del sito \u00e8 facile e intuitiva,<\/li>\n
- offre un valore aggiunto per gli utenti mobili,<\/li>\n
- \u00e8 immediatamente comprensibile per i motori di ricerca.<\/li>\n<\/ul>\n
Perch\u00e9 \u00e8 importante la SEO mobile?<\/h2>\n
![\"Mobile](\"http:\/\/www.wppratico.com\/wp-content\/uploads\/2017\/03\/icon_Mobile-Setting.png\")
La SEO per dispositivi mobili rende sicuro il tuo sito mobile garantendo la migliore presentazione possibile del tuo\u00a0contenuto ad un utente mobile.<\/p>\nDal momento che il nostro mondo \u00e8 sempre pi\u00f9 mobile-oriented, \u00e8 diventato un must che i siti siano mobile-friendly.<\/p>\n
Se il tuo sito non \u00e8 disponibile per gli utenti mobili, o non lo \u00e8 in modo adeguato, sappi che sta perdendo costantemente posizioni tra i risultati dei motori di ricerca e, quindi, ti sta facendo perdere reddito<\/strong>.<\/p>\n
Per questo dovresti fare tutto quello che \u00e8 in tuo potere per rendere sempre migliore la versione mobile del tuo sito, in realt\u00e0 dovrebbe essere gi\u00e0 eccellente!<\/p>\n
Dall’inizio di quest’anno, Google utilizza anche la versione mobile del tuo sito per determinare la sua posizione nella SERP.
\nNon sai se il tuo site \u00e8 responsive? Non hai idea di come fare a saperlo?<\/p>\nI migliori tool per verificare il sito<\/h2>\n
Ecco il tool online<\/strong> di google che ti permette di verificarlo in un secondo:\u00a0mobile-friendly test<\/a>.
\nIpotesi 1.<\/strong> Il tuo sito non \u00e8 responsive: devi subito correre ai ripari! Stai perdendo posizioni a vista d\u2019occhio.
\nIpotesi 2.<\/strong> Il tuo sito \u00e8 responsive ma, come in ogni cosa, ci si pu\u00f2 sempre migliorare. Google ci mette a disposizione un altro tool, che forse hai\u00a0gi\u00e0 visto:\u00a0Page speed inside<\/a>.<\/p>\n![\"test](\"http:\/\/www.wppratico.com\/wp-content\/uploads\/2017\/03\/tes-ottimizzazione-mobile-google.jpg\")
<\/p>\nI risultati di questo tool saranno presentati su due diverse schede, una dedicata al mobile e una dedicata al desktop. Inutile dire che maggiore \u00e8 il punteggio in entrambe le sezioni migliore sar\u00e0 l\u2019esperienza dell\u2019utente e quindi il posizionamento.<\/p>\n
C’\u00e8 ancora uno strumento che vale la pena utilizzare, sempre by Google, testmysite.com. Questo articolo<\/a> ti spiegher\u00e0 come decifrare i punteggi che otterrai!<\/p>\n
Oltre ai tool di Google citati dall\u2019articolo che ti ho appena linkato, ci sono altri servizi, gratuiti ed online, che ti offrono una panoramica e valutazione del tuo\u00a0sito dal punto di vista della velocit\u00e0 e ottimizzazione delle risorse.<\/p>\n
Eccoli qui:\u00a0gtmetrix.com<\/a>\u00a0e tools.pingdom.com<\/a>. Non temere se il risultato \u00e8 disastroso o se non comprendi tutto quello che viene evidenziato: controllare\u00a0punto per punto e trovare una soluzione rimane sempre la migliore tattica!<\/p>\n
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 !<\/p>\n
Perch\u00e9 dovresti continuare a leggere questa guida? Perch\u00e9 ho raccolto SOLO indicazioni utili, comprensibili e subito applicabili.<\/p>\n
Ci sono tante guide nel web in merito all\u2019ottimizzazione e tutti gli strumenti di test offrono numerosi consigli\u2026 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.<\/p>\n
![\"\"](\"http:\/\/www.wppratico.com\/wp-content\/uploads\/2017\/03\/ping-tool.jpg\")
<\/p>\n<\/p>\n
Consigli PRATICI per\u00a0migliorare il tuo sito web (da mobile e non solo)<\/h2>\n
Per capire davvero in che modo migliorare il proprio sito pu\u00f2 essere utile suddividere tutti i suggerimenti che vedrai, in due macro-categorie, la velocit\u00e0 e l\u2019usabilit\u00e0.<\/p>\n
La velocit\u00e0<\/strong> di caricamento e fruizione di un sito \u00e8 una discriminante importante in termini di bounce\u00a0rate e di durata della visita (il bounce rate\u00a0\u00e8 la frequenza di rimbalzo ovvero quanti utenti dopo essere entrati sul tuo sito, se ne sono andati subito dopo<\/em>).<\/p>\n
L\u2019usabilit\u00e0<\/strong> \u00e8 fondamentale per garantire un\u2019esperienza positiva e completa all\u2019utente che, se riesce a trovare un ambiente a sua portata, \u00e8 pi\u00f9 portato ad interagire con il tuo\u00a0sito.<\/p>\n
Vediamo ora nel dettaglio questi due aspetti partendo da una situazione che forse ti sar\u00e0 famigliare.<\/p>\n
1. Come ottimizzare la Velocit\u00e0<\/strong><\/h2>\n
![\"time\"](\"http:\/\/www.wppratico.com\/wp-content\/uploads\/2017\/03\/icon_Campaign-Timing-2.png\")
<\/strong><\/h2>\nVediamo ora una serie di correzioni che si possono fare e che, se applicate tutte insieme, migliorano nettamente le prestazioni del tuo\u00a0sito, da mobile come anche da desktop.<\/p>\n
– Evita troppi reindirizzamenti.<\/h4>\n
Se hai, con gran fatica, realizzato il tuo\u00a0sito e solo dopo ti sei accorto dell\u2019enorme importanza che ha il mobile, forse rendere mobile-friendly il tuo\u00a0sito sar\u00e0 un\u2019impresa troppo ardua. Non disperate una soluzione c\u2019\u00e8 ed \u00e8 quella di realizzare un sito ad hoc per il mobile che avr\u00e0 come indirizzo m.miosito.com\/home<\/a>. Il browser, leggendo la provenienza dell\u2019utente lo porter\u00e0 automaticamente sulla versione pi\u00f9 consona.
\nBisogna per\u00f2 evitare che ci siano troppi redirect automatici e quindi:
\nCorretto: miosito.com -> m.miosito.com\/home.
\nErrato: miosito.com -> www.miosito.com -> m.miosito.com -> m.miosito.com\/home<\/a>.<\/p>\n– Ottimizza le immagini<\/h4>\n
Questione ormai trita e ritrita per\u00f2 spesso ci si dimentica di applicare questa regola.
\nRipetiamo allora insieme come fare:<\/p>\n- \n
- ridimensiona e salva per web! Se hai\u00a0a portata uno strumento potente come photoshop allora: ridimensiona in modo appropriato l’immagine, Esporta>Salva per Web, jpeg con qualit\u00e0 40-60 e voil\u00e0, \u00a0il gioco \u00e8 fatto!<\/li>\n
- altrimenti puoi\u00a0utilizzare software gratuiti come ImageOptim o PicMonkey<\/li>\n
- o ancora utilizzare plugin di WordPress come WP Smush o ShortPixel Image Optimizer<\/li>\n<\/ul>\n
– Minimizza il codice – Caching, JavaScript, HTML\u2026.<\/h4>\n
Tante, tantissime cose tecniche da aggiustare. Cominciamo una per volta.<\/p>\n
Facciamo un primo passo: hosting<\/strong>. L\u2019hosting fa davvero la differenza in molti aspetti della resa del tuo\u00a0sito, uno tra tutti la velocit\u00e0.<\/p>\n
Per andare sul sicuro affidati a sitegroung<\/a>: hosting veloce e ampio margine di manovra (su WP Pratico c’\u00e8 una guida molto esaustiva<\/a> sulla scelta del piano adatto al tuo progetto e alla sua configurazione).<\/p>\n
Diamo poi per scontato che tu abbia scelto il tema corretto<\/a>: leggero, responsive, e soprattutto serio (a livello tecnico). Se hai\u00a0dubbi su dove trovarlo: themeforrest<\/a>, senza ombra di dubbio.<\/p>\n
A questo punto ci sono alcuni plugin che possono aiutarci a gestire tutti o quasi gli aspetti tecnici.<\/p>\n
Se hai\u00a0preso 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!<\/p>\n
![\"SuperCacher](\"http:\/\/www.wppratico.com\/wp-content\/uploads\/2017\/03\/SuperCacher-for-WordPress-by-SiteGround.jpg\")
<\/p>\nSe non usi l’hosting segnalato, WP Super Cache<\/a> \u00e8 quello che fa per te.<\/p>\n
WP Super Cache<\/strong> \u00e8 un plugin dall\u2019installazione davvero rapida e semplice che creer\u00e0 dei file html statici del tuo\u00a0blog, molto pi\u00f9 leggeri e velocemente caricabili.<\/p>\n
Il metodo che ti consiglio di scegliere per un\u2019impostazione completa, efficace ma allo stesso tempo semplice \u00e8 quella PHP Caching.<\/p>\n
In tre semplici passaggi sar\u00e0 tutto pronto:
\n1. Scegli la tab del menu \u201cFacile\u201d, seleziona \u201cCache attiva (raccomandato)\u201d e clicca poi \u201cAggiorna lo stato\u201d
\n2. Nella tab \u201cAvanzato\u201d imposta i seguenti settaggi:<\/p>\n- \n
- Cache hit di questo sito per accesso rapido (raccomandato);<\/li>\n
- Utilizza PHP per servire i file in cache;<\/li>\n
- Compressione delle pagine in modo che esse siano servite pi\u00f9 rapidamente ai visitatori (raccomandato);<\/li>\n
- Non servire pagine cache per utenti conosciuti;<\/li>\n
- Rigenerazione cache. Serve un file supercache agli utenti anonimi quando un nuovo file \u00e8 stato generato (raccomandato);<\/li>\n
- Supporto;<\/li>\n
- Extra homepage checks (raccomandato).<\/li>\n<\/ul>\n
3. A questo nella tab \u201cPre-Carica\u201d, clicca su Modalit\u00e0 Pre-Carica ed infine su Aggiorna Impostazioni.<\/p>\n
Un altro plugin che ci viene in soccorso \u00e8 Autoptimize<\/strong><\/a>. Anche in questo caso le impostazioni del plugin sono abbastanza semplici e tutte raccolte nella tab \u201cprincipali\u201d del men\u00f9\u201d.<\/p>\n
Per una prima impostazione, le voci da flaggare sono:<\/p>\n
- \n
- Ottimizzare il codice HTML<\/li>\n
- Ottimizzare il codice JavaScript<\/li>\n
- Ottimizzare il codice CSS<\/li>\n
- Aggregare anche il CSS inline<\/li>\n<\/ul>\n
![\"\"](\"http:\/\/www.wppratico.com\/wp-content\/uploads\/2017\/03\/autoptimize.jpg\")
<\/p>\nSe non vedi\u00a0queste impostazioni controllate di aver selezionato la vista delle impostazioni avanzate.<\/p>\n
– Usa\u00a0 pop-up SOLO ottimizzati per il mobile<\/h4>\n
Il problema principale dei popup \u00e8 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.<\/p>\n
Un po’ perch\u00e9 chi fa i banner non si cura della loro versione mobile e un po’ perch\u00e9 gli schermi -anche se possiedi\u00a0un \u201ctelefono mattonella\u201d- sono sempre e comunque pi\u00f9 piccoli di quelli del computer.<\/p>\n
Vuoi sapere come risolvere questo problema, senza perdere tutta la potenza-marketing dei popup<\/strong>?<\/p>\n
Beh lascia che te lo dica: devi scegliere una soluzione premium! Leggiti tutti i consigli della guida per usare al meglio i popup<\/a> e privilegia sempre le soluzioni adatte al mobile!<\/p>\n
2. Come migliorare l’Usabilit\u00e0 del sito<\/strong><\/h2>\n
![\"\"](\"http:\/\/www.wppratico.com\/wp-content\/uploads\/2017\/03\/icon_Tablet.png\")
Evita plug-in inutili e ridondanti<\/h4>\nSono gratis, facili da installare e sembra che ne esistano per ogni cosa MA non per questo \u00e8 utile e saggio installarne troppi, soprattutto se finiscono per essere uno la copia dell\u2019altro.<\/p>\n
Mi raccomando: scegli i migliori plugin per wordpress<\/a> e disattiva quelli che non usi pi\u00f9.<\/p>\n
Configura l’area visibile<\/h4>\n
Le pagine ottimizzate per essere visualizzate correttamente sui dispositivi mobili devono includere un metatag viewport<\/strong> nell’intestazione del documento con la specifica width=device-width, initial-scale=1.
\n<meta name=viewport content=\"width=device-width, initial-scale=1\u201d><\/code>
\nTroppo complicato? Vero, allora fai\u00a0una cosa saggia, scegli\u00a0un template responsive<\/a>, uno di quelli\u00a0professionali.<\/p>\nImposta dimensioni appropriate per “target tocco”<\/h4>\n
Assicurati che il tuo sito mobile sia perfettamente leggibile su dispositivi mobili.<\/p>\n
Chiediti: le immagini si vedono bene? Si vedono intere o vengono brutalmente tagliate<\/p>\n
Ma soprattutto…<\/p>\n
Quante volte vogliamo scegliere una voce di men\u00f9 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<\/a> \u00e8 essenziale).<\/p>\n
Utilizza dimensioni di carattere leggibili<\/h4>\n
Lo stesso discorso fatto per i pulsanti \u00e8 valido anche per la dimensione del carattere, controlla che il tuo\u00a0testo sia leggibile da ogni dispositivo.<\/p>\n
Integra Google AMP<\/h4>\n
![\"\"](\"http:\/\/www.wppratico.com\/wp-content\/uploads\/2017\/03\/amp.jpg\")
<\/p>\n