Mobile-First Indexing: Optimaliseren voor Kleine Schermen

Jarenlang behandelde Google de desktopversie van een website als de "primaire" versie en de mobiele versie als een "alternatief". Dat tijdperk is voorbij.

Met Mobile-First Indexing gebruikt Google voornamelijk de mobiele versie van je content voor indexering en ranking. Als je site uitstekende desktopcontent heeft maar een uitgeklede of kapotte mobiele versie, zullen je rankings eronder lijden—zelfs voor gebruikers die op desktop zoeken.

Deze gids legt uit hoe je ervoor zorgt dat je site overleeft en bloeit in een mobile-first wereld.

1. Wat is Mobile-First Indexing?

Het is belangrijk om een veelvoorkomend misverstand op te helderen: Er is geen aparte "Mobiele Index". Er is slechts één Google Index.

• De Oude Manier: Googlebot (Desktop) crawlde je site. Het besloot waar je rankte op basis van wat het op een groot scherm zag.
• De Huidige Manier: Googlebot (Smartphone) crawlt je site. Het besluit waar je rankt op basis van wat het op een mobiel scherm ziet.

De Implicatie: Als je content op mobiel verbergt om "ruimte te besparen" (bijv. door tekst of tabbladen te verwijderen), kan Google die content effectief niet meer zien. Het wordt niet geïndexeerd.

2. De Oplossing: Responsive Web Design

Hoewel je een aparte mobiele site kunt hebben (m.voorbeeld.nl), raadt Google Responsive Web Design ten zeerste aan.

Responsive design betekent dat je website dezelfde HTML-code en dezelfde URL voor alle apparaten gebruikt, maar CSS gebruikt om de lay-out te wijzigen op basis van de schermgrootte.

De Vitale Tag: De Viewport

Om responsive design te laten werken, moet elke pagina op je site de volgende meta-tag in de <head>-sectie bevatten:

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

Deze regel vertelt de browser: "Schaal deze content zodat deze past bij de breedte van het specifieke apparaat dat wordt gebruikt." Zonder dit zullen mobiele browsers proberen de desktopversie te renderen en te verkleinen, waardoor gebruikers moeten knijpen en zoomen (een grote fout in bruikbaarheid).

3. De Regel van "Content Pariteit"

Om te slagen in Mobile-First Indexing, moet je zorgen voor Pariteit (gelijkheid) tussen je desktop- en mobiele versies.

• Zelfde Content: De tekst, afbeeldingen en video's moeten identiek zijn. Vat je artikelen niet samen voor mobiele gebruikers.
• Zelfde Gestructureerde Data: Schema markup (JSON-LD) moet aanwezig zijn op de mobiele versie.
• Zelfde Metadata: Titels en Meta Beschrijvingen moeten hetzelfde zijn.
• Visuele check: Zorg dat advertenties of pop-ups (interstitials) de eigenlijke content op mobiel niet bedekken. Google raadt opdringerige interstitials af, omdat ze content moeilijker bereikbaar maken.

4. Mobiele problemen opsporen

Google heeft het rapport "Mobiele bruikbaarheid" in Search Console en de Mobielvriendelijke test in december 2023 stopgezet. Controleer pagina’s nu met Lighthouse in Chrome DevTools of met PageSpeed Insights, en test op een echte telefoon.

Dit zijn drie veelvoorkomende mobiele problemen (de namen komen uit het oude rapport) en hoe je ze oplost:

Fout A: "Tekst te klein om te lezen"

• Het Probleem: De lettergrootte is zo klein dat gebruikers moeten inzoomen om te lezen.
• De Oplossing: Google raadt een basislettergrootte van ten minste 16px aan voor broodtekst. Controleer je CSS om er zeker van te zijn dat je lettertypen niet instelt op vaste kleine formaten (bijv. 10px).

Fout B: "Aanklikbare elementen te dicht bij elkaar"

• Het Probleem: "Dikke Vinger Syndroom." Knoppen of links staan zo dicht bij elkaar dat een gebruiker die op "Annuleren" probeert te tikken, per ongeluk op "Verzenden" tikt.
• De Oplossing: Zorg ervoor dat aanraakdoelen ten minste 48x48 pixels groot zijn en ongeveer 8 pixels marge ertussen hebben.

Fout C: "Content breder dan scherm"

• Het Probleem: De gebruiker moet horizontaal scrollen (van links naar rechts) om de hele pagina te zien. Dit is een strikte "no-no" in UX.
• De Oplossing: Dit wordt meestal veroorzaakt door een afbeelding of een tabel met een vaste breedte (bijv. width: 800px). Verander vaste breedtes in relatieve breedtes (bijv. max-width: 100%) in je CSS zodat elementen automatisch krimpen.

Conclusie

Mobile-first indexing is geen instelling die je kunt uitzetten; het is de standaard op het web. Met responsive design, gelijke content en tests op echte telefoons en met Lighthouse zorg je dat je site werkt voor iedereen die op een klein scherm surft.