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

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

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

Раньше поисковый робот смотрел на сайт глазами настольного браузера. При mobile-first индексации основной становится мобильная версия страницы: именно её содержание, ссылки, метатеги и разметку поисковик использует для ранжирования.

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

Адаптивная вёрстка или отдельная мобильная версия

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

Один и тот же адрес и один HTML, который перестраивается под ширину экрана. Это рекомендуемый вариант:

• одно содержание для всех устройств — нет риска, что мобильная версия окажется «урезанной»;
• одни адреса — нет дублей и сложных настроек;
• проще поддерживать: изменения вносятся один раз.

Отдельная мобильная версия

Сайт на поддомене вроде m.example.com. Такой подход встречается на старых проектах. Он сложнее: нужно поддерживать два сайта, правильно связывать их специальными тегами и следить, чтобы содержание совпадало. При разработке нового сайта смысла в нём почти нет.

Что проверить на смартфоне

Читаемость

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

Удобство нажатия

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

Отсутствие горизонтальной прокрутки

Таблицы, широкие изображения, длинные слова и встраиваемые блоки не должны выходить за пределы экрана. Широкие таблицы оборачиваются в контейнер с собственной прокруткой.

Навигация

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

Формы

• минимум полей;
• правильные типы полей: для телефона открывается цифровая клавиатура, для email — клавиатура с символом @;
• сообщения об ошибках понятны и видны рядом с полем;
• кнопка отправки не прячется под клавиатурой.

Всплывающие окна

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

Скорость

Мобильный интернет медленнее и нестабильнее. Тяжёлые изображения и скрипты особенно заметно замедляют загрузку на телефоне. Подробнее — в статье о скорости загрузки сайта.

Как проверить сайт

• Откройте сайт на нескольких реальных телефонах — с маленьким и большим экраном, на Android и iPhone. Пройдите основные сценарии: найти услугу, посмотреть портфолио, отправить заявку.
• Режим устройства в браузере. В инструментах разработчика Chrome можно эмулировать разные экраны.
• PageSpeed Insights — покажет проблемы скорости мобильной версии.
• Отчёты в Search Console — со временем там отображаются проблемы удобства и Core Web Vitals для мобильных.
• Аналитика. Сравните показатель отказов и конверсию на мобильных и десктопе. Если на телефонах заявок заметно меньше при сопоставимом трафике — это сигнал проблем.

Mobile-first в дизайне

Правильный подход — проектировать сайт сразу с учётом мобильных устройств, а не «ужимать» готовый десктопный макет. Это заставляет расставить приоритеты: что самое важное на первом экране, какие блоки действительно нужны, как короче сформулировать предложение. В итоге выигрывает и мобильная, и настольная версия.

Мессенджеры и звонки — главный канал с мобильных

Посетителю со смартфона часто проще написать в WhatsApp или Telegram, чем заполнять форму. Плавающая кнопка мессенджера, кликабельный номер и короткая форма из двух-трёх полей заметно увеличивают число обращений с мобильных. Важно только, чтобы плавающие элементы не перекрывали текст и кнопки страницы, а сообщения из мессенджера кто-то быстро обрабатывал.

Частые ошибки

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

Как мобильная версия влияет на заявки

Удобство на телефоне — это не только SEO. Если человеку неудобно читать, искать информацию или заполнять форму, он уйдёт к конкуренту, даже если нашёл вас первым. Улучшение мобильной версии часто даёт самый быстрый рост заявок без увеличения трафика.

Итог

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