Naar de inhoud
Mera News

Gids voor uitgevers, hoofdstuk 2

Paginastructuur op mobiel en desktop

Laatst beoordeeld in november 2026

Een lezer bepaalt snel of een nieuwspagina het waard is om te blijven. De kop moet snel verschijnen, de pagina moet stilstaan en elke tik moet een reactie krijgen. Google indexeert bovendien de mobiele versie van uw pagina's, dus de lay-out op de telefoon is ook voor Search de versie die telt.

De cijfers om naar te streven

De Core Web Vitals van Google geven u drie maten en bij elke maat een duidelijk doel.

MaatMeetGoed
Largest Contentful Paint (LCP)Laden2,5 seconden of minder
Interaction to Next Paint (INP)Reactie op invoer200 milliseconden of minder
Cumulative Layout Shift (CLS)Visuele stabiliteit0,1 of minder

Meet het 75e percentiel van de paginaweergaven, met mobiel en desktop apart geteld. Een pagina slaagt wanneer alle drie de maten het doel halen op dat percentiel.

Gebruik veldgegevens van echte bezoeken: het rapport Core Web Vitals in Search Console, PageSpeed Insights of het Chrome User Experience Report. Lighthouse is nuttig in het lab, maar kan INP niet meten en rapporteert in plaats daarvan Total Blocking Time.

Volgens Google bestaat er geen enkel signaal voor paginabeleving. Google zegt wel dat Core Web Vitals door de rangschikkingssystemen worden gebruikt en dat andere aspecten van paginabeleving een site niet rechtstreeks helpen te scoren, al kunnen ze de site wel prettiger maken om te gebruiken.

Eén pagina voor beide schermen

Google raadt responsive design aan als het makkelijkst te implementeren en te onderhouden patroon. Dezelfde HTML bedient elk apparaat, zodat inhoud en metadata zonder extra werk overeenkomen. Als u aparte mobiele pagina's draait, houd dan het volgende identiek aan desktop:

  • Primaire inhoud
  • Koppen
  • Gestructureerde gegevens
  • Robots-metatags (een verdwaalde noindex kan een mobiele pagina uit de index houden)

Begin met de viewport-tag en controleer dan of de pagina bij een breedte van 320 CSS-pixels herschikt zonder zijwaarts scrollen.

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

Op mobiel

  • Zet de kop, de byline en de zichtbare datum eerst, daarna de hoofdafbeelding of de openingsalinea.
  • Houd de artikeltekst in de HTML. Een knop "verder lezen" die de rest bij een tik ophaalt, kan die tekst verbergen voor Google, dat niet klikt, veegt of typt.
  • Maak tikdoelen minimaal 24 bij 24 CSS-pixels, het minimum van WCAG 2.2 AA. Mik bij menu's en sluitknoppen op 44 bij 44, het AAA-niveau.
  • Houd een vaste kop kort en stel scroll-padding-top in op de hoogte ervan, zodat een link met focus nooit erachter verdwijnt.

Op desktop

  • Houd lopende tekst op maximaal 80 tekens per regel, of 40 voor Chinees, Japans en Koreaans. Dit is de WCAG AAA-richtlijn en het helpt elke lezer.
  • Stel de regelafstand binnen alinea's in op minimaal 1,5.
  • Zet ondersteunende inhoud in een zijbalk die het artikel niet verschuift wanneer die laadt.

Sneller laden

Het grootste element op een nieuwspagina is vaak de hoofdafbeelding. Behandel die als het belangrijkste verzoek op de pagina.

<img
  src="/images/lead-1200.jpg"
  srcset="/images/lead-800.jpg 800w, /images/lead-1200.jpg 1200w"
  sizes="(min-width: 768px) 720px, 100vw"
  width="1200"
  height="675"
  alt="Describe what the photo shows"
  fetchpriority="high">
  • Laad de LCP-afbeelding nooit lazy.
  • Zet hem in de eerste HTML, zodat de browser hem vindt voordat er een script draait.
  • Gebruik fetchpriority="high" bij hooguit een of twee afbeeldingen. Meer helpt niet meer.
  • Gebruik loading="lazy" alleen voor afbeeldingen en iframes buiten het eerste beeld.
  • Beperk redirects en houd de pagina cachebaar. Unieke URL-parameters kunnen verzoeken terugsturen naar uw oorsprongsserver in plaats van naar het CDN.

Een pagina die stilstaat

  • Stel width en height in op elke afbeelding en video, en houd height: auto in de CSS.
  • Gebruik dezelfde beeldverhouding voor elke afbeelding in een srcset.
  • Reserveer ruimte voor advertenties, embeds en iframes voordat ze laden. Het hoofdstuk over advertenties behandelt de formaten van de vakken.
  • Leg cookiemeldingen en aanmeldvragen eroverheen of reserveer er ruimte voor, zodat ze het artikel niet omlaag duwen.
  • Gebruik font-display: optional, of een terugvallettertype dat is afgestemd op de maatvoering van uw webfont.
  • Animeer met transform. Animeren met top of left veroorzaakt layoutverschuivingen.

Snelle reacties

De totale interactietijd bestaat uit drie delen: de wachttijd voordat uw code draait, uw code zelf en het hertekenen dat volgt. Elke taak die langer duurt dan 50 milliseconden is een lange taak.

  • Doe zo weinig mogelijk in event-callbacks. Werk eerst het scherm bij en stel de rest uit.
  • Breek lang werk op met scheduler.yield() en val terug op setTimeout in browsers die het niet ondersteunen.
  • Houd de DOM klein. Lange artikellijsten kunnen content-visibility gebruiken om items buiten beeld later te renderen.
  • Bedenk dat elke iframe een eigen hoofdthread heeft, dus kijk uit welk frame een trage interactie kwam.

Lange pagina's en oneindig scrollen

Als een rubriekpagina eindeloos scrolt, geef dan elk stuk een eigen permanente URL met een absoluut paginanummer zoals ?page=12 en link die pagina's op volgorde. Werk het adres bij met de History API terwijl de lezer verder gaat. Google scrolt of klikt niet, dus lazy geladen inhoud moet laden zodra die in beeld komt, zonder dat er een handeling nodig is.

Checklist

  • Controleer LCP, INP en CLS in Search Console, voor mobiel en desktop apart.
  • Open uw drukste artikelsjabloon op een telefoon en controleer dat de kop en de datum op het eerste scherm staan.
  • Controleer dat de volledige artikeltekst in de HTML staat die de server verstuurt.
  • Vergelijk mobiel en desktop op gelijke inhoud, koppen, gestructureerde gegevens en robots-tags.
  • Haal loading="lazy" van de hoofdafbeelding en voeg fetchpriority="high" toe.
  • Voeg width en height toe aan elke afbeelding en video.
  • Reserveer ruimte voor elke advertentie, embed en banner.
  • Stel scroll-padding-top in op de hoogte van uw vaste kop.
  • Test de pagina bij een breedte van 320 CSS-pixels.
  • Geef elk stuk van een pagina met oneindig scrollen een eigen URL.

Bronnen