Реклама

Последняя проверка: ноябрь 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