Scan issue
Je site heeft geen correcte mobile viewport tag.
Zonder een viewport meta-tag rendert je site op mobiel als ingezoomde desktop-versie. Bezoekers moeten pinch-zoomen om iets te lezen, haken vrijwel direct af, en Google markeert je site als niet-mobielvriendelijk.
Uitleg
Wat is een viewport meta-tag?
De viewport meta-tag is één regel HTML in de `<head>` van je pagina die aan de browser vertelt hoe de site op een mobiel scherm moet worden weergegeven. De standaard luidt: `<meta name="viewport" content="width=device-width, initial-scale=1">`. Dit zegt tegen de browser 'gebruik de breedte van het apparaat en zoom niet automatisch in of uit'.
Zonder deze tag gaat de browser ervan uit dat je site voor een desktop is ontworpen (meestal 980 pixels breed) en probeert hij die breedte in het kleine scherm te persen. Resultaat: een ingezoomde desktopsite waar alle tekst onleesbaar is en je moet pinchen en scrollen om iets te kunnen zien.
Impact
Waarom Google hier streng op let.
Meer dan zestig procent van alle zoekopdrachten gebeurt op mobiel. Google gebruikt sinds 2019 'mobile-first indexing': ze beoordelen de mobiele versie van je site als standaard, niet de desktop-versie. Een ontbrekende viewport-tag is een rechtstreeks signaal dat je site niet voor mobiel is geoptimaliseerd.
Concreet verlies je twee dingen tegelijk: je daalt in mobiele zoekresultaten (vooral pijnlijk voor lokale bedrijven die via Google Maps worden gevonden), én bezoekers die toch op je site belanden bouncen vrijwel direct. De bouncerate op sites zonder correcte viewport ligt typisch boven de tachtig procent.
Het pijnlijke: dit is een fix van één regel code. Geen ontwerpwerk, geen functionele aanpassing. Puur een technische omissie die zichtbaar is voor elke moderne scanner en voor Google zelf.
Oplossen
De fix is klein, maar ga het goed doen.
Zes stappen om zeker te weten dat je site mobielvriendelijk rendert.
Voeg de standaard viewport-tag toe
Plaats `<meta name="viewport" content="width=device-width, initial-scale=1">` in de `<head>` van elke pagina. Voor Next.js App Router: exporteer een `viewport` constant in `app/layout.tsx`. Dit genereert de tag automatisch.
Zet geen maximum-scale of user-scalable=no
Een viewport-tag met `maximum-scale=1` of `user-scalable=no` blokkeert zoomen. Dat is slecht voor toegankelijkheid (mensen met slecht zicht kunnen niet inzoomen) en Google straft het af. Gebruik alleen de standaard: `width=device-width, initial-scale=1`.
Test op een échte mobiel, niet alleen in devtools
Chrome devtools simuleert mobiel maar toont niet altijd alle issues. Open je site op je eigen telefoon. Laadt het snel? Is alle tekst leesbaar zonder zoomen? Passen knoppen en formulieren in beeld?
Gebruik relatieve maten, geen vaste pixels
CSS met `width: 1200px` maakt je site op mobiel alsnog onbruikbaar, ook mét viewport-tag. Werk met `max-width`, percentages, `rem` units, of Tailwind's responsive classes. Zo past alles zich aan de schermbreedte aan.
Controleer met Google's Mobile-Friendly Test
Google heeft een gratis test: search.google.com/test/mobile-friendly. Die bevestigt of je fix werkt én laat problemen zien die je zelf niet ziet. Run het na elke grote wijziging.
Controleer Search Console voor mobiele fouten
Google Search Console toont een 'Mobile Usability' sectie met concrete paginagebonden fouten: tekst te klein, klikbare elementen te dicht bij elkaar, content breder dan scherm. Fix elk van deze apart.
Gratis scan
Heb je al een site? Scan 'm gratis voor we starten.
Zestien checks op techniek, commercieel en marketing. Het rapport vormt het startpunt van ons gesprek — met cijfers in plaats van aannames.
Verder lezen