Mobile-friendly (адаптивность)

Что это

Mobile-friendly — свойство сайта корректно отображаться и работать на мобильных устройствах: смартфонах и планшетах. Технически это означает, что страница использует адаптивную вёрстку (responsive design) с мета-тегом <meta name="viewport">, не требует горизонтальной прокрутки, содержит читаемый без масштабирования текст и кликабельные элементы с достаточными отступами. Проверяется как поисковыми роботами, так и специальными инструментами.

Почему это важно для SEO

Google с 2019 года полностью перешёл на mobile-first indexing: основным источником контента и сигналов ранжирования для него является мобильная версия страницы. Если мобильная версия хуже десктопной — урезана, не грузится или ломается — позиции падают, даже если десктоп выглядит идеально. По данным Similarweb, в 2024 году мобильный трафик в Рунете составляет около 65–70% от всего. Потерять мобильных пользователей — значит потерять большинство аудитории.

Яндекс ещё с 2016 года учитывает адаптивность в алгоритме ранжирования для мобильного поиска, а с 2022 года активнее продвигает Турбо-страницы для ускорения мобильного контента. Кроме того, плохая мобильная версия напрямую бьёт по поведенческим факторам: высокий показатель отказов (пользователь не может прочитать текст и уходит), низкое время на сайте, отсутствие конверсий. Для Яндекса эти сигналы критичны — ИКС (Индекс качества сайта) снижается при стабильно плохой поведенческой картине.

Дополнительный момент: в Google AI Overviews и Я.Нейро источники подбираются в том числе с учётом качества мобильного опыта. Страница с плохой адаптивностью имеет меньше шансов попасть в генеративный ответ.

Как проверить вручную

1. Google Search Console — раздел "Удобство для мобильных" (Experience > Mobile Usability). Покажет конкретные ошибки: мелкий текст, слишком близко расположенные ссылки, контент шире экрана.

1. Я.Вебмастер — раздел "Технические параметры" > "Адаптивность". Яндекс отдельно указывает, считает ли страницу пригодной для мобильных.

1. Google PageSpeed Insights (pagespeed.web.dev) — переключи вкладку "Мобильные". Кроме Core Web Vitals покажет аудит мобильной версии: наличие viewport, размер шрифтов, интерактивных зон.

1. Screaming Frog — меню Mode > "Rendering" > JavaScript. В настройках можно выставить User Agent Googlebot Smartphone, чтобы краулить сайт глазами мобильного бота и выявить страницы, которые отдают урезанный контент.

1. Ручная проверка — DevTools в Chrome (F12 > Toggle Device Toolbar, Ctrl+Shift+M). Проверь несколько ключевых страниц на ширине 375px (iPhone SE) и 390px (iPhone 14).

Как исправить

Шаг 1. Добавь viewport-мета-тег — без него мобильный браузер рендерит страницу как десктоп:

<meta name="viewport" content="width=device-width, initial-scale=1">

Шаг 2. Используй адаптивные медиазапросы в CSS:

/* Мобильные: до 768px */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 16px;
  }
  body {
    font-size: 16px; /* минимум для читаемости */
  }
  .btn {
    min-height: 44px; /* рекомендация Apple/Google по tap target */
    min-width: 44px;
  }
}

Шаг 3. Реши проблему с изображениями — задай max-width: 100%:

img, video, iframe {
  max-width: 100%;
  height: auto;
}

CMS-специфика:

• WordPress — установи адаптивную тему (Twenty Twenty-Four, Astra, GeneratePress). Плагин WP Rocket или Imagify сожмёт медиафайлы для мобильных.
• Tilda — адаптивность встроена, но проверь каждый блок в мобильном редакторе. В Zero Block отдельно настраивай breakpoints.
• 1C-Bitrix — используй шаблон на Bootstrap или Bitrix Framework с включённым адаптивным режимом в настройках шаблона сайта.
• Webflow — переключайся между breakpoints прямо в редакторе (иконки устройств вверху). Webflow адаптивен по умолчанию, но кастомные стили нужно прописывать на каждом breakpoint отдельно.

Типичные ошибки

1. Viewport с `user-scalable=no` — запрет масштабирования (user-scalable=no или maximum-scale=1) нарушает доступность и карается Google в рамках Mobile Usability. Убери этот атрибут.

1. Контент только в десктопной версии — при mobile-first indexing Google не увидит скрытый через display:none на мобильных текст. SEO-важный контент нельзя скрывать исключительно на мобильных.

1. Мелкие tap-таргеты — кнопки меньше 44×44px и ссылки вплотную друг к другу ведут к ошибкам в GSC и высокому отказу на мобильных.

1. Сторонние виджеты без адаптива — чаты, pop-up, виджеты обратного звонка часто перекрывают контент на мобильных. Проверяй их отдельно.

1. Разный контент на мобильном и десктопном URL — схема с отдельным m.site.ru без правильных canonical и alternate запутывает боты и создаёт дубли.

Влияние на разные типы сайтов

Для интернет-магазинов адаптивность критична: по данным Яндекса, более 70% заказов в e-commerce оформляется с мобильных устройств. Карточки товаров с мелкими фото, кнопка "Купить" вне зоны видимости или форма с неудобными полями — каждый из этих факторов режет конверсию и одновременно ухудшает поведенческие сигналы для ранжирования. Особое внимание стоит уделить фильтрам каталога — на мобильных они часто ломаются первыми.

Для контентных сайтов и блогов главное — читаемость: размер шрифта от 16px, ширина строки не более 70 символов, отступы между абзацами. Лендинги и SaaS-сайты теряют лиды, если форма захвата или CTA-кнопка съезжает за пределы экрана. Для SaaS дополнительно важно проверить личный кабинет и онбординг в мобильном браузере — их часто забывают при SEO-аудите, хотя они влияют на удержание и косвенно на ИКС.