Reklamy

Ostatnia weryfikacja: listopad 2026

Reklamy finansują dziennikarstwo, a jednocześnie powodują wiele z tego, czego czytelnicy nie lubią w serwisach informacyjnych. Coalition for Better Ads publikuje listę formatów, które nie spełniają jej standardu. Ten rozdział omawia tę listę, sposób rezerwowania miejsca dla każdego slotu i rozmieszczenie reklam na każdym ekranie.

Formaty, których należy unikać

Better Ads Standards wskazują 6 formatów na komputerze i 10 na telefonie. Osobne listy obejmują krótkie wideo i aplikacje mobilne.

Jak mierzy się gęstość

Gęstość to suma wysokości wszystkich reklam w treści głównej podzielona przez całkowitą wysokość treści głównej. Mierzy się ją względem treści głównej, a nie widocznego obszaru.

• Nagłówki, stopki i nawigacja po serwisie są wyłączone, w tym artykuły powiązane.
• Reklamy poniżej treści głównej się nie liczą.
• Liczą się wszystkie formaty, w tym reklamy przypięte i w treści.
• Wysokość każdej przypiętej reklamy liczy się raz.
• Na komputerze liczą się reklamy w bocznych kolumnach.
• Reklamy pre-roll i mid-roll w wideo związanym ze stroną nie są mierzone.

Dla przykładu weźmy artykuł na telefonie, którego treść główna ma 5 000 pikseli wysokości. Aby zmieścić się w 30% lub poniżej, reklamy na nim mogą mieć łącznie nie więcej niż 1 500 pikseli.

Aby sprawdzić prawdziwą stronę, wklej to w konsoli przeglądarki. Zmień selektory, by pasowały do Twoich szablonów, i dodaj wysokość każdej przypiętej reklamy lub reklamy w bocznej kolumnie, która znajduje się poza 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) + '%');

Zarezerwuj każdy slot

Web.dev wymienia reklamy jako jedno z największych źródeł przesunięć układu. Zarezerwuj miejsce w CSS. Google ostrzega przed robieniem tego w JavaScript, ponieważ przesunięcie może nastąpić w chwili ładowania skryptu.

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

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

Używaj min-height, aby większa kreacja nadal się mieściła. W slotach z kilkoma rozmiarami przewodnik Google Publisher Tag proponuje trzy podejścia:

Dwie kolejne zasady z tego samego przewodnika i z web.dev:

• Trzymaj sloty fluid poniżej linii zagięcia. Zmieniają rozmiar do kreacji, więc zawsze powodują przesunięcie.
• Nie zwijaj slotu, który nie dostaje reklamy. Usunięcie zarezerwowanego miejsca może przesunąć stronę tak samo jak wstawienie treści. Pokaż zamiast tego zastępnik i zaczynaj ze zwiniętym slotem tylko wtedy, gdy jest mało prawdopodobne, że się wypełni.

Rozmieszczenie na każdym ekranie

Na telefonie

• Licz gęstość na układzie telefonu, ponieważ limit mobilny jest niższy.
• Utrzymuj przypiętą reklamę poniżej 30% ekranu. Zwykłą formą jest niski pasek zakotwiczony na dole.
• Unikaj reklam, które unoszą się nad artykułem, i każdej jednostki pełnoekranowej, którą trzeba przewinąć lub dotknąć, aby ją ominąć.
• Pierwszą reklamę trzymaj poniżej nagłówka i pierwszego akapitu, aby nie spychała w dół elementu LCP.

Na komputerze

• Wliczaj reklamy z bocznych kolumn do swojej sumy gęstości.
• Utrzymuj jednostki przypięte poniżej 30% ekranu.
• Uruchamiaj wideo wyciszone i pozwól czytelnikowi wybrać dźwięk.
• Najpierw ustal rozmiar kolumny artykułu, aby sloty w bocznych kolumnach mogły się ładować bez jej przesuwania.

Szybkość i dostępność

• Ładuj reklamy leniwie poza pierwszym widocznym obszarem, za pomocą własnego ustawienia tagu reklamowego lub loading="lazy" na ramkach iframe, które kontrolujesz.
• Każda ramka iframe ma własny wątek główny, więc podczas przeglądu INP sprawdź, z której ramki pochodziła wolna interakcja.
• Tam, gdzie wymagana jest zgoda, ładuj tagi reklamowe dopiero po zgodzie czytelnika. Rozdział o wyskakujących oknach zawiera szczegóły.
• Oznaczaj obszary reklam etykietami, aby użytkownik czytnika ekranu mógł je rozpoznać i pominąć.
• Zgodnie z kryterium sukcesu WCAG 2.2.2 ruchoma treść, która uruchamia się sama, trwa dłużej niż pięć sekund i działa obok innej treści, wymaga sposobu na wstrzymanie, zatrzymanie lub ukrycie. Dotyczy to reklam animowanych.

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

Sprawdź swój status

Ad Experience Report w Search Console wymienia doświadczenia reklamowe, które naruszają Better Ads Standards. Jeśli przegląd nada Twojemu serwisowi status „Failing”, raport wymienia to, co znalazł Google, i może nie obejmować każdego problemu. Napraw to, co zgłasza, a potem poproś o nowy przegląd, który obejmuje całą Twoją domenę.

Lista kontrolna

• Przejdź przez tabelę formatów z zespołem odpowiedzialnym za reklamy, dla komputera i telefonu.
• Usuń reklamy pop-up, reklamy prestitial na telefonie i reklamy z odliczaniem.
• Zmierz gęstość na najdłuższym i najkrótszym szablonie artykułu, na telefonie.
• Sprawdź, czy każda przypięta jednostka zajmuje poniżej 30% ekranu.
• Zarezerwuj każdy slot w CSS za pomocą min-height.
• Przenieś sloty fluid poniżej linii zagięcia.
• Zastąp zwijanie pustych slotów zastępnikiem tam, gdzie przesuwa stronę.
• Ładuj reklamy leniwie poza pierwszym widocznym obszarem.
• Dodaj etykietę do każdego obszaru reklamy.
• Sprawdź Ad Experience Report dla komputera i telefonu.

Źródła

• 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