Over de meta viewport-tag
Wat is de meta viewport-tag?
De meta-viewport-tag vertelt een mobiele browser hoe groot de pagina moet worden weergegeven. Zonder deze tag gaan telefoons ervan uit dat de pagina voor een desktop is gebouwd, geven ze deze weer met een breedte van ongeveer 980 pixels en verkleinen ze het resultaat zodat het past. Zo ontstaat een pagina die in miniatuur leesbaar is, maar die niemand kan gebruiken zonder in te zoomen.
Het is één regel in de head en de schakelaar die ervoor zorgt dat responsieve CSS überhaupt effect heeft. Mediaqueries meten de viewport. Als de viewport fictief is, meet elk breekpunt dat je hebt ingesteld dus het verkeerde.
Een checker voor de meta-viewporttag is het uitvoeren waard op elke pagina die buiten je hoofdtemplate is gebouwd, omdat juist daar een ontbrekende tag bijna altijd opduikt.
Is de viewporttag in 2026 nog steeds belangrijk?
Absoluut, want zonder deze tag is al het andere werk voor mobiele apparaten verspild. Je kunt een perfect vloeiende stylesheet schrijven en een pagina publiceren die zich gedraagt alsof deze in 2009 is gebouwd.
Moderne thema’s bevatten deze tag standaard, en juist daarom is de afwezigheid ervan zo makkelijk over het hoofd te zien. Als de tag ontbreekt, is dat meestal in een aangepast template, op een campagne-landingspagina of op een pagina die is samengesteld met een tool die zijn eigen head heeft gegenereerd.
De instellingen zijn net zo belangrijk als de aanwezigheid. Er is een tag aanwezig die inzoomen uitschakelt; volgens deze test is dat correct, maar het vormt wel een toegankelijkheidsprobleem.
Hoe de viewport-tag zich verhoudt tot AI-zoekopdrachten
De tag heeft invloed op de mobiele weergave, en het is juist die mobiele weergave die wordt geïndexeerd. Een pagina die op een telefoon niet goed kan worden weergegeven, wordt in haar slechtst mogelijke vorm beoordeeld in plaats van in de vorm waarvoor deze bedoeld is.
De tag heeft op zichzelf geen betekenis die door een crawler wordt gelezen, maar de afwezigheid ervan ondermijnt alles wat erop volgt, waaronder hoeveel van de content zichtbaar is in de gerenderde weergave.
Het is een van de goedkoopste oplossingen op deze lijst en een van de weinige met een alles-of-niets-effect.
Best practices voor de viewport
- Neem deze op elke pagina op in de head.
- Stel de breedte in op de breedte van het apparaat en de beginschaal op 1.
- Schakel zoomen niet uit en beperk de maximale schaal niet. Zoomen voorkomen is een toegankelijkheidsprobleem.
- Controleer aangepaste pagina's en campagnepagina's afzonderlijk van het hoofdtemplate.
- Controleer dit op een echte telefoon en niet alleen in een desktopemulator.
Wat deze tool controleert
De tool leest de HTML van de pagina en rapporteert of er een meta-viewporttag aanwezig is.
Het controleert of de tag aanwezig is, niet welke instellingen deze bevat. Een tag die zoomen uitschakelt, wordt dus nog steeds goedgekeurd. Als de tag aanwezig is en de pagina zich op een telefoon nog steeds slecht gedraagt, zijn de instellingen het volgende dat je moet controleren.
Waar je nu verder kunt gaan
The viewport tag makes responsive layout possible; the rest is whether the layout is any good. See how the page actually renders on phone and tablet screens with the
mobiele responsiviteit test.