Mobiel eerst en de viewport

Module 4: Snelheid, mobiel en https · Leestijd: 10 minuten

Leerdoel: Na deze les kun je uitleggen wat mobile-first indexing betekent, een goede viewport-instelling herkennen en schrijven, en de valkuilen vermijden waardoor je mobiele pagina minder laat zien of slechter werkt dan je desktoppagina.

Kernbegrippen: mobile-first indexing, smartphone-crawler, responsive ontwerp, dynamic serving, aparte mobiele site, <meta name="viewport">, width=device-width, initial-scale, zoomen blokkeren, gelijke inhoud, opdringerige pop-ups (interstitials), tikdoelen

Google kijkt met een telefoon

Lange tijd bekeek Google een website zoals een computer dat doet. Dat is voorbij. Google gebruikt voor het indexeren en rangschikken de mobiele versie van je pagina's en haalt die op met de smartphone-crawler van Googlebot. Dat heet mobile-first indexing. In oktober 2023 schreef Google dat de overstap klaar is: voor vrijwel alle sites is het nu gewoon "indexeren". Sinds juli 2024 crawlt Google ook de laatste sites die nog met de desktopcrawler werden bezocht met de mobiele crawler; wat op een telefoon helemaal niet te bereiken is, kan dan niet meer geïndexeerd worden.

Wat betekent dat in de praktijk? Wat er niet op je mobiele pagina staat, bestaat voor Google niet. Laat je op de telefoon een stuk tekst, een tabel, je openingstijden of je gestructureerde gegevens weg "omdat het scherm klein is", dan ziet Google dat stuk ook niet.

Drie manieren om mobiel te bouwen

Moderne websitebouwers en WordPress-thema's zijn bijna allemaal responsive. Een site van de AI Builder is ook responsive: één pagina die zich aanpast. Heb je een oude site met een aparte m.-versie, dan is overstappen op responsive vaak de grootste verbetering die je kunt doen.

De viewport: de regel die alles laat werken

Een telefoonbrowser weet niet vanzelf dat je pagina voor een klein scherm gemaakt is. Zonder instructie doet hij alsof het scherm veel breder is, bijvoorbeeld 980 pixels (het voorbeeld dat de documentatie van MDN geeft), en verkleint hij de hele pagina tot die op het scherm past. Resultaat: piepkleine tekst waarin je moet inzoomen. Ook een responsive ontwerp werkt dan niet, want de CSS denkt dat het scherm breed is.

De oplossing is één regel in de <head> van elke pagina:

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

• width=device-width zegt: maak de pagina zo breed als het scherm van het apparaat. Dan kan je CSS met schermbreedtes werken.
• initial-scale=1 zegt: begin zonder in- of uitzoomen.

Dit is precies de regel die Lighthouse (de controle in Chrome en PageSpeed Insights) aanbeveelt. Lighthouse keurt een pagina af als de viewport-regel ontbreekt of geen width= heeft.

Wat je beter niet doet

Sommige sites zetten er meer in:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Daarmee kan een bezoeker niet meer inzoomen. Dat lijkt netjes ("de lay-out blijft heel"), maar voor iemand die slecht ziet is het een drempel. De toegankelijkheidsrichtlijn WCAG 2.2 vraagt in succescriterium 1.4.4 (Tekst herschalen, niveau AA) dat tekst tot 200 procent vergroot kan worden zonder dat er inhoud of functies verloren gaan. De officiële toetsregel van W3C, "Meta viewport allows for zoom", keurt een viewport af met user-scalable=no of met maximum-scale lager dan 2. Laat die onderdelen dus weg. (Safari op de iPhone negeert ze tegenwoordig standaard, maar andere browsers niet.)

Ook fout is een vaste breedte, zoals width=1024. Dan doet de telefoon weer alsof het scherm 1.024 pixels breed is en is je responsive ontwerp nutteloos.

Gelijke inhoud op mobiel en desktop

Google noemt in de documentatie over mobile-first indexing een paar dingen die op beide versies gelijk moeten zijn. Bij een responsive site is dat vanzelf zo, bij dynamic serving en een aparte mobiele site moet je het nakijken:

• De inhoud zelf. Tekst mag op mobiel in een uitklapblok of tabblad staan, maar hij moet in de pagina zitten.
• Titel en metabeschrijving (les 3.1) moeten gelijkwaardig zijn.
• Gestructureerde gegevens (module 5) moeten op beide versies staan.
• Afbeeldingen met dezelfde alt-teksten en in een goede kwaliteit.
• Geen inhoud die pas laadt na een handeling. Google zegt het letterlijk: laad hoofdinhoud niet pas in als de bezoeker veegt, klikt of typt; Googlebot doet dat niet.
• robots.txt moet de mobiele pagina's en hun CSS, JavaScript en afbeeldingen niet blokkeren. Zonder CSS kan Google niet zien hoe de pagina eruitziet.

Prettig op een klein scherm

Een paar punten die Google noemt als vragen voor een goede pagina-ervaring, en die je op je eigen telefoon controleert:

• Leesbare tekst zonder inzoomen.
• Tikdoelen (knoppen, links in een menu) groot genoeg en niet te dicht op elkaar, zodat je niet per ongeluk het verkeerde aantikt.
• Geen opdringerige pop-ups. Google schrijft dat elementen die de inhoud blokkeren (een nieuwsbriefvenster over de hele pagina zodra je binnenkomt) bezoekers ergeren en het vertrouwen schaden, en dat ze het voor zoekmachines lastiger maken je inhoud te begrijpen. Gebruik liever een kleine balk. Wettelijk verplichte vensters, zoals een leeftijdscontrole, vallen buiten die richtlijn.
• Geen horizontaal scrollen: een te brede afbeelding of tabel duwt de hele pagina opzij. Geef tabellen een eigen schuifbalk.

Google heeft de aparte test "Mobielvriendelijk" en het rapport Mobiele bruikbaarheid in Search Console eind 2023 stopgezet. Controleren doe je nu met je eigen telefoon, met de mobiele weergave in de ontwikkelaarshulpmiddelen van je browser, en met Lighthouse of PageSpeed Insights (les 4.3).

In de praktijk: zelf kijken

Open je site in Chrome of Firefox op de computer, druk op F12 en klik op het pictogram van een telefoon en tablet (apparaatwerkbalk). Kies een smal toestel en blader door je belangrijkste pagina's. Let op tekst die buiten beeld valt, knoppen die over elkaar heen liggen en stukken die op mobiel ontbreken. Kijk daarna in de broncode (Ctrl+U) of de viewport-regel er staat.

De AI Builder zet de viewport-regel width=device-width, initial-scale=1 zelf in elke pagina. WordPress-thema's doen dat ook, net als de meeste andere websitebouwers. Bij een zelfgemaakte of oude site is het de moeite waard om het na te kijken: het is één regel, maar zonder die regel werkt niets van je mobiele ontwerp.

Samenvatting

• Google indexeert en rangschikt de mobiele versie van je pagina's; wat daar ontbreekt, ziet Google niet.
• Responsive ontwerp is de aanbevolen manier: één adres, één HTML.
• Elke pagina heeft <meta name="viewport" content="width=device-width, initial-scale=1"> nodig.
• Blokkeer zoomen niet: geen user-scalable=no en geen maximum-scale onder 2 (WCAG 1.4.4).
• Houd inhoud, titel, metabeschrijving en gestructureerde gegevens gelijk op mobiel en desktop, en vermijd pop-ups die de pagina afdekken.

Quiz

Opdracht

Opdracht A4.2: Heeft je pagina een goede viewport? Vul het adres van een pagina in (bijvoorbeeld je homepage). Het programma leest de HTML en kijkt of er precies één <meta name="viewport"> in de <head> staat met width=device-width, en of zoomen niet geblokkeerd wordt (user-scalable=no of maximum-scale onder 2). Bekijk daarna zelf dezelfde pagina in de mobiele weergave van je browser. Geen eigen site? Gebruik www.wikipedia.org.

Verder lezen

• Google Search Central, Mobile-first indexing best practices: https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
• Google Search Central Blog, Mobile-first indexing has landed (2023): https://developers.google.com/search/blog/2023/10/mobile-first-is-here
• Google Search Central, Avoid intrusive interstitials and dialogs: https://developers.google.com/search/docs/appearance/avoid-intrusive-interstitials
• W3C, ACT-regel Meta viewport allows for zoom: https://www.w3.org/WAI/standards-guidelines/act/rules/b4f0c3/
• MDN, De viewport-metatag: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport
• W3C, Understanding SC 1.4.4 Resize Text: https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html
• Is mijn website goed op een telefoon?