If you want an information site to rank well, you can’t treat ads as an afterthought. Ad scripts often load late, creatives swap sizes, and the layout “jumps” while readers are already scrolling. That jump is Cumulative Layout Shift (CLS), and it hurts both UX and SEO.
This briefing lays out a practical pattern for AdSense-friendly pages: reserve space first, render ads in predictable regions, and label them clearly so you don’t train readers to misclick.
What “stable” really means
Stable does not mean “big empty boxes everywhere.” It means the page’s major blocks keep their dimensions even when ads load, refresh, or fail. The reader should never lose their scroll position.
Reserve space before scripts run
Decide where ads are allowed (rails, top/bottom banners, inline feed items) and reserve those boxes in HTML/CSS. Then the ad script fills a predictable rectangle.
Example: a stable container
/* Works for placeholders too, so dev builds don't jump. */
.ad-unit {
display: block;
width: 100%;
min-height: 100px; /* mobile “large banner” territory */
}
@media (min-width: 1280px) {
.ad-unit {
width: 160px;
min-height: 600px; /* classic vertical rail */
}
}If you use responsive ads, prefer a fixed minimum height instead of relying on auto. A predictable floor prevents sudden jumps when a creative arrives.
Labeling and UX (don’t confuse clicks with navigation)
AdSense is strict about deceptive layouts. Keep labels like Advertisement or Sponsored visually separated from your article headline, and do not place an ad inside a clickable card that looks like a post.
Use this simple rule: editorial cards can be fully clickable; ad cards should not. If you simulate an ad inside a list, style it differently and keep only the “Learn more” CTA clickable.
A useful mental model: the reader should never have to guess whether something is an article or an ad.
Slot planning by screen size
You don’t need dozens of slots on day one. Start with a few reusable units you can move around your templates.
| Screen | Placement | Typical size | Notes |
|---|---|---|---|
| Mobile | Top / bottom banner | 320×100 (or 320×50) | Align to content width to avoid a “full-bleed ad” look. |
| Desktop | Left / right rail | 160×600 | Sticky rails keep inventory visible without interrupting reading. |
| Any | Inline feed | 300×250 | Use sparingly and label clearly. |
A simple sizing strategy
- Mobile: prefer 320×100 over 320×50 if your layout has room; it’s easier to read and less likely to feel cramped.
- Desktop: keep rails narrow; a 160px rail reads like a sidebar, not a takeover.
- Inline: treat 300×250 as a “content-ad” that must be clearly labeled.
Checklist (ship it without surprises)
- The container exists even if the ad fails (no blank collapses).
- No “hidden instantiation” (don’t render two ads and hide one with CSS).
- Images and embeds include dimensions (they can also cause CLS).
- Labels are unambiguous (“Advertisement” is not optional when context could confuse).
- Lighthouse passes on mobile and desktop; CLS stays low under throttling.
Debugging tips
- If you see jumps, search for late-loading images without width/height, or containers with no
min-height. - If creatives arrive in a different size than expected, lock the container and test a dedicated slot rather than relying on
auto. - If you show “sponsored” content in a carousel, make the slide obviously different from editorial slides.
Internal linking beats accidental clicks
Ads shouldn’t be your only navigation. Build strong internal links with categories and tags so readers (and crawlers) can move through your archive:
- Browse the maker stack in Indie Lab.
- Jump to related layouts via the
adsensetag:/tag/adsense. - Pair monetization advice with performance advice so the content stands on its own.
When the reading path is clear, pages get more engagement, and your ad inventory becomes more valuable.