fatti trovare dai tuoi clienti
Corso SEO & HTML: #07 Meta Viewport
Mobile First è il mantra e le pagine web devono adeguarsi agli schermi dei telefonini, ma come? vediamo quali aspetti curare per essere in prima pagina...
« Corso SEO & HTML: #06 Lang Attribute
- Mobile First cos'è?
- Come si costruisce una pagina web adatta allo smartphone?
- Come differenziare un sito Desktop da un sito Mobile?
In questa rubrica sulla SEO dedicata alla scrittura di codice HTML ti spiego con parole semplici quali sono i tag HTML fondamentali di ogni pagina web per farti capire come è fatto un sito web in modo da sfruttare al meglio le conoscenze sulla SEO ed essere in prima pagina su Google, senza farti necessariamente diventare un webmaster o un hacker!
Meta Viewport
Come creare un design responsive in HTML
Abbiamo già parlato in questa rubrica di design responsive e se vuoi rileggere l'articolo te lo "linko" qui: «Corso SEO: 📱 mobile first!»
Per fare in modo che Google ti metta in prima pagina, il tuo sito web deve essere fruibile dai dispositivi mobili (smartphone). Però i telefonini hanno uno schermo molto piccolo rispetto ai computer desktop.
In genere la larghezza dello schermo degli smartphone varia da 240 a 480 pixel sulla linea orizzontale, mentre un computer desktop parte da un minimo di 640 pixel (quando la finestra del browser è aperta in modalità flottante) fino anche oltre i 1600 pixel di larghezza quando è "massimizzata" a tutto schermo.
Le proporzioni larghezza / altezza si invertono nello smartphone che è stretto e alto (9:16), mentre lo schermo del computer è schiacciato verticalmente e largo (16:9).
Se ci dimentichiamo di inserire nel nostro HTML il meta tag "viewport", il piccolo browser del nostro telefonino cercherà di far stare la pagina web come la vedremmo nel nostro computer all'interno del piccolo schermo, rimpicciolendo tutto o peggio ancora facendo fuoriuscire sbordando alcuni contenuti e costringendo l'utente a zoommare o scrollare la pagina web alla ricerca degli elementi sparsi qua e là...
"Zoommare" : allargare o stringere
"Scrollare" : spostare su e giù o a destra e a sinistra
a sinistra la versione web per PC-Desktop trasposta su telefonino: illeggibile tutto appiccicato, siamo costretti ad allargare con le dita per riuscire a leggere i contenuti, riceveremmo immediatamente una penalizzazione da parte di Google! - a destra la versione dello stesso sito ottimizzata per smartphone: le scritte riempiono lo schermo e sono ben leggibili, le parti cliccabili sono ben separate tra loro consentendo al polpastrello di toccarne una alla volta, non c'è bisogno di ingrandire per leggere i testi, il menu è raccolto in angolo nel simbolo a forma di "hamburger".
Se Google si accorge che il nostro sito costringe gli utenti smartphone a "zoommare" o "scrollare" o costringe gli utenti a cercare qua e là gli elementi piccoli e appiccicati o nascosti fuori dallo schermo, ci penalizza e ci sbatte fuori dall'indice del motore di ricerca!
Per risolvere questo problema esistono diversi approcci:
- soluzione lato server: erogare la versione adatta al dispositivo;
- soluzione responsive (mobile friendly): erogare una versione di HTML+CSS che si modifica automaticamente adattandosi al cambiare della dimensione dello schermo;
- soluzione mobile first: erogare una versione di HTML+CSS principalmente disegnata per essere fruita da smartphone ma che si può consumare anche da PC
Soluzione lato server
Il browser, nel momento in cui fa richiesta al server di una pagina web, invia le dimensioni dello schermo al server, o per lo meno il modello di dispositivo usato, attraverso una stringa chiamata "User-Agent" tramite la quale si può intuire la misura dello schermo del dispositivo in pixel.
Siccome il server web conosce le dimensioni dello schermo di ogni utente, potrebbe trasmettere un HTML differenziato a chi si connette tramite Smartphone rispetto a coloro che si connettono tramite PC-Desktop.
In principio, questo era l'unico approccio che si poteva adottare e ancora oggi esistono delle situazioni in cui è opportuno differenziare i contenuti delle pagine web tra smartphone e PC-Desktop "lato server".
Per la maggior parte dei casi, questo approccio è diventato ridondante e macchinoso e si preferisce una delle seconde soluzioni.
Soluzione responsive (mobile friendly)
Sebbene questa sia una soluzione che vede il PC-Desktop come principale fruitore delle pagine web del tuo sito, qualora le dimensioni della finestra del browser si dovessero rimpicciolire, o se dovessimo aprire la pagina web da un piccolo smartphone, le regole CSS impostate nel foglio di stile faranno in modo che gli elementi trovino sempre una loro giusta allocazione di spazio, in modo elegante e senza infastidire l'utente.
Il sito web resta comunque ottimizzato per piattaforma desktop, ma Google non penalizza più il sito, poiché vengono garantiti gli standard mobile: scritte leggibili, link abbastanza distanti tra loro e elementi che non sbordano fuori dallo schermo!
Tuttavia la soluzione migliore oggi è la terza: pensare un sito web principalmente per piattaforme mobile!
Soluzione mobile first
Oggi ci capita spesso di aprire un sito web da PC-Desktop e trovarci un po' a disagio poiché il sito è chiaramente disegnato per dispositivo mobile (smartphone) e non troviamo più i menu né le colonne o l'impaginazione a griglia come un tempo!
I link non saranno più delle frasi di testo sottolineate in blu ma dei grossi bottoni rettangolari o immagini o illustrazioni, adatti a ricoprire tutto lo spazio necessario ad un polpastrello sullo schermo dello smartphone.
Tutti gli elementi sono disposti in modo verticale e la navigazione avviene mediante la rotella del mouse.
L'esperienza da PC è leggermente compromessa, non si sfruttano più tutti gli spazi a disposizione, si presume che oltre l'80% degli utenti fruisca quei contenuti attraverso piccoli schermi, stretti e alti, e che l'utente tipicamente scorra il suo dito sullo schermo (scroll) dal basso verso l'alto, o che scorra il dito a destra e a sinistra (swipe) per passare da un contenuto all'altro.
Meta Viewport How To?
Per implementare soluzioni mobile friendly responsive o mobile first, si deve inserire una direttiva all'interno del tag <head> nel tuo HTML:
<meta name="viewport" content="width=device-width" />
In pratica, il meta tag "viewport" consente al browser di capire quale sia la relazione tra il numero di pixel fisici dello schermo e la dimensione "logica" dell'area visibile (viewport).
Alcuni browser come Safari, hanno una larghezza preimpostata a 980 pixel, quindi un contenuto a 320px apparirebbe minuscolo senza il meta tag "viewport" opportunamente configurato!
Con il meta tag appena visto stiamo dicendo al browser di impostare la larghezza della viewport (width) esattamente identica alla larghezza in pixel del schermo del dispositivo (device-width).
Naturalmente il browser tiene conto dell'orientamento del dispositivo, quindi — per fare un esempio — tenendo il telefonino in verticale la larghezza sarà 320 pixel, mentre tenendolo in orizzontale diventerà 1024 pixel.
A questo punto, siccome la larghezza dell'area visibile diventa 320 pixel (in alcuni dispositivi 240 in altri 480), bisogna tenerne conto adoperandosi opportunamente con i fogli di stile CSS che vedremo più avanti in questo Blog sulla SEO.
Siccome i dispositivi sono tutti diversi, il mio consiglio è quello di usare sempre misure relative e non assolute, cioè impostare la dimensione degli elementi in termini percentuali piuttosto che in numero di pixel!
Viewport Scalable
Di solito quando appoggiamo due o più dita sul telefonino, allargandole si aumenta l'ingrandimento dei siti web, stringendole si riduce la dimensione degli elementi!
Il creatore del sito ha la possibilità di bloccare il "fattore di zoom" in modo che l'utente non abbia la possibilità di ingrandire o rimpicciolire la pagina web, oppure impostare i limiti di ingrandimento o rimpicciolimento minimo e massimo.
Solitamente è una buona cosa bloccare lo zoom per dare dei confini e far sentire l'utente in un luogo più "sicuro", nel senso che un sito web che si allarga e si stringe può dar la sensazione di precario e poco affidabile! (ndr.)
Per bloccare lo zoom di una pagina web basta aggiungere la dicitura user-scalable=no in questo modo:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
A volte però il tuo sito potrebbe contenere delle immagini ricche di particolari e vorresti dare la possibilità di zoommare (allargare l'immagine) per apprezzare ogni dettaglio.
In tal caso potresti usare il seguente HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
Che imposta una scala iniziale a 1:1 però ammette che l'utente possa allargare o stringere a piacimento durante la navigazione, usando le gestures tipiche dello zoom usate sugli smartphone.
Conclusioni
Hai capito che il meta tag "viewport" ha un'enorme influenza sul posizionamento delle tue pagine web mobile first e se utilizzato opportunamente ti permette di essere in prima pagina su Google con maggiore facilità.
Staremo ancora all'interno del tag <head> — dove quello che scriviamo serve solo al browser e al crawler di GoogleBot — per approfondire argomenti SEO di un certo livello.
Ti do appuntamento alla prossima settimana, nel frattempo metti un like se questo articolo ti è stato utile e condividilo con tutti i tuoi amici che — come te — vogliono essere in prima pagina su Google, te ne saranno immensamente grati.
Se qualcosa non ti è chiaro, fammi le tue domande nei commenti, risponderò a tutti, oppure scrivimi in privato.
Iscriviti al Corso SEO Operativo per poter entrare nel gruppo privato dove parliamo ogni giorno di SEO e di come fare per essere in prima pagina su Google, a presto.