Skip to content
Mera News

Publisher guide, chapter 5

Ads

Last reviewed November 2026

Ads pay for reporting, and they also cause much of what readers dislike about news sites. The Coalition for Better Ads publishes a list of formats that fall below its standard. This chapter covers that list, how to reserve space for every slot, and where to place ads on each screen.

Formats to avoid

The Better Ads Standards name 6 desktop formats and 10 mobile formats. Separate lists cover short-form video and mobile apps.

FormatDesktopMobile
Pop-up adsListedListed
Auto-playing video with soundListedListed
Prestitial adsWith a countdownWith or without a countdown
Large sticky adsMore than 30% of the screenMore than 30% of the screen
Ad densityHigher than 50%Higher than 30%
Density with a sticky video adHigher than 30%Not listed
Flashing animated adsNot listedListed
Postitial ads with a countdownNot listedListed
Full-screen scrollover adsNot listedMore than 30% of the page
Sticky, pop-out video adsNot listedListed
Sticky video with a large inline ad (300x600 or larger)Not listedListed

How density is measured

Density is the sum of the heights of all ads in the main content, divided by the total height of the main content. It is measured against the main content, not the viewport.

  • Headers, footers and site navigation are excluded, and that includes related articles.
  • Ads below the main content don't count.
  • All formats count, including sticky and inline ads.
  • Each sticky ad's height counts once.
  • On desktop, ads in the side rails count.
  • Pre-roll and mid-roll ads in video relevant to the page aren't measured.

As a worked example, take a mobile article whose main content is 5,000 pixels tall. To stay at or below 30%, the ads on it can add up to no more than 1,500 pixels.

To check a real page, paste this in the browser console. Change the selectors to match your templates, and add the height of any sticky or side rail ad that sits outside article.

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) + '%');

Reserve every slot

Web.dev names ads as one of the largest contributors to layout shift. Reserve the space in CSS. Google warns against doing it in JavaScript, because the shift can happen when the script loads.

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

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

Use min-height so a larger creative can still fit. For slots with several sizes, Google's Publisher Tag guide offers three approaches:

ReserveBenefitCost
The largest sizeNo shiftBlank space under small creatives
The smallest sizeNo blank spaceA shift when a larger creative serves
The size that serves most oftenA balance of bothSome shift, some blank space

Two more rules from the same guide and web.dev:

  • Keep fluid slots below the fold. They resize to the creative, so they always cause a shift.
  • Don't collapse a slot that gets no ad. Removing reserved space can shift the page as much as inserting content. Show a placeholder instead, and start a slot collapsed only if it is unlikely to fill.

Placement on each screen

On mobile

  • Count density on the phone layout, because the mobile limit is the lower one.
  • Keep a sticky ad under 30% of the screen. A short anchor at the bottom is the usual form.
  • Avoid ads that float over the article, and any full-screen unit that needs a scroll or a tap to pass.
  • Keep the first ad below the headline and opening paragraph, so it doesn't push your LCP element down.

On desktop

  • Count side rail ads in your density total.
  • Keep sticky units under 30% of the screen.
  • Start video muted, and let the reader choose sound.
  • Size the article column first, so side rail slots can load without moving it.

Speed and accessibility

  • Lazy-load ads outside the first viewport, with your ad tag's own setting or loading="lazy" on iframes you control.
  • Each iframe has its own main thread, so check which frame a slow interaction came from when you review INP.
  • Where consent is required, load ad tags only after the reader agrees. The pop-ups chapter has the detail.
  • Label ad regions so a screen reader user can recognise and skip them.
  • Under WCAG success criterion 2.2.2, moving content that starts by itself, lasts more than five seconds and runs alongside other content needs a way to pause, stop or hide it. That applies to animated ads.
<aside aria-label="Advertisement">
  <div id="ad-slot" style="min-height: 250px;"></div>
</aside>

Check your standing

The Ad Experience Report in Search Console lists ad experiences that violate the Better Ads Standards. If a review gives your site the status "Failing", the report lists what Google found, and it may not capture every problem. Fix what it flags, then request a new review, which covers your entire domain.

Checklist

  • Go through the format table with your ad operations team, for desktop and mobile.
  • Remove pop-ups, prestitials on mobile and countdown ads.
  • Measure density on your longest and shortest article templates, on a phone.
  • Check that every sticky unit stays under 30% of the screen.
  • Reserve every slot in CSS with min-height.
  • Move fluid slots below the fold.
  • Replace empty slot collapsing with a placeholder where it shifts the page.
  • Lazy-load ads outside the first viewport.
  • Add a label to each ad region.
  • Check the Ad Experience Report for desktop and mobile.

Sources