Мобильная версия сайта и mobile-first индексация

Откройте Яндекс Метрику любого сайта услуг в Самаре — от салона красоты до автосервиса — и посмотрите на разбивку по устройствам. В большинстве ниш доля смартфонов давно перевалила за половину, а в некоторых, например в доставке еды или вызове эвакуатора, доходит до 80–90 %. Компьютер стал устройством для работы, а поиск услуг и покупок переехал в телефон.

Поисковые системы давно это учли. Google перешёл на mobile-first индексацию: основной для него стала мобильная версия страницы. Яндекс тоже учитывает удобство на смартфонах и отдельно помечает сайты, оптимизированные для мобильных. Если на телефоне сайт неудобен или показывает урезанный контент, позиции страдают на всех устройствах.

Что такое mobile-first индексация

Раньше робот Google смотрел на сайт глазами настольного браузера. Мобильную версию он учитывал, но основой для оценки служила версия для компьютера. При mobile-first всё наоборот: робот приходит с мобильным user-agent, видит страницу так, как её видит смартфон, и именно это содержимое попадает в индекс.

Отсюда простое, но важное следствие: чего нет в мобильной версии, того для поисковика не существует. Если ради компактности вы убрали с телефона блок с описанием услуги, таблицу цен или отзывы, Google не учтёт их при ранжировании даже для пользователей компьютеров.

Чем это отличается от адаптивности

Mobile-first — это про то, какую версию робот берёт за основу. Адаптивность — про то, как устроен сам сайт. Сайт может быть адаптивным и при этом плохо проходить mobile-first: например, если часть текста на узких экранах скрыта и подгружается только по клику через отдельный запрос.

Три способа сделать мобильную версию

Технически есть три подхода. У каждого свои плюсы, но для SEO они не равноценны.

Адаптивная вёрстка

Один адрес, один HTML-код, внешний вид меняется с помощью CSS в зависимости от ширины экрана. Это вариант по умолчанию для новых сайтов.

Плюсы: нет дублей, контент одинаков для всех устройств, проще поддерживать. Минусы: требует аккуратной работы с изображениями и скриптами, иначе мобильная версия будет грузить всё то же, что и настольная.

Динамическая выдача

Один адрес, но сервер отдаёт разный HTML в зависимости от устройства. Встречается на старых крупных проектах.

Плюсы: можно облегчить мобильный код. Минусы: легко ошибиться в определении устройства, нужно передавать заголовок Vary, а контент двух версий со временем начинает расходиться.

Отдельный мобильный поддомен

Сайт для смартфонов живёт на поддомене вида m.site.ru. Когда-то это было популярно, сейчас — наследие прошлого.

Плюсы: полная свобода в дизайне мобильной версии. Минусы: два набора адресов, необходимость связывать их специальными тегами и редиректами, постоянный риск рассинхронизации контента и дублей.

Подход	Адресов на страницу	Риск дублей	Сложность поддержки	Наша рекомендация
Адаптивная вёрстка	Один	Минимальный	Низкая	Выбор по умолчанию
Динамическая выдача	Один	Низкий	Средняя	Только если уже внедрена и работает
Мобильный поддомен	Два	Высокий	Высокая	Планировать переход на адаптив

Если у вас мобильный поддомен, переход на адаптивную вёрстку стоит закладывать в ближайший редизайн. При переходе понадобятся постоянные редиректы со всех мобильных адресов на основные — как это правильно настроить, описано в статье про редиректы 301 и 302.

Что проверять в мобильной версии

Проверку удобно проводить по чек-листу. Мы используем такой.

Контент

• Основной текст страницы полностью присутствует на мобильном. Сворачивать его в аккордеоны и вкладки можно, удалять — нельзя.
• Заголовки H1 и H2 совпадают с настольной версией.
• Изображения на месте и имеют заполненный alt.
• Таблицы цен и характеристик не пропадают на узких экранах, а прокручиваются горизонтально внутри своего блока или перестраиваются в карточки.
• Отзывы, кейсы и сертификаты не скрыты «ради экономии места».

Техническая часть

• Мета-теги title, description и robots совпадают на всех версиях.
• Микроразметка присутствует и в мобильной версии. Подробнее о ней — в материале о микроразметке Schema.org.
• Мета-тег viewport задан корректно, страница не требует масштабирования.
• Ресурсы для мобильной версии — стили, скрипты, изображения — не закрыты в robots.txt.
• Отложенная загрузка контента срабатывает без действий пользователя: робот не кликает и не прокручивает страницу бесконечно.

Удобство

• Шрифт основного текста не меньше 16 пикселей.
• Кнопки и ссылки имеют размер, удобный для пальца, и не стоят вплотную друг к другу.
• Нет горизонтальной прокрутки всей страницы.
• Всплывающие окна не перекрывают контент сразу после входа. Навязчивые полноэкранные баннеры поисковики не любят.
• Формы заявки короткие, поля подходящего типа: для e-mail открывается соответствующая клавиатура.
• Главное действие — «Оставить заявку», «В корзину», «Записаться» — видно без долгой прокрутки.

Скорость на смартфоне

Мобильная версия почти всегда медленнее настольной: слабее процессор, нестабильнее связь. Поэтому именно на ней чаще всего проваливаются метрики Core Web Vitals. Подробный разбор метрик — в статье Core Web Vitals простым языком, здесь перечислим то, что особенно важно для смартфонов:

1. Отдельные размеры изображений. Незачем отдавать телефону фото шириной 2 500 пикселей. Используйте набор размеров, чтобы браузер выбирал подходящий.
2. Меньше скриптов. Каждый виджет на слабом процессоре выполняется в разы дольше, чем на компьютере.
3. Никаких тяжёлых слайдеров и видеофонов на первом экране.
4. Кеширование и сжатие на сервере. Экономят и время, и мобильный трафик посетителя.

Как проверить сайт глазами робота

Смотреть на сайт со своего смартфона полезно, но недостаточно. Нужно понять, что видит именно поисковик.

• Инструмент проверки URL в Search Console показывает, каким агентом просканирована страница, и отдаёт скриншот и отрисованный HTML. Сравните его с тем, что видите вы.
• Проверка мобильных страниц в Яндекс Вебмастере покажет, считает ли Яндекс страницу оптимизированной для мобильных, и перечислит проблемы.
• Режим эмуляции устройств в браузере удобен для быстрой проверки вёрстки на разных ширинах экрана.
• Краулер с мобильным user-agent позволит массово сравнить title, H1, объём текста и количество ссылок между версиями.

Особое внимание уделите сравнению объёма текста. Если на настольной версии страница услуги содержит 6 000 символов, а на мобильной — 1 500, это тревожный сигнал.

Пример из практики

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

Проверка показала: на мобильных устройствах тема оформления скрывала блоки с описанием программ, расписанием и педагогами, оставляя только баннер и форму записи. Для посетителя это было «чисто и лаконично», а для робота Google страница превратилась в пустую посадочную с заголовком и кнопкой.

Что сделали:

1. Вернули весь текстовый контент в мобильную версию, свернув длинные блоки в раскрывающиеся списки.
2. Перестроили таблицу расписания в карточки, удобные для узкого экрана.
3. Сжали фотографии педагогов и отложили загрузку онлайн-чата.
4. Увеличили кнопки записи и закрепили их внизу экрана.

Через два месяца страницы программ поднялись в Google в топ-10 по основным запросам, а доля заявок со смартфонов выросла почти на треть.

Что делать, если бюджет ограничен

Не у всех есть возможность сразу переделать сайт. Если ресурсы ограничены, действуйте по приоритетам:

• сначала — страницы с наибольшим мобильным трафиком и заявками;
• затем — проблемы, из-за которых пропадает контент для робота;
• потом — удобство форм и кнопок;
• в последнюю очередь — косметика и анимации.

Если же текущий сайт устарел настолько, что точечные правки не спасают, выгоднее один раз сделать адаптивный сайт с учётом требований поиска. Такой проект мы ведём в рамках разработки сайтов под SEO.

Главное

Mobile-first индексация означает, что оценка вашего сайта начинается со смартфона. Чтобы не терять позиции:

• выбирайте адаптивную вёрстку, а мобильные поддомены планомерно выводите из эксплуатации;
• следите, чтобы мобильная версия содержала весь контент, мета-теги и разметку;
• проверяйте страницы глазами робота, а не только своим телефоном;
• уделяйте особое внимание скорости на слабых устройствах и мобильном интернете;
• делайте формы и кнопки удобными для пальца — это влияет и на поведенческие факторы, и на заявки.

Если хотите понять, как ваш сайт выглядит для поисковика на смартфоне, закажите SEO-аудит — мобильная версия проверяется в нём отдельным блоком.