Maak je pagina geschikt voor het scherm van een telefoon
Beschrijving
Dit criterium controleert of de pagina goed wordt weergegeven op een telefoon. iPand laadt de pagina op een gesimuleerde Pixel 7 van 412 px breed en controleert vier punten: de viewport-tag declareert width=device-width zonder zoomen te blokkeren, de pagina is niet breder dan het scherm, minstens 60% van de zichtbare tekst is 12 px of groter, en de opmaak verschuift weinig tijdens het laden (CLS van hoogstens 0,1).
Waarom dit belangrijk is voor AI
Google indexeert de mobiele versie van je pagina’s, gecrawld door zijn smartphonecrawler, en zowel AI Overviews als AI Mode steunen op die index. Google rekent een weergave die geschikt is voor mobiel ook tot een goede pagina-ervaring, en die raadt het aan voor zijn AI-functies.
- Zonder viewport-tag toont de telefoon de pagina als een verkleind computerscherm: piepkleine tekst en verplicht inzoomen.
- Wie zoomen blokkeert (user-scalable=no), maakt de pagina onleesbaar voor slechtzienden; de toegankelijkheidsrichtlijnen WCAG eisen dat tekst minstens twee keer vergroot kan worden.
- Inhoud die tijdens het laden verschuift, laat mensen ernaast tikken: CLS meet die verschuivingen, en web.dev noemt een waarde van hoogstens 0,1 goed.
Zo los je het op
- 1 Declareer de viewport Zet in de head van de pagina de tag <meta name="viewport" content="width=device-width, initial-scale=1">. Voeg geen user-scalable=no toe, en ook geen maximum-scale onder 2: je bezoekers moeten kunnen zoomen. Dit punt weegt het zwaarst in het criterium.
- 2 Voorkom dat de pagina horizontaal overloopt De pagina mag niet breder zijn dan het scherm, voor iPand 412 px. Zoek naar elementen met een vaste breedte: afbeeldingen, tabellen, ingesloten video’s, blokken met een breedte in pixels. Geef afbeeldingen max-width: 100% en kies flexibele lay-outs (Flexbox, Grid) in plaats van vaste breedtes.
- 3 Maak de tekst groter Minstens 60% van de zichtbare tekst moet 12 px of groter zijn. Houd de lopende tekst rond 16 px, de standaardgrootte van browsers, en controleer juridische vermeldingen, menu’s en footers, die vaak te klein zijn.
- 4 Reserveer ruimte voor afbeeldingen en ingesloten blokken CLS mag niet hoger zijn dan 0,1. Geef width en height op bij afbeeldingen en video’s, reserveer de hoogte van banners, advertenties en widgets voordat ze laden, en voeg geen inhoud in boven wat al zichtbaar is.
In het kort
Google leest de mobiele versie van je pagina. Declareer de viewport zonder zoomen te blokkeren, voorkom dat de pagina overloopt en zorg voor leesbare tekst en een stabiele opmaak.
