Зачем проверять попапы на мобильных
Google с 2017 года применяет штраф за навязчивые межстраничные элементы (intrusive interstitials) на мобильных устройствах. Это означает: полноэкранный попап, который закрывает контент сразу при загрузке страницы, может привести к понижению в результатах мобильного поиска. Google прямо указывает это в рекомендациях для вебмастеров.
Яндекс также учитывает удобство мобильной версии. Навязчивые попапы ухудшают пользовательский опыт: пользователь пришёл из поиска за конкретной информацией, а первое, что видит — баннер «Подпишитесь на рассылку» или «Скидка 10% при заказе прямо сейчас». Это раздражает и увеличивает показатель отказов.
По моему опыту, после удаления агрессивных попапов на мобильных показатель отказов снижается на 8-15%, а время на странице растёт. Это не значит, что попапы нужно убирать полностью — есть разрешённые и даже полезные типы. Но их нужно настроить правильно, чтобы не получить штраф и не потерять пользователей.
Что Google считает навязчивым
Google разделяет попапы на три категории:
Запрещённые (приводят к штрафу):
- Полноэкранный попап, который закрывает весь контент сразу при загрузке страницы или до того, как пользователь начал скроллить.
- Попап, который пользователь обязан закрыть, прежде чем получить доступ к контенту.
- Макет страницы, где верхняя часть выглядит как попап, а основной контент расположен ниже — визуальная имитация попапа.
Разрешённые (не приводят к штрафу):
- Баннер cookie consent — уведомление об использовании файлов cookie. Юридическое требование.
- Возрастная верификация (age verification) — для контента 18+.
- Баннеры авторизации — на страницах с платным контентом (paywall).
- Маленькие баннеры, занимающие разумную часть экрана и не блокирующие контент.
Допустимые с оговорками:
- Попап, появляющийся после значительного скролла (50%+ страницы) или через 30+ секунд после загрузки.
- Exit-intent попап (на десктопе) — на мобильных exit-intent не работает корректно.
- Попап, который закрывается одним тапом и не блокирует контент.
Пошаговая инструкция
Шаг 1. Проведите аудит всех попапов на сайте
Откройте сайт на мобильном устройстве и пройдите по 5-10 ключевым страницам. Для каждой страницы зафиксируйте:
- Появляется ли попап при загрузке страницы?
- Через сколько секунд после загрузки он появляется?
- Какую долю экрана занимает? (Полный экран, 50%, маленький баннер.)
- Можно ли закрыть одним тапом? Есть ли крестик?
- Блокирует ли доступ к контенту до закрытия?
- Появляется ли повторно при возврате на страницу?
Составьте список всех попапов: callback-виджеты, подписка на рассылку, акционные баннеры, cookie consent, онлайн-чат, push-уведомления. Для каждого определите: разрешён по правилам Google или нет.
Шаг 2. Удалите или замените запрещённые попапы
Полноэкранные попапы при загрузке страницы — удалите. Замены:
Вместо полноэкранного попапа «Подпишитесь на рассылку»:
- Маленький баннер внизу экрана (высотой не более 15-20% viewport).
- Блок подписки в контенте страницы — после первых 2-3 экранов.
- Баннер, появляющийся после 60 секунд на странице или после 50% скролла.
Вместо полноэкранного popup акции:
- Sticky-баннер вверху или внизу страницы — фиксированная полоска с акцией.
- Баннер внутри контента — между блоками текста.
- Уведомление в углу экрана (toast notification) — занимает минимум места.
Вместо callback-виджета с полноэкранным попапом:
- Маленькая кнопка в углу экрана с формой в компактном попапе.
- Ссылка click-to-call в шапке — один тап для звонка без попапов.
Шаг 3. Настройте правильный timing
Если попап необходим для бизнеса (подписка, акция, сбор лидов), настройте его появление так, чтобы не нарушать рекомендации Google:
- Задержка: не менее 30 секунд после загрузки страницы. Оптимально — 45-60 секунд. К этому моменту пользователь уже прочитал часть контента и менее раздражён прерыванием.
- Триггер по скроллу: появляется после прокрутки 50-70% страницы. Пользователь дошёл до конца — значит, контент ему интересен, предложение подписки уместно.
- Частота показа: не более одного раза за сессию. Если пользователь закрыл попап — не показывайте повторно. Используйте cookie или localStorage для отслеживания.
- Не показывать при первом визите: рассмотрите вариант — попап показывается только со второго визита. Первый визит — знакомство с контентом без прерываний.
// Попап после 50% скролла, один раз за сессию
var popupShown = sessionStorage.getItem('popup_shown');
if (!popupShown) {
window.addEventListener('scroll', function onScroll() {
var scrollPercent = (window.scrollY /
(document.body.scrollHeight - window.innerHeight)) * 100;
if (scrollPercent > 50) {
showPopup();
sessionStorage.setItem('popup_shown', '1');
window.removeEventListener('scroll', onScroll);
}
});
}Шаг 4. Проверьте размер и закрываемость
Если попап остаётся, он должен соответствовать требованиям:
- Занимает не более 30% экрана. Google не указывает точный порог, но маленькие баннеры (15-30% экрана) не вызывают штраф.
- Не блокирует контент. Пользователь может скроллить и читать текст, пока баннер отображается.
- Легко закрывается. Крестик не менее 44x44px, расположен в верхнем правом углу — стандартная позиция, привычная пользователю.
- Закрытие по тапу на overlay. Если попап с затемнением фона — тап по затемнению закрывает попап.
/* Баннер внизу экрана — не блокирует контент */
.mobile-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
max-height: 30vh; /* не более 30% экрана */
padding: 16px;
background: #fff;
box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
z-index: 1000;
}
.mobile-banner .close-btn {
position: absolute;
top: 8px;
right: 8px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
}Шаг 5. Настройте cookie consent правильно
Cookie consent — единственный попап, который разрешён при загрузке. Но даже его можно настроить плохо:
- Правильно: небольшой баннер внизу экрана с кнопкой «Принять». Текст краткий. Баннер не блокирует контент — пользователь может скроллить.
- Неправильно: полноэкранный попап с подробным описанием категорий cookie, несколькими переключателями и кнопкой «Настроить». На мобильных это закрывает весь экран.
Для российских сайтов: cookie consent не является юридическим требованием 152-ФЗ (он больше про персональные данные, а не cookie). Но если сайт работает на ЕС (GDPR), баннер обязателен. Для чисто российских проектов — рассмотрите необходимость баннера. Если он не нужен юридически — не ставьте.
Шаг 6. Проверьте виджеты чатов и callback
Виджеты онлайн-чатов (JivoSite, Carrot Quest) и callback-сервисов (Envybox, CallbackHunter) часто ведут себя агрессивно на мобильных:
- Автоматически раскрываются через 5-10 секунд, занимая треть экрана.
- Показывают push-сообщения поверх контента: «Менеджер Анна готова помочь!»
- Кнопка виджета перекрывает кнопку CTA или ссылку click-to-call.
Рекомендации:
- Отключите автораскрытие на мобильных. Пусть виджет остаётся в свёрнутом виде (маленькая иконка в углу).
- Отключите push-сообщения (проактивные приглашения) на мобильных.
- Проверьте, не перекрывает ли иконка виджета другие элементы. Если да — переместите.
- Оцените эффективность: если виджет генерирует менее 5 обращений в месяц — замедляет сайт больше, чем приносит пользы. Рассмотрите замену на ссылку в мессенджер.
Шаг 7. Проверьте push-уведомления
Запрос на разрешение push-уведомлений — это тоже попап. На мобильных браузерах он выглядит как системный диалог: «Сайт хочет отправлять вам уведомления. Разрешить / Блокировать».
Google не штрафует за системный запрос push-уведомлений (это функция браузера, а не попап сайта). Но:
- Не показывайте запрос сразу при загрузке — пользователь ещё не знает, чего ожидать от сайта.
- Показывайте после значимого действия: прочитал статью, посмотрел 3 страницы, провёл на сайте больше 2 минут.
- Используйте промежуточный экран: сначала ваш собственный баннер «Хотите получать уведомления о новых статьях?» с кнопками «Да» / «Нет». Только при нажатии «Да» запрашивайте системное разрешение. Это снижает процент блокировок.
Типичные ошибки
- Полноэкранный попап при загрузке. Главная причина штрафа Google. Пользователь не видит контент, пока не закроет попап. Даже если попап «полезный» (скидка, акция) — Google расценивает это как нарушение.
- Крестик закрытия 20x20px. На мобильных попасть в маленький крестик пальцем — задача нетривиальная. Пользователь промахивается, случайно кликает по ссылке в попапе, раздражается. Минимум 44x44px для кнопки закрытия.
- Попап показывается повторно после закрытия. Пользователь закрыл попап, прокрутил страницу — попап появился снова. Или перешёл на другую страницу — попап снова. Настройте ограничение: один раз за сессию или один раз в сутки.
- Несколько попапов одновременно. Cookie consent + callback-виджет + подписка на рассылку + push-уведомление. Четыре прерывания за первые 30 секунд. Оставьте максимум один попап (cookie consent не считается, если корректно реализован).
- Попап перекрывает кнопку CTA. Кнопка «Оставить заявку» на мобильных находится в нижней части экрана. Попап или виджет чата закрывает именно эту область. Пользователь не может совершить целевое действие.
- Exit-intent на мобильных. Технология exit-intent (определение намерения уйти) на мобильных работает некорректно — нет курсора, который перемещается к кнопке закрытия вкладки. Попапы, привязанные к exit-intent, срабатывают случайно при скролле вверх или переключении между вкладками.
- Попап без затемнения фона (overlay). Попап появился, но фон не затемнён — пользователь не понимает, что это модальное окно. Пытается скроллить, тапает мимо кнопок.
Что проверить в итоге
- На мобильных нет полноэкранных попапов при загрузке страницы.
- Cookie consent — маленький баннер внизу, не блокирующий контент.
- Маркетинговые попапы появляются не раньше чем через 30 секунд или после 50% скролла.
- Каждый попап показывается не более одного раза за сессию.
- Кнопка закрытия попапа не менее 44x44px, расположена в привычном месте.
- Попап закрывается по тапу на overlay.
- Попапы занимают не более 30% экрана и не блокируют контент.
- Виджеты чатов не раскрываются автоматически на мобильных.
- Push-уведомления не запрашиваются при загрузке — только после значимого взаимодействия.
- Виджеты и попапы не перекрывают CTA-кнопки и click-to-call.
- На сайте одновременно не более одного активного попапа (исключая cookie consent).
