Heeft geen tag met breedte of initiële schaal

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:

Lighthouse-audit laat zien dat de pagina een viewport mist

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.

Bronnen