Mobile-first: как Яндекс и Google видят мобильную версию сайта

Мобильная индексация по принципу mobile-first означает: поисковый робот оценивает сайт таким, каким его видит смартфон. Google перешёл на этот режим полностью, Яндекс оценивает мобильную версию как обязательный сигнал качества для мобильной выдачи — а это 60–70% трафика Рунета. Практический смысл один: если на мобильной версии скрыт контент, недоступна цена или вёрстка ломается, поиск «не видит» этого контента в принципе, как бы красиво он ни выглядел на большом экране.

Короткий ответ: откройте свой сайт на телефоне с медленным интернетом и пройдите по пути клиента. Дальше — таблица из 15 проверок, которая превращает «у нас адаптивный сайт» в проверяемое утверждение.

Три заблуждения про «адаптивность»

1. «У нас адаптив — значит всё хорошо». Адаптив — про вёрстку, но не про скорость и не про контент. Часто на мобильном скрыты блоки с текстом, ценами или таблицами — робот это трактует как отсутствие контента.

2. «Отдельная m.версия надёжнее». Наоборот: m.domains добавляют зеркало, редиректы и риск разъезда контента. Современный стандарт — один URL с адаптивом.

3. «Мобильные — это потом, у нас B2B». Даже в B2B больше половины первого касания происходит с телефона: директор читает почту и статьи со смартфона.

Чек-таблица мобильной готовности

№	Проверка	Порог	Как проверить
1	Viewport задан	width=device-width	Ctrl+U → meta viewport
2	Зум не запрещён	Нет maximum-scale=1	Там же
3	Горизонтального скролла нет	0 пикселей	Телефон, палец
4	Шрифт читаемый	≥14px основного текста	Глаза + инструменты разработчика
5	Кнопки удобные	≥44×44 px, отступы	Тапать по всем
6	Контент не скрыт на мобильном	display:none не прячет текст/цены	Сравнить десктоп и мобайл
7	Цена видна без клика	В первом экране на карточках	Открыть карточку товара
8	Телефон — ссылка tel:	Клик = звонилок	Тап
9	Форма удобна	Поля ≥44px, нужный тип клавиатуры	Заполнить заявку
10	Картинки адаптивны	srcset или WebP	Инструменты разработчика
11	Всплывающие баннеры не блокируют	Закрываются в 1 тап	Открыть страницу
12	LCP мобильный	<2,5 с	PageSpeed Insights, мобильный
13	CLS на мобильном	<0,1	Там же
14	Скрипты не вешают ввод	INP <200 мс	Прокликать меню/фильтр
15	Мобильная выдача CTR-конкурентна	Сниппет читается без обрезки	Поиск с телефона

Пункт 6 — самый коварный: «спрятать на мобильном длинный текст» — популярное дизайнерское решение, которое вырезает из индекса половину страницы. Если контент не нужен мобильному пользователю, честнее сократить его для всех, чем прятать от части аудитории и всех роботов.

Проверка глазами робота, а не только глазами дизайнера

Два приёма:

1. Инструменты разработчика браузера → режим устройства. Выберите средний Android, сеть Slow 4G, отключите кэш. То, что вы увидите в первые 5 секунд, видит и робот, и живой клиент в метро.

2. Просмотр исходного кода (Ctrl+U) и поиск скрытого текста. Если в HTML есть абзацы, которых нет на экране телефона, — проверьте, не спрятаны ли они через классы hidden/md:hidden/mobile-hide.

Что важнее всего в 2026 году

По нашим данным аудитов российских сайтов, три мобильные проблемы встречаются чаще прочих:

• Поп-апы поверх первого экрана (подписка, куки, «скидка 5%») — закрываются с трудом, двигают CLS и выталкивают LCP за порог.
• Карусели и слайдеры вместо контента — главное содержимое уезжает во второй слайд, который пользователь и робот видят с вероятностью 30%.
• Таблицы без горизонтальной прокрутки — на узком экране таблица ломает вёрстку или прячется; решение — обёртка с overflow-x или перестройка в карточки на мобильном.

Отдельная m.версия: если она у вас уже есть

Ничего не бросайте в одночасье, но план такой: убедиться, что контент m.версии и основной совпадает; настроить корректные ссылки canonical/alternate; и в долгую — мигрировать на адаптивный единый домен. Разъехавшийся контент между версиями — источник тихих потерь: робот индексирует мобильный вариант, а в нём нет половины текста.

Связь с ИИ-ответами

ИИ-краулеры читают тот же HTML, что и мобильный робот. Скрытый на мобильном контент не видят и они. Так что mobile-first — это ещё и geo-ready: одна работа на оба канала.

Порядок работ на неделю

1. День 1: пройти таблицу 1–15 на 5 ключевых страницах, зафиксировать провалы.

2. День 2: viewport, скрытый контент, tel:-ссылки — правки шаблона.

3. День 3: поп-апы и карусели — привести в порядок.

4. День 4: картинки (размеры, WebP), шрифты.

5. День 5: замер LCP/CLS до/после в PageSpeed, полевые данные в Search Console — зафиксировать победу цифрой.

Практикум: 10 минут « глазами клиента» на своём телефоне

Откройте свой сайт на телефоне в режиме «медленный интернет» (или в лифте) и пройдите путь клиента, фиксируя каждое раздражение. Вот протокол, который мы даём клиентам на самопроверку:

1. 0–3 секунды. Что появилось первым? Если баннер куки и логотип — уже минус: человек ждёт заголовок и смысл.

2. Первый экран. Понятно за 5 секунд, что вы предлагаете и сколько это стоит? Кнопка действия доступна без скролла?

3. Скролл вниз. Страница прыгает, пока догружаются картинки? Кнопки уезжают из-под пальца? Это CLS — человек просто закрывает.

4. Тап по телефону. Открывается звонилка или скопировался номер? Ссылка tel: — минута работы.

5. Форма заявки. Можно ли заполнить одной рукой? Поднимается ли нужная клавиатура (цифровая для телефона, email для почты)?

6. Поиск по сайту. Находится ли товар из главной категории? Пальцем промахиваешься по результатам?

7. Возврат. Нажали «назад» — сайт перезагружается с нуля? Тоже раздражение и секунды.

Каждое «нет» и «раздражает» из этого списка — конкретная правка, а не «переделать мобильную версию». Десять минут такого прохода находят больше, чем месяц споров с дизайнером.

Мини-таблица: симптом → болезнь → лекарство

Симптом на телефоне	Метрика	Типовая причина
Белый экран 3+ секунды	LCP	Нет кэша, тяжёлая тема
Кнопка «уехала» при тапе	CLS	Картинки без размеров, баннеры
Меню открывается с задержкой	INP	Тяжёлый JS-компонент меню
Текст мелкий, зум запрещён	Viewport	maximum-scale=1 в мета-теге
Горизонтальная прокрутка	Вёрстка	Фиксированные ширины таблиц/блоков
Форма «не отправляется»	Функциональность	Валидация только под десктоп

INSONT проверяет мобильные пункты автоматически в составе аудита: viewport, запрет зума, скрытие контента, скорость ответа. Для остального остаётся самый честный инструмент — ваш телефон и пять минут по пути клиента: от поиска до кнопки «Отправить заявку».

Три шага, которые дают 80% мобильной пользы

Если ресурсы ограничены, делайте в этом порядке: (1) viewport и запрет скрытия контента — это SEO-база и одна строка кода; (2) размеры картинок и WebP — это CLS, LCP и половина веса страницы; (3) кликабельный телефон и кнопка в первом экране — это конверсия мобильного трафика, который уже есть. Всё остальное — карусели, поп-апы, тонкая полировка — после этих трёх.

Как проверить, что робот видит мобильную версию

Вебмастер показывает «Снимки страниц» — как страницу увидел робот Яндекса. В GSC есть «Проверка URL» → «Проверить страницу» с рендером: там видно, что отрисовал Googlebot. Если в снимках нет текста или блоков, которые вы видите на телефоне, — контент скрыт скриптами или отдельными мобильными шаблонами, и именно это видят (точнее, не видят) поисковики. Это же касается ИИ-краулеров: они читают тот же исходный HTML.

Скрытый контент: типовые находки

Наши аудиты регулярно находят на мобильной версии спрятанными: полный текст описания услуги (свернут в аккордеон, который робот не раскрывает), таблицу цен (заменена картинкой на «узком экране»), блок отзывов («мешает конверсии»), характеристики товара. Каждый из этих блоков — контент, который вы написали, оплатили и спрятали от половины аудитории и всех роботов. Правило простое: важное для выбора — видимое; если оно не помещается — меняйте вёрстку, а не видимость.

Чек-тест первого экрана на чужом телефоне

Самый быстрый способ увидеть правду: возьмите телефон человека, который не знает ваш сайт (коллега, родственник), дайте задание «закажи вот это» и молча наблюдайте. Секундомер не нужен — считайте вслух раздражения: «где цена?», «куда нажать?», «почему не открывается?». Пять таких сессий находят больше проблем, чем любой аудит: люди говорят вслух то, что аналитика никогда не покажет. Типовые находки таких сессий: кнопка ниже первого экрана, телефон некликабелен, форма требует адрес с клавиатурой для писем, поп-ап закрывает кнопку, а «посмотреть больше» ведёт не туда. Каждая находка — одна правка разработчику, и конверсия мобильного растёт без всякого редизайна.

Связь с выручкой: считаем цену медленности

Возьмите реальную вилку: мобильный трафик 10 000 визитов в месяц, конверсия 1%, чек 5 000 ₽ — это 500 000 ₽ выручки с мобильных. Исследования конверсии раз за разом показывают: каждая секунда загрузки сверх двух отнимает заметную долю конверсии. Если ваш LCP пять секунд — вы дарите конкурентам двузначный процент выручки ежемесячно. Эти две строчки арифметики полезнее любого отчёта «о важности UX»: скорость перестаёт быть «техническим долгом» и становится строкой бюджета с конкретной ценой вопроса.

Резюме: мобильный чек-лист на холодильник

Viewport без запрета зума; контент не спрятан скриптами и классами; цена и телефон кликабельны в первом экране; кнопка действия доступна без скролла; картинки с размерами и в WebP; поп-апы закрываются в один тап; формы с правильной клавиатурой; LCP < 2,5 с на реальном 4G. Восемь пунктов, вечер проверок, и ваш сайт одинаково честен для роботов, людей и моделей — потому что все трое приходят с телефона.

Как поставить мобильную задачу разработчику без недопониманий

Задачи «сделайте мобильную версию лучше» не работают — работаю спецификации. Формулируйте по шаблону: страница → метрика → порог → как проверить. «Карточка товара: LCP мобильный ≤ 2,5 с, проверка PageSpeed Insights; кнопка в первом экране без скролла, проверка на iPhone SE; телефон кликабелен (tel:), проверка тапом». Три строки — и у разработчика есть критерий готовности, а у вас — критерий приёмки. Спецификация из пяти таких строк на пять ключевых страниц закрывает 90% мобильных жалоб клиентов без слова «редизайн».

Финальная мысль

Mobile-first — это не витрина для галочки, а признание того, что ваш клиент живёт в телефоне: стоит в очереди, едет в метро, ждёт встречи. Каждый скачок вёрстки, каждая секунда загрузки, каждая некликабельная мелочь — это микроссора с человеком, который уже почти купил. Уберите трение — и тот же трафик начнёт приносить больше денег без единой новой посетителя. Это самая недооценённая «маркетинговая кампания» из всех возможных.

И приходите на мобильную проверку с реальными задачами клиентов: «заказать», «позвонить», «найти адрес» — телефон не врёт, где именно трение.