Реклама

Остання перевірка: листопад 2026 року

Реклама оплачує репортажі, а також спричиняє значну частину того, що читачам не подобається в новинних сайтах. Coalition for Better Ads публікує перелік форматів, які не відповідають його стандарту. Цей розділ розповідає про цей перелік, про те, як резервувати місце для кожного слоту, і де розміщувати рекламу на кожному екрані.

Формати, яких слід уникати

Better Ads Standards називають 6 форматів для комп'ютерів і 10 для мобільних. Окремі переліки стосуються коротких відео та мобільних застосунків.

Як вимірюють щільність

Щільність це сума висот усіх оголошень в основному вмісті, поділена на загальну висоту основного вмісту. Її вимірюють відносно основного вмісту, а не області перегляду.

• Шапки, підвали й навігація сайтом виключаються, зокрема й пов'язані статті.
• Оголошення під основним вмістом не враховуються.
• Враховуються всі формати, зокрема липкі й вбудовані оголошення.
• Висота кожного липкого оголошення враховується один раз.
• На комп'ютерах враховуються оголошення в бічних колонках.
• Pre-roll і mid-roll у відео, пов'язаному зі сторінкою, не вимірюються.

Для прикладу візьмемо мобільну статтю, основний вміст якої має висоту 5 000 пікселів. Щоб залишатися на рівні 30% або нижче, оголошення на ній можуть сумарно займати не більше ніж 1 500 пікселів.

Щоб перевірити справжню сторінку, вставте це в консоль браузера. Змініть селектори відповідно до ваших шаблонів і додайте висоту будь-якого липкого оголошення чи оголошення в бічній колонці, що лежить поза 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) + '%');

Резервуйте кожен слот

Web.dev називає рекламу одним із найбільших чинників зсуву макета. Резервуйте місце в CSS. Google застерігає від того, щоб робити це в JavaScript, бо зсув може статися, коли завантажиться скрипт.

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

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

Використовуйте min-height, щоб більший креатив усе ж міг поміститися. Для слотів із кількома розмірами посібник Google Publisher Tag пропонує три підходи:

Ще два правила з того самого посібника й web.dev:

• Тримайте слоти fluid нижче першого екрана. Вони змінюють розмір під креатив, тож завжди спричиняють зсув.
• Не згортайте слот, який не отримав оголошення. Прибирання зарезервованого місця може зсунути сторінку так само, як додавання вмісту. Покажіть замість цього заповнювач і починайте зі згорнутого слота лише тоді, коли він навряд чи заповниться.

Розміщення на кожному екрані

На мобільних

• Рахуйте щільність для макета телефона, бо мобільна межа нижча.
• Тримайте липке оголошення нижче 30% екрана. Звичайна форма це низька прив'язка внизу.
• Уникайте оголошень, що плавають над статтею, і будь-яких повноекранних блоків, які треба прокрутити або торкнутися, щоб пройти далі.
• Розміщуйте перше оголошення під заголовком і першим абзацом, щоб воно не зсувало вниз ваш елемент LCP.

На комп'ютерах

• Враховуйте оголошення в бічних колонках у загальній щільності.
• Тримайте липкі блоки нижче 30% екрана.
• Запускайте відео без звуку й дозвольте читачеві обрати звук.
• Спершу задайте розмір колонки статті, щоб слоти в бічних колонках могли завантажуватися, не зсуваючи її.

Швидкість і доступність

• Завантажуйте рекламу з відкладенням, коли вона поза першим екраном, за допомогою налаштування самого рекламного тега або loading="lazy" на iframe, які ви контролюєте.
• Кожен iframe має власний головний потік, тож під час перегляду INP перевіряйте, з якого фрейму прийшла повільна взаємодія.
• Де потрібна згода, завантажуйте рекламні теги лише після згоди читача. Деталі є в розділі про спливні вікна.
• Позначайте рекламні області мітками, щоб користувач скрінрідера міг їх розпізнати й пропустити.
• За критерієм успіху WCAG 2.2.2 рухомий вміст, що запускається сам, триває понад п'ять секунд і йде поруч з іншим вмістом, потребує способу призупинити, зупинити чи приховати його. Це стосується анімованої реклами.

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

Перевірте свій стан

Ad Experience Report у Search Console показує рекламні практики, що порушують Better Ads Standards. Якщо за результатом перевірки ваш сайт отримує статус «Failing», звіт перелічує, що знайшов Google, і не обов'язково охоплює кожну проблему. Виправте те, що позначено, а потім запросіть нову перевірку, що охоплює весь ваш домен.

Контрольний список

• Пройдіть таблицю форматів зі своєю командою з рекламних операцій, для комп'ютерів і мобільних.
• Приберіть спливні вікна, мобільні prestitial і рекламу з відліком.
• Виміряйте щільність на найдовшому й найкоротшому шаблонах статей на телефоні.
• Переконайтеся, що кожен липкий блок займає менше ніж 30% екрана.
• Зарезервуйте кожен слот у CSS за допомогою min-height.
• Перенесіть слоти fluid нижче першого екрана.
• Замініть згортання порожніх слотів заповнювачем там, де воно зсуває сторінку.
• Завантажуйте рекламу з відкладенням, коли вона поза першим екраном.
• Додайте мітку до кожної рекламної області.
• Перегляньте Ad Experience Report для комп'ютерів і мобільних.

Джерела

• 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