Mobielvriendelijk bouwen: mobile-first als SEO-beslissing, niet als afterthought

Mobielvriendelijk bouwen betekent ontwerpen vanaf het kleinste scherm, niet achteraf laten krimpen.

Een mobielvriendelijke website laten maken is dus geen check achteraf. Je vertrekt vanaf het eerste ontwerp bij het mobiele scherm, omdat Google je site ook zo bekijkt.

Het verdict: mobile-first is een SEO-beslissing die je vooraf neemt, want de mobiele versie is de versie die telt voor je rankings.

Google is volledig overgestapt op mobile-first indexing. Wat op je telefoon ontbreekt, bestaat dus niet voor je rankings.

Hieronder: wat dat inhoudt, waarom content-pariteit de grootste valkuil is, en welke keuzes een mobiele site vindbaar en bruikbaar maken.

Wat betekent mobile-first indexing voor je website?

Google gebruikt de mobiele versie van je pagina om je content te indexeren en te ranken.

Letterlijk: Google “uses the mobile version of a site’s content, crawled with the smartphone agent, for indexing and ranking” (Google over mobile-first indexing).

Sinds wanneer geldt dat voor elke site?

Google rondde de overstap af op 5 juli 2024. Sindsdien crawlt en indexeert het elke site met zijn mobiele bot.

Googlebot Desktop zie je nog wel in je logs. Maar alleen voor een paar functies, zoals productvermeldingen of Google for Jobs.

De gevolgtrekking is hard: alles wat niet op je mobiele pagina staat, bestaat in de praktijk niet voor Google.

Een oude reflex draait om

Jarenlang bouwden teams eerst de “echte” desktopsite. Mobiel was een afgeleide.

Vandaag is het omgekeerd. De mobiele pagina is het origineel waarop Google oordeelt; desktop is de ruimere variant.

Wie nog vanuit desktop denkt, riskeert dat teksten, links of gestructureerde data alleen op het grote scherm staan. Dan blijven ze buiten beeld voor het zoekalgoritme.

Niet alleen indexering, ook ervaring

Mobile-first gaat niet alleen over indexering. Mobiele gebruikerservaring weegt ook mee als kwaliteitssignaal, samen met de Core Web Vitals.

Zo ziet dat er in echte data uit. Kijk naar de drie kernwaarden bovenaan:

Onze eigen mobiele velddata in PageSpeed Insights, oktober 2026. LCP is goed (1,9 s), maar één zwak meetpunt (CLS 0,13) laat de beoordeling falen.

Eén zwakke meting op mobiel is genoeg om de hele beoordeling te laten falen, ook bij ons.

Een site die op mobiel traag of onhandig is, verliest dus op twee fronten tegelijk: vindbaarheid en conversie.

Wat is het verschil tussen responsive en mobile-first?

Responsive is een techniek, mobile-first is een ontwerpvolgorde.

Responsive design en mobile-first gaan vaak samen, maar zijn niet hetzelfde.

• Responsive: je layout past zich vloeiend aan de schermbreedte aan, of die nu 360 of 1440 pixels is.
• Mobile-first: je begint bij het kleinste scherm en breidt uit naarmate er meer ruimte komt.

Waarom de volgorde telt

Het verschil is geen semantiek. Wie mobile-first werkt, dwingt zichzelf vroeg tot keuzes:

• wat is de kernboodschap?
• welke ene call-to-action telt?
• welke informatie mag pas later verschijnen?

Een klein scherm laat geen ruis toe.

Stel bijvoorbeeld dat je een dienstpagina bouwt voor een IT-integrator. Op 360 pixels breed passen boven de vouw een kop, één zin en één knop, en dus kies je die eerst.

Begin je bij desktop, dan prop je vaak te veel in een breed canvas. Achteraf moet je dan schrappen en verbergen voor mobiel.

Dat verbergen is precies waar het misgaat met content-pariteit.

De tool beslist niet

In de praktijk combineer je beide: een mobile-first denkwijze, technisch uitgevoerd met responsive code.

Of je nu bouwt in Webflow, WordPress of een custom front-end, de aanpak telt zwaarder dan de tool.

Vuistregel: geen enkel platform maakt je site automatisch mobielvriendelijk. Dat blijft een kwestie van ontwerpkeuzes en discipline.

Waarom is content-pariteit de grootste valkuil?

Omdat Google op mobiel minder ziet dan jij op je laptop, zonder dat iemand het merkt.

Content-pariteit betekent dat je mobiele pagina dezelfde inhoud bevat als je desktoppagina. Google formuleert het simpel: “Make sure that your mobile site contains the same content as your desktop site.”

Het is de meest onderschatte oorzaak van rankingverlies bij sites die er op een telefoon prima uitzien.

Hoe het sluipend misgaat

Drie typische voorbeelden:

• een ontwerper verbergt een lange uitlegtekst met CSS omdat ze “te zwaar” is
• een ontwikkelaar laadt productdetails alleen op desktop
• een menu-item verdwijnt uit de mobiele navigatie om ruimte te sparen

Stuk voor stuk redelijke keuzes. Samen zorgen ze ervoor dat Google op mobiel minder content ziet.

En die uitgeklede mobiele versie is nu net de versie die telt.

Let op: Google laadt geen inhoud die pas verschijnt na een tik, swipe of klik. “Don’t lazy-load primary content upon user interaction,” schrijft Google.

Wat controleer je concreet?

Loop deze vier punten na:

• Tekst en koppen. De volledige inhoud staat op mobiel, niet ingekort. Accordeons zijn prima als de tekst in de HTML zit.
• Interne en externe links. Dezelfde links op beide versies, zodat je interne linkstructuur intact blijft.
• Gestructureerde data. Je schema-markup en metadata zijn identiek op mobiel en desktop.
• Afbeeldingen en media. Visuele content staat ook op mobiel, met dezelfde beschrijvende alt-teksten.

Vergeet ook je robots-tags niet. Google vraagt “the same robots meta tags on the mobile and desktop site”, zeker bij noindex. Het verschil tussen die directives lees je in noindex vs canonical vs robots.txt.

Vuistregel: doet het ertoe voor je vindbaarheid of je bezoeker, dan hoort het op mobiel.

Inklappen mag, betekenisvolle inhoud weglaten niet.

Welke technische keuzes maken een site echt mobielvriendelijk?

Een handvol instellingen die je niet ziet, maar die de hele ervaring bepalen.

De viewport meta-tag

De belangrijkste is de viewport. Zonder die tag rendert je pagina op een telefoon alsof het een ingezoomd desktopscherm is.

Mobiele browsers tonen de pagina dan op desktopbreedte, “usually about 980px”, en schalen alles kleiner (web.dev over responsive design).

De aanbevolen regel is kort:

<meta name="viewport" content="width=device-width, initial-scale=1">

Eén regel code, maar zonder die regel is geen enkele andere optimalisatie zichtbaar.

Tikdoelen die een vinger raakt

Daarna komen de knoppen en links die een vinger moet kunnen raken.

Volgens de Lighthouse-audit van Google faalt een tikdoel van 48 bij 48 pixels nooit. Ongeveer 8 pixels ruimte ertussen is een goed vertrekpunt.

Zo raakt een vinger niet per ongeluk de verkeerde knop. Lighthouse markeert te kleine of te dicht geplaatste knoppen.

Voor B2B: is je doel een ingevuld contactformulier of offerteaanvraag, dan is dit geen detail maar een directe omzetfactor.

Denk aan een rij van drie tekstlinks onder je formulier, zoals privacy, voorwaarden en contact. Staan die te dicht op elkaar, dan tikt een duim er snel naast.

Leesbaarheid en snelheid

Verder tellen deze vier punten:

• Leesbare tekst zonder zoomen. Een basislettergrootte die comfortabel leest op een klein scherm.
• Geen horizontaal scrollen. Content past binnen de schermbreedte.
• Laadsnelheid op mobiel. Lichte afbeeldingen en zuinige scripts wegen zwaarder op een tragere verbinding.
• Tikvriendelijke formulieren. Het juiste toetsenbordtype per veld en grote invoervelden.

Een telefoonveld met type="tel" opent bijvoorbeeld meteen het cijfertoetsenbord. Zo’n kleine keuze scheelt een bezoeker een paar tikken per veld.

Snelheid raakt direct aan je Core Web Vitals. Meet je eigen pagina met onze website snelheidstest.

Layoutverschuiving: de stille mobiele fout

Een bekende mobiele fout is layoutverschuiving: inhoud die verspringt terwijl de pagina laadt.

In ons eigen Search Console-rapport zie je hoe groot dat kan worden. Kijk naar de rij onderaan:

Het Core Web Vitals-rapport in onze eigen Search Console, oktober 2026: 349 URL’s met een CLS-probleem op mobiel.

Dat waren 349 URL’s met een CLS boven 0,1 op mobiel. Wat CLS precies meet, lees je in wat is CLS; voor laadtijd zie wat is LCP.

Mobiel en toegankelijk gaan samen

Veel van deze punten overlappen met toegankelijkheid.

Wat goed werkt voor een vinger op een klein scherm, werkt meestal ook beter voor mensen met beperkte motoriek of een hulpmiddel.

Ze zijn vaak twee kanten van dezelfde discipline. Meer in website toegankelijk maken.

Staan alle vier op groen, dan klopt je technische basis.

Wanneer pak je een mobielvriendelijke website laten maken het best aan?

Tijdens het ontwerp, niet erna: dat is het goedkoopste moment.

Wie mobielvriendelijkheid vanaf de eerste wireframe meeneemt, hoeft later geen content te verbergen, knoppen te vergroten of layouts te herbouwen.

Bij een nieuwe site of redesign

Plan je een nieuwe site of een redesign? Dan is dit hét moment om de volgorde om te draaien en bij het kleine scherm te beginnen.

Mobile-first is trouwens maar één van de bouwbeslissingen die je rankings maken of breken. Het volledige overzicht staat in een SEO-vriendelijke website bouwen.

Bij een bestaande site

Lijkt je site “responsive genoeg”? Test dan op een echte telefoon, niet alleen in een verkleind browservenster.

Loop de drie belangrijkste paden door:

1. Vindt een bezoeker je aanbod?
2. Leest hij je teksten zonder zoomen?
3. Vult hij in een paar tikken het contactformulier in?

Een B2B-website die leads genereert doet dat evengoed op mobiel als op desktop. Een groot deel van je bezoekers oriënteert zich onderweg of buiten kantooruren op een telefoon.

Waar mobiele bezoekers afhaken, lees je in ons stuk over mobiele conversie op een B2B-website. Voor formulieren zie leadformulier optimaliseren.

Wat mobielvriendelijk niet oplost

Wees realistisch. Mobielvriendelijk is een voorwaarde, geen toverstaf.

Een snelle, nette mobiele site zonder overtuigende inhoud of duidelijke call-to-action genereert nog steeds geen leads.

Mobile-first zorgt dat je content en conversiepaden overal werken.

De kwaliteit ervan moet je apart verdienen, bijvoorbeeld met een mobiele landingspagina die één doel heeft.

Veelgestelde vragen

Is responsive design genoeg voor mobile-first indexing?

Niet vanzelf. Responsive zorgt dat de layout past, maar je moet ook zorgen dat dezelfde inhoud, links en gestructureerde data op mobiel staan.

Mag ik tekst op mobiel inklappen?

Ja, met een accordeon of tabs, zolang de tekst in de HTML staat. Laad je primaire inhoud pas na een klik, dan ziet Google ze niet.

Hoe groot moeten knoppen op mobiel zijn?

Mik op minstens 48 bij 48 pixels, met ongeveer 8 pixels ruimte ertussen. Dat is de maat die de Lighthouse-audit nooit afkeurt.

Hoe test ik of mijn site mobielvriendelijk is?

Combineer een test op een echte telefoon met PageSpeed Insights en het Core Web Vitals-rapport in Search Console. Vergelijk ook je mobiele en desktopversie op inhoud.

De korte samenvatting

Mobielvriendelijk bouwen is een SEO- en conversiebeslissing die je vooraf neemt, geen vinkje achteraf.

Google indexeert je site op de mobiele versie. Begin dus bij het kleinste scherm en zorg voor volledige content-pariteit.

Regel daarna de basis:

• een correcte viewport
• tikbare knoppen van minstens 48 pixels
• leesbare tekst en snelle laadtijd

Zo bouw je een site die vindbaar is voor Google en bruikbaar voor de bezoeker op zijn telefoon.

Klopt je huidige site of je redesign hierop? Bekijk onze aanpak voor website ontwikkeling of vertrek vanuit de B2B-website gids.

Neem contact op en we kijken samen of je site mobiel doet wat hij moet doen: bezoekers omzetten in leads.