Большая часть людей сегодня впервые видит ваш сайт на экране смартфона. Разбираем, чего от мобильной версии ждут поисковые системы и живые посетители и как проверить свой сайт без дорогого аудита.
Почему мобильная версия стала главной
Ещё недавно мобильную версию делали «для галочки»: урезанная копия основного сайта, крупные кнопки и минимум информации. Сейчас ситуация обратная. Для многих ниш — доставка еды, такси, салоны красоты, медицинские услуги, интернет-магазины одежды — основная доля трафика приходит именно со смартфонов. Человек ищет услугу в дороге, в очереди, вечером на диване, и если страница неудобна, он просто возвращается в выдачу и открывает конкурента.
Поисковые системы давно учитывают это поведение. И Яндекс, и Google оценивают сайт в том числе по тому, как он работает на мобильных устройствах. Google открыто перешёл на так называемое mobile-first индексирование: при оценке страницы в первую очередь учитывается её мобильный вариант. Яндекс тоже использует сигналы удобства для мобильных пользователей. Общий вывод простой: плохая мобильная версия мешает продвижению, а хорошая — помогает.
Есть и вторая сторона — реклама. Если вы платите за клики в Яндекс Директе или VK Рекламе, а посадочная страница на телефоне разваливается, вы буквально выбрасываете бюджет. Клик оплачен, человек пришёл, но заявку так и не оставил.
Три подхода к мобильной версии
Технически сделать сайт удобным для смартфонов можно разными способами. У каждого свои плюсы и ограничения.
| Подход | Как работает | Кому подходит |
|---|---|---|
| Адаптивная вёрстка | Один адрес и один код, страница перестраивается под ширину экрана | Большинству сайтов: услуги, блоги, небольшие магазины |
| Динамическая выдача | Адрес один, но сервер отдаёт разный код для компьютера и телефона | Крупным проектам, где мобильный интерфейс сильно отличается |
| Отдельный мобильный поддомен | Мобильная версия живёт на отдельном адресе, например с приставкой m. | Старым проектам, которые сложно переделать целиком |
Для нового сайта почти всегда разумнее адаптивная вёрстка. Её проще поддерживать: вы правите текст один раз, и он меняется везде. Нет риска, что на мобильной версии останутся устаревшие цены или удалённый товар. Поисковикам тоже проще: не нужно разбираться, какая страница основная, а какая — её копия.
Отдельный поддомен требует аккуратной настройки: правильных указаний на связь между версиями, корректных перенаправлений и одинакового содержания. Ошибки здесь приводят к дублям в индексе и путанице с позициями.
Что поисковики считают признаками хорошей мобильной версии
Формальных требований немного, но они важны. Если хотя бы одно не выполняется, сайт рискует получить пометку о неудобстве или потерять позиции по мобильным запросам.
- Корректная настройка области просмотра. Страница должна масштабироваться под ширину экрана, а не показываться уменьшенной копией десктопа.
- Отсутствие горизонтальной прокрутки. Если таблица или картинка вылезает за край и страницу приходится двигать вбок, это сигнал плохой адаптации.
- Читаемый текст без увеличения. Пользователь не должен разводить пальцами, чтобы прочитать абзац.
- Достаточное расстояние между элементами. Ссылки и кнопки, расположенные слишком плотно, приводят к случайным нажатиям.
- Одинаковое содержание. Мобильная версия не должна терять важные тексты, заголовки и структурированные данные, которые есть в полной.
- Скорость загрузки. Мобильный интернет нестабилен, поэтому тяжёлые страницы особенно сильно страдают на телефонах.
Последний пункт заслуживает отдельного разговора, потому что именно на нём «сыплется» большинство сайтов.
Скорость: главный враг мобильной конверсии
Представьте стоматологию в спальном районе. Человек едет в метро, у него разболелся зуб, он ищет «стоматология рядом срочно». Связь прерывается, страница грузится медленно, на экране долго висит белый фон. Скорее всего, он закроет вкладку раньше, чем увидит номер телефона.
Что чаще всего тормозит мобильную версию:
- огромные фотографии, загруженные «как есть» с фотоаппарата;
- видео на фоне первого экрана;
- десятки сторонних скриптов: чаты, виджеты, счётчики, всплывающие окна;
- тяжёлые шрифты в нескольких начертаниях;
- слайдеры с крупными баннерами, которые грузятся все сразу.
Базовые меры знакомы любому разработчику: сжатие изображений и современные форматы, отложенная загрузка картинок ниже первого экрана, отказ от лишних скриптов, кэширование. Проверить скорость можно бесплатными инструментами, например PageSpeed Insights, — он показывает оценку отдельно для мобильных и для компьютеров и подсказывает, что именно мешает.
Практический совет. Перед тем как оптимизировать код, откройте сайт на недорогом смартфоне с медленным интернетом. Флагман в офисном Wi-Fi покажет идеальную картину, но ваш реальный клиент может сидеть со старым телефоном где-нибудь на даче. Именно его опыт и стоит улучшать.
Чего ждут живые пользователи
Формальное соответствие требованиям поисковиков — это минимум. Пользователь оценивает сайт по другим критериям: насколько быстро он нашёл нужное и смог сделать то, ради чего пришёл.
Первый экран
На телефоне первый экран очень маленький. В него должно поместиться главное: что вы предлагаете, для кого и как с вами связаться. Огромный логотип, баннер со слоганом и меню, которое занимает половину экрана, — частые ошибки. Посетитель видит красивую картинку, но не понимает, куда нажимать.
Контакты и кнопки действия
Номер телефона должен быть кликабельным, чтобы звонок начинался одним касанием. Хорошо работает закреплённая кнопка внизу экрана: «Позвонить», «Записаться», «В корзину». Для локального бизнеса полезна кнопка построения маршрута и ссылка на мессенджеры — многим проще написать, чем звонить.
Формы
Заполнять длинную анкету на телефоне мучительно. Оставьте только необходимые поля. Используйте правильные типы полей: для телефона должна открываться цифровая клавиатура, для почты — клавиатура с символом «@». Подсказки и автозаполнение экономят время и снижают число брошенных форм.
Навигация и поиск
Меню «гамбургер» привычно, но спрятанные в нём разделы люди находят хуже. Для интернет-магазина детских товаров, например, имеет смысл вынести на видное место поиск по каталогу и несколько ключевых категорий. Фильтры должны открываться удобно и не сбрасываться при каждом действии.
Типичные ошибки, которые мы видим чаще всего
Проверяя сайты клиентов перед запуском рекламы, мы раз за разом встречаем одни и те же проблемы.
- Всплывающее окно на весь экран сразу после входа. Подписка, скидка, выбор города — человек ещё ничего не увидел, а уже должен что-то закрывать.
- Неработающие элементы. Слайдер не листается пальцем, выпадающее меню не закрывается, карта перехватывает прокрутку страницы.
- Таблицы цен, которые не помещаются. Решение — переверстать их в карточки или дать горизонтальную прокрутку только внутри таблицы, а не всей страницы.
- Мелкие кнопки «Купить». Особенно в карточках товаров, где рядом стоят «В избранное» и «Сравнить».
- Скрытые тексты. Описание услуги убрали «чтобы не мешало», а вместе с ним пропали и ключевые фразы, по которым страница могла ранжироваться.
Как проверить мобильную версию самостоятельно
Полноценный аудит лучше доверить специалисту, но базовую проверку владелец бизнеса может провести сам за час.
- Откройте главную, страницу услуги и карточку товара на двух-трёх разных телефонах, в том числе на устройстве с небольшим экраном.
- Попробуйте пройти путь клиента целиком: найти услугу, узнать цену, оставить заявку или оформить заказ. Засеките время и отметьте все места, где пришлось задуматься.
- Прогоните ключевые страницы через сервис проверки скорости и посмотрите мобильную оценку.
- Загляните в Яндекс Вебмастер и аналогичный инструмент Google: там бывают уведомления о проблемах с отображением на мобильных.
- В Яндекс Метрике сравните показатели отказов, глубину просмотра и конверсию для мобильных и десктопных посетителей. Сильный разрыв — повод искать причину.
- Посмотрите вебвизор или карты кликов по мобильным визитам: часто видно, что люди пытаются нажать на неактивный элемент или не доскролливают до формы.
Например, если на компьютерах сайт приносит условные 5 % заявок от посетителей, а на телефонах — меньше одного процента, проблема почти наверняка в мобильной версии, а не в рекламе или аудитории.
Мобильная версия и реклама
Отдельно стоит сказать о посадочных страницах для платного трафика. В рекламных системах можно посмотреть статистику по типам устройств и при необходимости скорректировать ставки. Но корректировка ставок — это лечение симптомов. Если мобильный трафик плохо конвертируется, сначала стоит улучшить страницу, а уже потом решать, сколько платить за клик.
Хорошая практика — делать для рекламы отдельные лёгкие посадочные страницы под конкретные предложения: короткий оффер, понятная цена, блок доверия и одна форма. На телефоне такие страницы работают заметно лучше, чем перегруженная главная со всеми разделами компании.
Коротко о главном
- Мобильная версия — уже не дополнение, а основной вариант сайта для многих ниш. Поисковики оценивают её в первую очередь.
- Для большинства проектов оптимальна адаптивная вёрстка: один адрес, одно содержание, меньше ошибок.
- Формальные требования простые: правильное масштабирование, читаемый текст, удобные кнопки, отсутствие горизонтальной прокрутки и быстрая загрузка.
- Пользователю важно быстро понять, что вы предлагаете, и связаться с вами в одно касание.
- Регулярно проверяйте сайт на реальных телефонах и сравнивайте мобильную и десктопную аналитику — разрыв в конверсии подскажет, где теряются клиенты.
