Website optimaliseren voor mobiel: in 7 stappen goed op elke telefoon

Google beoordeelt je website via de telefoon. Dat heet mobile-first indexering: Google gebruikt volgens de eigen documentatie de mobiele versie van je pagina's, opgehaald met de smartphone-crawler, om te indexeren en te rangschikken. Sinds 5 juli 2024 crawlt Google zelfs uitsluitend met Googlebot Smartphone. Tekst die alleen op desktop bestaat, bestaat voor Google niet.

En dan je bezoekers zelf. In Nederland kwam in september 2026 volgens StatCounter 65 procent van het webverkeer van een telefoon, 33 procent van een desktop en 2 procent van een tablet. Voor een winkel, een praktijk of een installateur ligt dat aandeel vaak hoger, omdat hun klanten onderweg zoeken. Toch wordt bijna elke website op een groot scherm ontworpen en goedgekeurd. Laadtijd is een voorwaarde en daar schreef ik een apart artikel over. Dit artikel gaat over de rest: of iemand op een telefoon kan vinden, lezen, tikken en afmaken wat hij kwam doen.

Voordat je iets verandert, wil je weten hoe groot het mobiele deel van jouw bezoek is en of dat deel slechter presteert. Twee bronnen die je al hebt:

• Search Console, tabblad Apparaten. Onder Prestaties zie je per apparaat de vertoningen, klikken en de gemiddelde positie. Is je klikpercentage op mobiel veel lager dan op desktop bij een gelijke positie, dan is je titel of je pagina op een telefoon minder aantrekkelijk.
• Google Analytics 4, apparaatcategorie. Vergelijk per apparaat het aantal aanvragen of bestellingen per honderd bezoekers. Een mobiel conversiepercentage dat de helft is van desktop, is meestal geen eigenschap van mobiele bezoekers maar een gebrek van de pagina.

Vergroten

Ik laat bewust mijn eigen cijfers zien, want ze gaan tegen het gemiddelde in. Op goldcompass.nl komt 84 procent van de vertoningen van een desktop: wie een SEO specialist of een websitebouwer zoekt, doet dat tijdens werktijd op een groot scherm. Het landelijke gemiddelde zegt dus niets over jouw site. Een kapper of een webshop zit aan de andere kant van dat gemiddelde. Meet het.

Vergroten

Google onderscheidt drie manieren om een website geschikt te maken voor mobiel: responsive design (dezelfde pagina en code, die zich aanpast aan de schermbreedte), dynamisch serveren en aparte mobiele URL's. Google raadt responsive aan, omdat het het makkelijkst te onderhouden is. Vrijwel elk modern thema is responsive.

Responsive werkt alleen als de viewport goed staat: één regel in de code die de browser vertelt dat de pagina zich aan de schermbreedte moet aanpassen. Ontbreekt die regel, dan toont een telefoon de desktopversie verkleind. Je controleert het in een paar minuten:

1. Open je site in Chrome op een computer en druk op F12. Klik op het telefoonpictogram linksboven in het paneel. Je ziet je pagina nu op de breedte van een telefoon.
2. Scrol door elke belangrijke pagina. Let op tekst die buiten het scherm valt, een horizontale scrolbalk, afbeeldingen die over de rand gaan en elementen die over elkaar heen vallen.
3. Draai een Lighthouse-meting in hetzelfde paneel, op Mobile. Sinds 1 december 2023 bestaan de Mobile-Friendly Test en het rapport Mobiele bruikbaarheid in Search Console niet meer; Google verwijst in de aankondiging zelf naar Lighthouse. Onder Toegankelijkheid en SEO zie je of tikdoelen te klein zijn en of de viewport staat.

Een muis is precies, een duim niet. Het belangrijkste getal voor een mobielvriendelijke website is daarom de grootte van een tikdoel. Google adviseert in web.dev een tikdoel van minimaal 48 bij 48 pixels, ongeveer 9 millimeter, met 8 pixels ruimte eromheen. Dat is de grootte van een vingertop. Kleinere knoppen worden misgetikt en twee links die dicht op elkaar staan, sturen de bezoeker naar de verkeerde pagina.

Waar het meestal misgaat: links in de footer die als een blok tekst onder elkaar staan en een telefoonnummer dat als gewone tekst in de header staat. Dat laatste is op een telefoon de duurste fout die ik ken. Maak het nummer klikbaar met een tel-link en zet op pagina's waar mensen bellen een belknop die in beeld blijft. Voor een installateur of een praktijk is die knop de belangrijkste conversie van de hele site.

Lighthouse markeerde tot versie 13 pagina's waarvan 40 procent of meer van de tekst kleiner is dan 12 pixels, zo staat in de documentatie van Chrome. Die audit is verwijderd, maar de grens niet: onder de 12 pixels moet een bezoeker inzoomen. Ik houd voor lopende tekst 16 pixels aan als minimum. Dat is de standaard van elke browser en de grootte waarbij iOS een formulierveld niet automatisch inzoomt.

Houd alinea's op drie tot vier zinnen, want op een smal scherm wordt elke alinea twee keer zo lang. En let op contrast: lichtgrijze tekst op wit is op een telefoon in de zon onzichtbaar.

Op desktop past je hele navigatie in één balk. Op mobiel verdwijnt hij achter een knop met drie streepjes. Dat is prima, als het menu erachter klopt. Drie regels voor een mobiel menu:

• Maximaal zeven hoofditems. Meer past niet op een scherm zonder scrollen. Wat niet in het menu past, krijgt een plek in de footer of op een overzichtspagina.
• De belangrijkste actie buiten het menu. Een belknop of een knop naar het contactformulier staat naast het menu-icoon in de header, zichtbaar op elke pagina.
• Het menu sluit zoals het opent. Een kruisje op dezelfde plek als de menuknop en het menu sluit ook als iemand ernaast tikt. Een menu dat niet dicht wil, is de snelste manier om een bezoeker kwijt te raken.

Het formulier is op mobiel de plek waar de meeste aanvragen verloren gaan, want elk veld is een reden om te stoppen. Vraag alleen wat je nodig hebt om terug te bellen: naam, telefoonnummer of e-mail en een vraag.

1. Geef elk veld het juiste type. Een telefoonveld met type tel opent het numerieke toetsenbord, een e-mailveld toont de apenstaart. Dat scheelt per veld een paar tikken en het voorkomt fouten.
2. Laat de browser invullen. Met de juiste autocomplete-waarden vult de telefoon naam, e-mail en nummer in één tik in. Dat is het verschil tussen twee minuten typen en tien seconden.
3. Toon een foutmelding bij het veld, niet bovenaan. Op een klein scherm ziet niemand een rode regel boven het formulier als hij onderaan op verzenden tikt.
4. Maak de verzendknop de volle breedte en bevestig direct. Geen tweede knop ernaast en geen reCAPTCHA met verkeersborden. Na het verzenden een duidelijke melding dat de aanvraag binnen is en wanneer je reageert.

Voor dienstverleners met spoed, zoals installateurs en slotenmakers, is het formulier niet het belangrijkste kanaal. Zet de belknop boven het formulier. Wie met een lekkage staat, belt. Hoe ik dat op een website voor installateurs inricht, lees je daar.

Een paar elementen die op desktop onschuldig zijn, slopen een pagina op mobiel. De bekendste is de pop-up over het hele scherm. Google noemt dat in de richtlijnen opdringerige interstitials: overlays die de inhoud afdekken, meestal voor een nieuwsbrief of een korting. Ze maken het Google moeilijker om de pagina te begrijpen en kunnen je zoekprestaties schaden. Gebruik een smalle balk die een klein deel van het scherm inneemt. Of toon de melding pas als iemand de pagina heeft gelezen. Een cookiemelding mag, zolang hij de inhoud niet volledig afdekt en in één tik weg kan.

Daarna de afbeeldingen. Een brede banner met tekst erin wordt op mobiel een smalle streep met onleesbare tekst. Zet de tekst als echte tekst onder de foto. Hoe je afbeeldingen de juiste maat en het juiste formaat geeft, staat in afbeeldingen optimaliseren voor SEO. Geef ingesloten kaarten en video's een vaste hoogte en een responsieve breedte en zet een brede tabel om in een lijst per rij.

DevTools simuleert een scherm, geen gebruiker. Test daarom elk kwartaal op een echte iPhone en een oudere Android-telefoon, met deze checklist:

• Geen horizontale scrolbalk op welke pagina dan ook.
• Elke knop en link in één keer raak met de duim, ook in de footer.
• Lopende tekst minimaal 16 pixels, geen inzoomen nodig.
• Menu opent en sluit in één tik, belknop of CTA zichtbaar zonder het menu te openen.
• Formulier in minder dan een minuut ingevuld, met het juiste toetsenbord per veld en een bevestiging na verzenden.
• Geen pop-up over het hele scherm bij binnenkomst.
• Afbeeldingen, kaarten en video's binnen de schermbreedte, met leesbare tekst.

Blijf daarna meten waar je vóór stap 1 begon. In Search Console het rapport Core Web Vitals, dat mobiel en desktop apart toont. In PageSpeed Insights de meting op Mobiel, die naast laadtijd ook de audits voor tikdoelen en viewport bevat. En in Analytics het conversiepercentage per apparaat. Kruipt dat op mobiel richting desktop, dan heb je het goed gedaan.

De meeste websites in het MKB draaien op WordPress en de meeste mobiele problemen die ik tegenkom, komen niet van WordPress zelf maar van het thema en de paginabouwer. Divi, Elementor en Avada zijn responsive, maar ze geven je per blok instellingen voor desktop, tablet en mobiel. Wie die nooit heeft bekeken, krijgt op mobiel de desktopversie in elkaar gedrukt: koppen van drie regels en 100 pixels witruimte boven elke sectie. Wat je in WordPress zelf kunt doen, in deze volgorde:

1. Loop per pagina de mobiele weergave van de paginabouwer na. Elke bouwer heeft een telefoonpictogram in de werkbalk. Verklein daar de koppen, de afstanden en de knoppen. Begin met de homepage, de dienstpagina's en de contactpagina.
2. Verberg geen inhoud, verander de volgorde. Wat je met 'verbergen op mobiel' wegzet, staat nog in de code en telt voor Google mee, terwijl de bezoeker het niet ziet. Zet blokken liever in een andere volgorde: eerst de belofte en de knop, dan de uitleg.
3. Ruim plugins op die iets aan het scherm toevoegen. Chatwidgets, cookiebalken, deelknoppen en 'terug naar boven'-knoppen stapelen zich op mobiel op in de rechteronderhoek, precies waar de duim zit.
4. Controleer het mobiele menu van het thema apart. Veel thema's hebben er eigen instellingen voor. Zet de belknop erin of ernaast.

Lukt het niet met instellingen, dan is het thema meestal de reden dat een site op mobiel traag én onhandig is. Dan is een nieuw thema of een nieuwe website goedkoper dan blijven sleutelen. Voor webshops geldt dat dubbel: het afrekenen op mobiel is de plek waar de omzet wordt gemaakt of verloren. Daar schreef ik over bij webshop laten maken.

Wat ik hiervan vind

Ik vind dat 'mobielvriendelijk' te vaak wordt afgevinkt zodra een thema responsive is. Dat de pagina past op een klein scherm, zegt niets over of iemand er iets mee kan. Wat ik zelf anders doe: ik ontwerp een nieuwe website eerst op telefoonbreedte en pas daarna op desktop, omdat een smal scherm je dwingt te kiezen wat echt belangrijk is. Die keuzes maken de desktopversie ook beter. En ik test elke oplevering met mijn eigen duim op een oude Android, niet alleen in DevTools. Als ik een formulier daar niet in een minuut afmaak, is het niet af.

Celine, Goldcompass