Je site weet niet dat telefoons bestaan: de viewport-tag
De viewport-tag is één regel in de head van je pagina. Hij vertelt telefoons dat ze je pagina op de breedte van het scherm moeten tonen. Zonder die regel doet een telefoon alsof hij een desktopscherm is en verkleint hij alles.
In het kud-rapport Je site weet niet dat telefoons bestaan
Waarom het uitmaakt
Zonder viewport-tag zien bezoekers een verkleinde desktopsite met piepkleine tekst en moeten ze knijpen en schuiven om iets te lezen. De meeste mensen haken dan direct af.
Google kijkt eerst naar de mobiele versie van je site. Een site die niet goed werkt op telefoons, wordt daar ook op beoordeeld.
Zo los je het op
- Zet de regel uit het voorbeeld in de head van elke pagina.
- Staat er al een viewport-tag zonder
width=device-width, bijvoorbeeld met een vaste breedte zoalswidth=1024? Vervang hem door het voorbeeld. - Zet er geen
user-scalable=noofmaximum-scale=1in; dat blokkeert inzoomen, zie de gids over inzoomen. - Controleer daarna of je site echt meeschaalt. Een viewport-tag helpt alleen als je CSS ook op kleine schermen is ingericht.
<meta name="viewport" content="width=device-width, initial-scale=1">Op jouw platform
- WordPress, Shopify en Wix
- Moderne thema's zetten deze tag standaard. Ontbreekt hij, dan gebruik je waarschijnlijk een heel oud thema; dan is overstappen vaak verstandiger dan repareren.
Veelgestelde vragen
Is mijn site met deze tag meteen mobielvriendelijk?
Nee. De tag zorgt dat je site op de juiste breedte getoond wordt. Of je opmaak daar goed uitziet, hangt af van je CSS.
Hoe test ik of mijn site goed werkt op mobiel?
Open hem op je eigen telefoon, en gebruik in Chrome de apparaatmodus van DevTools om verschillende schermen te proberen.