Is mijn website goed op een telefoon?
De meeste bezoekers bekijken je website op een telefoon. Google doet dat ook: Google gebruikt de mobiele versie van je pagina's om ze op te nemen en te rangschikken. Wat op je telefoon niet op de pagina staat, ziet Google dus ook niet. In dit artikel lees je hoe je zelf controleert of je site goed werkt op een klein scherm.
De viewport-regel
Een telefoon weet niet vanzelf dat je pagina voor een klein scherm gemaakt is. Zonder instructie doet de browser alsof het scherm veel breder is en verkleint hij de hele pagina. Dan krijg je piepkleine tekst waarin je moet inzoomen. De oplossing is één regel in de <head> van elke pagina:
<meta name="viewport" content="width=device-width, initial-scale=1">
- Geen vaste breedte zoals
width=1024: dan doet de telefoon weer alsof het scherm breed is. - Zoomen niet blokkeren: laat
user-scalable=noenmaximum-scale=1weg. Mensen die slecht zien, moeten tekst kunnen vergroten.
De AI Builder, WordPress-thema's en de meeste andere websitebouwers zetten deze regel zelf in elke pagina. Bij een zelfgemaakte of oude site is het de moeite waard om te kijken: open een pagina, klik met rechts, kies Paginabron bekijken (of Ctrl+U) en zoek met Ctrl+F naar viewport.
Zelf testen
- Open je site op je eigen telefoon en loop je belangrijkste pagina's langs.
- Of op de computer: open je site in Chrome of Firefox, druk op F12 en klik op het pictogram van een telefoon en tablet. Kies een smal toestel.
- Let op tekst die buiten beeld valt, een pagina die je opzij moet schuiven, knoppen die te klein zijn of over elkaar heen liggen, en stukken die op mobiel ontbreken.
- Test daarna in PageSpeed Insights op het tabblad Mobiel. Hoe je dat rapport leest, staat in PageSpeed Insights lezen: Core Web Vitals in gewone taal.
De aparte Mobielvriendelijke test van Google en het rapport Mobiele bruikbaarheid in Search Console bestaan sinds 1 december 2023 niet meer. Kom je ze in een oud artikel tegen, dan gebruik je nu de stappen hierboven.
Dezelfde inhoud op mobiel en desktop
Bij een responsive site (één adres en één pagina die zich aanpast aan de schermbreedte) is de inhoud vanzelf gelijk. Google raadt die manier aan. Heb je een aparte mobiele site, zoals m.example.com, of een systeem dat telefoons andere pagina's stuurt, controleer dan:
- dezelfde tekst, ook als die op mobiel in een uitklapblok staat;
- dezelfde titel en omschrijving;
- dezelfde afbeeldingen met dezelfde alt-teksten;
- geen inhoud die pas laadt als de bezoeker veegt, klikt of typt: Google doet dat niet.