Google kijkt naar de mobiele versie van je site. Niet als tweede controle, maar als de versie die bepaalt wat er in de zoekresultaten komt. Dat heet mobile-first indexing en het geldt inmiddels voor het hele web. Staat er iets alleen in je desktopversie, dan telt het niet mee.
Voor de meeste bedrijven is dat ook gewoon waar het publiek zit: op een telefoon, staand in een winkel of onderweg. Dit artikel gaat over de drie dingen die een pagina op zo’n scherm bruikbaar maken: de viewport-tag, de grootte van je knoppen en de leesbaarheid van je tekst. Het zijn de controles die je in een SEO-rapport terugvindt als “Mobiele viewport”, “Tapdoelen” en “Leesbare tekstgrootte”.
De viewport-tag
Eén regel in de <head> van je pagina bepaalt of een telefoon je opmaak serieus neemt:
<meta name="viewport" content="width=device-width, initial-scale=1">
Hij zegt tegen de browser: gebruik de echte breedte van dit toestel. Ontbreekt hij, dan doet een mobiele browser iets anders. Hij gaat ervan uit dat de pagina voor een desktopscherm van ongeveer 980 pixels gemaakt is, rendert hem op die breedte en krimpt het geheel dan tot het past. Het resultaat is een complete website, netjes opgemaakt, in lettertjes van drie millimeter.
Dit is de zwaarste van de drie controles, en terecht. Zonder viewport werkt geen enkele responsive stylesheet: al je media queries kijken naar een breedte die het toestel helemaal niet heeft.
Zoomen blokkeren: technisch toegestaan, praktisch niet doen
In diezelfde tag kun je user-scalable=no of maximum-scale=1 zetten. Dan kan de bezoeker niet meer met twee vingers inzoomen. Dat wordt vaak gedaan omdat een ontwerp dan “strakker aanvoelt” op een telefoon.
Google straft het niet af, dus wij trekken er geen punten voor af. Maar iemand met slechte ogen rekent op die knijpbeweging, en die haalt hem nu niet. Voor een handvol pixels ontwerpverfijning sluit je een deel van je bezoekers buiten. Laat zoomen toe.
Tapdoelen: knoppen die je met een duim raakt
Een muisaanwijzer is één pixel breed. Een duim is ongeveer negen millimeter. Alles wat aangeklikt moet worden op een telefoon heeft dus ruimte nodig: als richtlijn minstens 48 bij 48 pixels, met genoeg witruimte ertussen zodat je niet per ongeluk de buurman raakt.
Waar het meestal misgaat: menu-items die als lijst onder elkaar staan met een paar pixels ertussen, kleine social-icons in de footer, links midden in een lopende tekst die dicht op elkaar staan, en tabellen die op mobiel te klein worden weergegeven.
De kosten van een mis-tap zijn hoger dan ze lijken. Iemand die op de verkeerde link tikt, moet terug, wachten tot de vorige pagina opnieuw laadt en het opnieuw proberen. Een deel doet dat niet.
Leesbare tekst
Tekst kleiner dan ongeveer twaalf pixels dwingt een bezoeker om in te zoomen. Praktisch gezien is zestien pixels de ondergrond voor gewone lopende tekst op een telefoon, en dat is ook precies de standaardgrootte die elke browser aanhoudt als jij niets opgeeft.
De kleine lettertjes sluipen er meestal in via de randen: voetnoten, disclaimers, bijschriften bij foto’s, de footer en de cookiemelding. Vaak is dat overgenomen uit een desktopontwerp, waar tekst van twaalf pixels op een groot scherm op armlengte nog net leesbaar is.
Er is nog een reden om dit serieus te nemen. Een groeiend deel van je klanten is boven de vijftig, en dat is precies de groep die het meest te besteden heeft. Kleine letters kosten je daar omzet, niet alleen punten.
De rest van het mobiele beeld
Drie dingen die geen aparte controle hebben maar wel elke keer terugkomen. Horizontaal scrollen: een afbeelding of tabel die breder is dan het scherm duwt de hele pagina scheef. Pop-ups die het scherm vullen zodra je binnenkomt, wat Google expliciet noemt als hinderlijke tussenkomst. En formulieren met invoervelden zonder het juiste type, waardoor iemand een telefoonnummer op een lettertoetsenbord moet intikken.
Tot slot het Apple touch icon: het pictogram dat verschijnt als iemand je site op zijn beginscherm zet. Puur cosmetisch, maar het is één regel en zonder staat er een grijs kadertje met een screenshot in.
Google beschrijft zijn eigen uitgangspunten voor mobiel in de documentatie over mobile-first indexing.
Wat je vandaag kunt doen
- Pak je eigen telefoon en doorloop je site zoals een klant dat doet, tot en met het contactformulier.
- Controleer in de broncode of er een viewport-tag staat en of daar geen
user-scalable=noin zit. - Probeer je menu-items en je footer-icons met je duim te raken zonder te kijken.
- Zoek de kleinste tekst op je site op, meestal in de footer of een disclaimer, en zet hem groter.
- Scroll een pagina naar rechts. Kan dat, dan steekt er iets buiten het scherm.
Wil je weten hoe jouw pagina er op deze punten voor staat, zonder er zelf in de broncode voor te duiken? Doe de gratis SEO-check: je ziet binnen enkele seconden je score en wat er per onderdeel gemeten is.
