Что это
Адаптация под мобильные устройства — это корректное отображение и работа сайта на смартфонах и планшетах: элементы масштабируются под экран, шрифты читаются без зума, кнопки нажимаются пальцем, а не стилусом. Технически реализуется через responsive-вёрстку (CSS media queries), отдельный мобильный поддомен (m.site.ru) или технологию Яндекс.Турбо. Браузер определяет тип устройства через заголовок User-Agent и viewport-мета-тег.
Почему это важно для SEO
Google с 2019 года работает в режиме Mobile-First Indexing: за основу ранжирования берётся именно мобильная версия страницы. Если на десктопе у вас 3 000 знаков текста, а на мобильном — 800 из-за скрытых блоков через display:none, Google проиндексирует только 800. Это напрямую режет семантический охват и теряет внутренние ссылки, которые спрятаны в адаптивном меню.
Яндекс учитывает мобильную удобность через отдельный критерий качества страниц. Сайты с неудобным мобильным отображением получают метку «Плохо работает на мобильных» в Яндекс.Вебмастере (раздел «Диагностика») и могут терять позиции в мобильной выдаче. По данным Яндекса, более 65% поисковых запросов в России приходит со смартфонов. При этом поведенческие факторы — отказы, время на сайте, глубина просмотра — ухудшаются на неадаптивном сайте в 2–3 раза, что дополнительно давит на позиции.
Как проверить вручную
- Google Search Console — откройте раздел «Удобство для мобильных» (Experience → Mobile Usability). Сервис покажет список URL с ошибками: мелкий шрифт, кликабельные элементы расположены слишком близко, контент шире экрана.
- Яндекс.Вебмастер — перейдите в «Диагностика» → «Мобильные устройства». Здесь есть встроенный эмулятор и список страниц с проблемами отображения.
- PageSpeed Insights (pagespeed.web.dev) — запустите анализ в мобильном режиме. Смотрите блок Core Web Vitals: LCP должен быть до 2,5 с, CLS — меньше 0,1, INP — до 200 мс. Эти метрики напрямую влияют на ранжирование в Google.
- Screaming Frog — в настройках переключите User-Agent на Googlebot Smartphone. Краулер обойдёт сайт глазами мобильного бота и покажет страницы, недоступные или отличающиеся по контенту от десктопной версии.
- DevTools Chrome — F12 → иконка смартфона. Проверьте страницу при эмуляции iPhone SE (375 px) и Galaxy S20 (412 px) — это наиболее распространённые разрешения в российской аудитории.
Как исправить
Универсальный шаг — проверьте viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Этот тег должен быть в <head> каждой страницы. Без него браузер рендерит страницу как десктоп и масштабирует её — классическая причина «мелкого шрифта».
CSS: базовые правила адаптивности:
img, video {
max-width: 100%;
height: auto;
}
body {
font-size: 16px; /* минимум для мобильных */
}
a, button {
min-height: 44px; /* рекомендация Apple HIG */
min-width: 44px;
}Популярные CMS:
- WordPress — установите адаптивную тему (Twenty Twenty-Four, Astra, GeneratePress). Проверьте, что плагины не вставляют фиксированные ширины в inline-стили. Используйте плагин Autoptimize для минимизации CSS.
- Tilda — адаптивность встроена, но проверьте блоки с фиксированными размерами в Zero Block. В настройках блока → «Мобильная версия» → включите отдельное позиционирование.
- 1C-Bitrix — в настройках шаблона включите «Адаптивная вёрстка». Если используете старый шаблон без responsive, придётся либо обновить шаблон, либо добавить медиазапросы в
/local/templates/ваш_шаблон/style.css.
- Webflow — переключайтесь между брейкпоинтами прямо в дизайнере (иконки устройств вверху). Обязательно проверьте планшетный и мобильный брейкпоинты отдельно — стили не наследуются автоматически вниз.
Типичные ошибки
- Скрытие контента через `display:none` на мобильных. Google индексирует мобильную версию, поэтому скрытый текст выпадает из индекса. Используйте
visibility:hiddenтолько для декоративных элементов, но не для смыслового контента.
- Отдельный мобильный поддомен без hreflang/canonical. Если m.site.ru существует без связи с site.ru, возникает дублирование. Прописывайте
<link rel="canonical">на m-версии, указывающий на десктопный URL, и добавляйте<link rel="alternate" media="only screen and (max-width:640px)">на десктопе.
- Интерстициальные поп-апы на мобильных. Google с 2017 года штрафует страницы, где поп-ап перекрывает контент сразу после перехода. Разрешены только поп-апы для авторизации, куки-баннеры и небольшие плашки.
- Нефиксированные размеры изображений в HTML. Без атрибутов
widthиheightбраузер не знает размер до загрузки, что бьёт по метрике CLS. Всегда указывайте размеры явно.
- Игнорирование Турбо-страниц. Для новостных и контентных сайтов Яндекс.Турбо даёт ускоренную загрузку на мобильных и отдельное ранжирование в блоке Турбо. Настраивается через RSS-фид в Яндекс.Вебмастере.
Влияние на разные типы сайтов
Для интернет-магазинов адаптивность критична на уровне конверсии: по данным Google, 53% мобильных пользователей уходят, если сайт грузится дольше 3 секунд. Проблемная зона — корзина и форма оформления заказа: мелкие поля, неудобный ввод адреса, кнопка «Купить» в зоне недосягаемости большого пальца. Каждая такая ошибка — прямые потери дохода.
Для контентных сайтов и блогов главная метрика — читаемость: строка должна вмещать 45–75 символов, межстрочный интервал — от 1,4. SaaS-продуктам важно адаптировать онбординг и демо-форму: если на мобильном неудобно заполнять заявку, лиды теряются ещё до касания с отделом продаж. Лендинги страдают от неадаптированных hero-блоков с фоновыми видео, которые тормозят загрузку и роняют LCP ниже допустимого порога.