Molti motori di ricerca classificano le pagine in base al loro livello di ottimizzazione mobile. In assenza di un meta tag dell'area visibile, i dispositivi mobili visualizzano le pagine con le normali larghezze degli schermi dei computer desktop e quindi ne ridimensionano le pagine, rendendole difficili da leggere.
L'impostazione del meta tag dell'area visibile ti consente di controllare la larghezza e il ridimensionamento dell'area visibile in modo che venga ridimensionato correttamente su tutti i dispositivi.
In che modo il controllo dei meta tag dell'area visibile Lighthouse non va a buon fine
Lighthouse segnala le pagine senza un meta tag area visibile:
Una pagina non supera il controllo, a meno che non vengano soddisfatte tutte le seguenti condizioni:
- L'elemento <head>
del documento contiene un tag <meta name="viewport">
.
- Il meta tag dell'area visibile contiene un attributo content
.
- Il valore dell'attributo content
include il testo width=
.
Come aggiungere un meta tag dell'area visibile
Aggiungi un tag <meta>
dell'area visibile con le coppie chiave-valore appropriate alla sezione <head>
della pagina:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Ecco cosa fa ogni coppia chiave-valore:
- width=device-width
imposta la larghezza dell'area visibile sulla larghezza del dispositivo.
- initial-scale=1
imposta il livello di zoom iniziale quando l'utente visita la pagina.