AdSense Sticky Sidebar in Astro (Layout Recipe + CLS Fix)

Tested on: Astro 5.7, AdSense auto ads rejected → manual units approved Traffic at approval: ~1.2k sessions/month.

Layout with sticky sidebar

src/layouts/BlogPost.astro:

---
import AdUnit from '../components/AdUnit.astro';
const { title } = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>{title}</title>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXX"
      crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="layout">
      <article class="content">
        <slot />
      </article>
      <aside class="sidebar">
        <div class="sticky-ad">
          <AdUnit slot="1234567890" format="vertical" />
        </div>
      </aside>
    </div>
  </body>
</html>

<style>
  .layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
  }
  .sticky-ad {
    position: sticky;
    top: 1rem;
    min-height: 600px; /* reserve space — CLS fix */
  }
  @media (max-width: 900px) {
    .sidebar { display: none; }
  }
</style>

AdUnit.astro

---
const { slot, format = 'auto' } = Astro.props;
---

<ins class="adsbygoogle"
  style="display:block"
  data-ad-client="ca-pub-XXXX"
  data-ad-slot={slot}
  data-ad-format={format}
  data-full-width-responsive="true"
></ins>

<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Error — blank ad box, no fill

TagError: adsbygoogle.push() error: No slot size for availableWidth=0

Sidebar was display:none in CSS when AdSense measured. Hide sidebar with @media, not hidden class on initial render.

AdSense approval tips (what worked)

30+ original articles
Privacy policy + about + contact pages
No copyrighted content
ads.txt:

# static/ads.txt
google.com, pub-XXXXXXXX, DIRECT, f08c47fec0942fa0

Don't load AdSense script on every page

Use a layout without ads for /tools/ routes. AdSense policy discourages ads on non-content utility pages.

CLS numbers

Without min-height: CLS 0.31
With min-height: 600px: CLS 0.05
Sidebar hidden on mobile: no mobile CLS impact

Revenue (month 3)

RPM: $3.40 (tech niche, US traffic)
Sidebar unit: ~60% of impressions
Auto ads disabled (they hurt CLS more)