Veel zoekmachines rangschikken pagina’s op basis van hoe mobielvriendelijk ze zijn. Zonder een viewport-metatag geven mobiele apparaten pagina's weer op de gebruikelijke breedte van het desktopscherm en schalen ze de pagina's vervolgens naar beneden, waardoor ze moeilijk leesbaar worden.
Door de viewport-metatag in te stellen, kunt u de breedte en schaal van de viewport bepalen, zodat deze op alle apparaten de juiste grootte heeft.
Hoe de Lighthouse-viewport-metatag-audit mislukt
Lighthouse markeert pagina's zonder viewport-metatag:
Een pagina slaagt niet voor de audit, tenzij aan al deze voorwaarden wordt voldaan: - De <head>
van het document bevat een tag <meta name="viewport">
. - De viewport-metatag bevat een content
. - De waarde van het content
omvat de tekst width=
.
Hoe u een viewport-metatag toevoegt
Voeg een viewport <meta>
-tag met de juiste sleutel-waardeparen toe aan de <head>
van uw pagina:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Dit is wat elk sleutel-waardepaar doet: - width=device-width
stelt de breedte van de viewport in op de breedte van het apparaat. - initial-scale=1
stelt het initiële zoomniveau in wanneer de gebruiker de pagina bezoekt.