Iklan

Terakhir ditinjau November 2026

Iklan membiayai liputan, dan iklan juga menjadi penyebab banyak hal yang tidak disukai pembaca di situs berita. Coalition for Better Ads menerbitkan daftar format yang berada di bawah standarnya. Bab ini membahas daftar itu, cara menyediakan ruang untuk setiap slot, dan di mana menempatkan iklan di setiap layar.

Format yang perlu dihindari

Better Ads Standards menyebut 6 format desktop dan 10 format seluler. Daftar terpisah mencakup video berdurasi pendek dan aplikasi seluler.

Cara kepadatan diukur

Kepadatan adalah jumlah tinggi semua iklan di konten utama, dibagi total tinggi konten utama. Pengukurannya terhadap konten utama, bukan viewport.

• Header, footer, dan navigasi situs dikecualikan, termasuk artikel terkait.
• Iklan di bawah konten utama tidak dihitung.
• Semua format dihitung, termasuk iklan sticky dan sebaris.
• Tinggi setiap iklan sticky dihitung sekali.
• Di desktop, iklan di rel samping dihitung.
• Iklan pre-roll dan mid-roll dalam video yang relevan dengan halaman tidak diukur.

Sebagai contoh, ambil artikel seluler yang konten utamanya setinggi 5,000 piksel. Agar tetap di bawah atau sama dengan 30%, total iklan di dalamnya tidak boleh lebih dari 1,500 piksel.

Untuk memeriksa halaman nyata, tempel ini di konsol browser. Ubah selektornya agar sesuai dengan templat Anda, dan tambahkan tinggi iklan sticky atau rel samping yang berada di luar 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) + '%');

Sediakan ruang untuk setiap slot

Web.dev menyebut iklan sebagai salah satu penyumbang terbesar pergeseran tata letak. Sediakan ruangnya di CSS. Google memperingatkan agar tidak melakukannya di JavaScript, karena pergeseran bisa terjadi saat skrip dimuat.

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

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

Gunakan min-height agar materi iklan yang lebih besar tetap muat. Untuk slot dengan beberapa ukuran, panduan Publisher Tag dari Google menawarkan tiga pendekatan:

Dua aturan lagi dari panduan yang sama dan web.dev:

• Letakkan slot fluid di bawah bagian yang terlihat pertama kali. Slot ini menyesuaikan ukuran dengan materi iklan, jadi selalu menyebabkan pergeseran.
• Jangan menciutkan slot yang tidak mendapat iklan. Menghapus ruang yang sudah disediakan bisa menggeser halaman sebanyak menyisipkan konten. Tampilkan placeholder, dan mulai dengan slot yang menciut hanya jika kecil kemungkinannya terisi.

Penempatan di setiap layar

Di ponsel

• Hitung kepadatan pada tata letak ponsel, karena batas seluler adalah yang lebih rendah.
• Jaga iklan sticky di bawah 30% layar. Bentuk yang umum adalah anchor pendek di bagian bawah.
• Hindari iklan yang melayang di atas artikel, dan unit layar penuh apa pun yang perlu digulir atau diketuk untuk dilewati.
• Letakkan iklan pertama di bawah judul dan paragraf pembuka, agar tidak mendorong elemen LCP Anda ke bawah.

Di desktop

• Hitung iklan rel samping dalam total kepadatan Anda.
• Jaga unit sticky di bawah 30% layar.
• Mulai video dalam keadaan senyap, dan biarkan pembaca memilih suara.
• Tentukan ukuran kolom artikel lebih dulu, agar slot rel samping bisa dimuat tanpa menggesernya.

Kecepatan dan aksesibilitas

• Muat iklan di luar viewport pertama secara lazy, dengan pengaturan tag iklan Anda sendiri atau loading="lazy" pada iframe yang Anda kendalikan.
• Setiap iframe punya thread utamanya sendiri, jadi periksa frame mana asal interaksi yang lambat saat meninjau INP.
• Jika persetujuan diwajibkan, muat tag iklan hanya setelah pembaca setuju. Bab tentang pop-up membahas rinciannya.
• Beri label pada wilayah iklan agar pengguna pembaca layar bisa mengenali dan melewatinya.
• Menurut kriteria keberhasilan WCAG 2.2.2, konten bergerak yang mulai sendiri, berlangsung lebih dari lima detik, dan berjalan bersama konten lain memerlukan cara untuk menjeda, menghentikan, atau menyembunyikannya. Itu berlaku untuk iklan beranimasi.

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

Periksa posisi Anda

Ad Experience Report di Search Console mencantumkan pengalaman iklan yang melanggar Better Ads Standards. Jika sebuah tinjauan memberi situs Anda status "Failing", laporan mencantumkan apa yang ditemukan Google, dan mungkin tidak mencakup semua masalah. Perbaiki yang ditandai, lalu minta tinjauan baru, yang mencakup seluruh domain Anda.

Daftar periksa

• Telusuri tabel format bersama tim operasi iklan Anda, untuk desktop dan seluler.
• Hapus pop-up, prestitial di seluler, dan iklan dengan hitung mundur.
• Ukur kepadatan pada templat artikel Anda yang terpanjang dan terpendek, di ponsel.
• Pastikan setiap unit sticky tetap di bawah 30% layar.
• Sediakan ruang untuk setiap slot di CSS dengan min-height.
• Pindahkan slot fluid ke bawah bagian yang terlihat pertama kali.
• Ganti penciutan slot kosong dengan placeholder jika itu menggeser halaman.
• Muat iklan di luar viewport pertama secara lazy.
• Tambahkan label pada setiap wilayah iklan.
• Periksa Ad Experience Report untuk desktop dan seluler.

Sumber

• 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