Advertenties

Laatst beoordeeld in november 2026

Advertenties betalen voor journalistiek, en ze veroorzaken ook veel van wat lezers storend vinden aan nieuwssites. De Coalition for Better Ads publiceert een lijst met formaten die onder de norm vallen. Dit hoofdstuk behandelt die lijst, hoe u ruimte reserveert voor elk vak en waar u advertenties op elk scherm plaatst.

Formaten om te vermijden

De Better Ads Standards noemen 6 desktopformaten en 10 mobiele formaten. Aparte lijsten gelden voor korte video en mobiele apps.

Hoe dichtheid wordt gemeten

Dichtheid is de som van de hoogtes van alle advertenties in de hoofdinhoud, gedeeld door de totale hoogte van de hoofdinhoud. Het wordt gemeten ten opzichte van de hoofdinhoud, niet van de viewport.

• Headers, footers en sitenavigatie zijn uitgesloten, en dat geldt ook voor gerelateerde artikelen.
• Advertenties onder de hoofdinhoud tellen niet mee.
• Alle formaten tellen mee, ook vaste en inline advertenties.
• De hoogte van elke vaste advertentie telt één keer.
• Op desktop tellen advertenties in de zijkolommen mee.
• Pre-roll- en mid-rolladvertenties in video die relevant is voor de pagina worden niet gemeten.

Neem als rekenvoorbeeld een mobiel artikel waarvan de hoofdinhoud 5.000 pixels hoog is. Om op of onder 30% te blijven, mogen de advertenties erin samen hooguit 1.500 pixels beslaan.

Om een echte pagina te controleren, plakt u dit in de browserconsole. Pas de selectors aan op uw sjablonen en tel de hoogte op van elke vaste advertentie of zijkolomadvertentie die buiten article staat.

const main = document.querySelector('article');
const slots = [...main.querySelectorAll('.ad-slot')];
const adHeight = slots.reduce((sum, ad) => sum + ad.getBoundingClientRect().height, 0);
console.log((adHeight / main.getBoundingClientRect().height * 100).toFixed(1) + '%');

Reserveer elk vak

Web.dev noemt advertenties een van de grootste veroorzakers van layoutverschuiving. Reserveer de ruimte in CSS. Google raadt af het in JavaScript te doen, omdat de verschuiving kan optreden wanneer het script laadt.

<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>

@media screen and (max-width: 960px) {
  #ad-slot {
    min-height: 100px;
  }
}

Gebruik min-height zodat een groter beeld er nog in past. Voor vakken met meerdere formaten biedt de Publisher Tag-gids van Google drie aanpakken:

Nog twee regels uit dezelfde gids en van web.dev:

• Houd fluid-vakken onder de vouw. Ze passen zich aan de advertentie aan, dus veroorzaken ze altijd een verschuiving.
• Klap een vak zonder advertentie niet in. Gereserveerde ruimte weghalen kan de pagina net zo goed verschuiven als inhoud invoegen. Toon in plaats daarvan een plaatshouder en laat een vak alleen ingeklapt beginnen als het waarschijnlijk niet wordt gevuld.

Plaatsing op elk scherm

Op mobiel

• Tel de dichtheid op de telefoonlay-out, omdat de mobiele grens de laagste is.
• Houd een vaste advertentie onder 30% van het scherm. Een korte ankerbalk onderaan is de gebruikelijke vorm.
• Vermijd advertenties die over het artikel zweven en elke schermvullende eenheid waarvoor een scroll of tik nodig is om verder te komen.
• Houd de eerste advertentie onder de kop en de openingsalinea, zodat die uw LCP-element niet omlaag duwt.

Op desktop

• Tel advertenties in de zijkolommen mee in uw totale dichtheid.
• Houd vaste eenheden onder 30% van het scherm.
• Laat video gedempt beginnen en laat de lezer voor geluid kiezen.
• Bepaal eerst de grootte van de artikelkolom, zodat vakken in de zijkolom kunnen laden zonder die te verschuiven.

Snelheid en toegankelijkheid

• Laad advertenties buiten het eerste beeld lazy, met de eigen instelling van uw advertentietag of loading="lazy" op iframes die u beheert.
• Elke iframe heeft een eigen hoofdthread, dus kijk bij het beoordelen van INP uit welk frame een trage interactie kwam.
• Waar toestemming vereist is, laadt u advertentietags pas nadat de lezer heeft ingestemd. Het hoofdstuk over pop-ups heeft de details.
• Geef advertentiegebieden een label, zodat een gebruiker van een schermlezer ze kan herkennen en overslaan.
• Volgens WCAG-succescriterium 2.2.2 heeft bewegende inhoud die vanzelf start, langer dan vijf seconden duurt en naast andere inhoud loopt, een manier nodig om te pauzeren, te stoppen of te verbergen. Dat geldt voor geanimeerde advertenties.

<aside aria-label="Advertisement">
  <div id="ad-slot" style="min-height: 250px;"></div>
</aside>

Controleer waar u staat

Het Ad Experience Report in Search Console toont advertentie-ervaringen die de Better Ads Standards schenden. Als uw site bij een beoordeling de status "Failing" krijgt, toont het rapport wat Google heeft gevonden, en het geeft mogelijk niet elk probleem weer. Los op wat het aanwijst en vraag dan een nieuwe beoordeling aan, die uw hele domein omvat.

Checklist

• Loop de formattabel door met uw advertentieteam, voor desktop en mobiel.
• Verwijder pop-ups, prestitials op mobiel en advertenties met aftelling.
• Meet de dichtheid op uw langste en kortste artikelsjablonen, op een telefoon.
• Controleer dat elke vaste eenheid onder 30% van het scherm blijft.
• Reserveer elk vak in CSS met min-height.
• Verplaats fluid-vakken onder de vouw.
• Vervang het inklappen van lege vakken door een plaatshouder waar het de pagina verschuift.
• Laad advertenties buiten het eerste beeld lazy.
• Voeg een label toe aan elk advertentiegebied.
• Controleer het Ad Experience Report voor desktop en mobiel.

Bronnen

• The Initial Better Ads Standards, Coalition for Better Ads
• Mobile ad density higher than 30%, Coalition for Better Ads
• Desktop ad density higher than 50%, Coalition for Better Ads
• Desktop ad density higher than 30% with a sticky video ad, Coalition for Better Ads
• Desktop large sticky ads, Coalition for Better Ads
• Mobile large sticky ads, Coalition for Better Ads
• Mobile full-screen scrollover ads, Coalition for Better Ads
• Mobile sticky video with large inline ad, Coalition for Better Ads
• Minimize layout shift, Google Publisher Tag
• Introduction to the Ad Experience Report, Web Tools Help
• Optimize Cumulative Layout Shift, web.dev
• Optimize Interaction to Next Paint, web.dev
• Web Content Accessibility Guidelines (WCAG) 2.2, W3C