Когда-то мобильная версия считалась приятным дополнением к основному сайту. Сегодня для большинства тематик именно смартфон приносит львиную долю трафика, а значит, поисковые системы смотрят на сайт прежде всего глазами мобильного пользователя. Если ваш сайт неудобен на телефоне, вы теряете не только посетителей, но и позиции. Мобильная выдача давно живёт собственной жизнью, и порой сильно отличается от привычной десктопной.
В этой статье разберём, как устроена мобильная выдача, какие подходы к созданию мобильной версии существуют, что проверять и как исправлять типичные проблемы.
Чем отличается мобильная выдача от десктопной
Алгоритмы ранжирования для мобильных устройств учитывают дополнительные факторы. Разница бывает заметной: один и тот же запрос на телефоне и на компьютере способен показать разные сайты и в разном порядке.
- Удобство на малом экране. Читаемый шрифт, достаточный размер кнопок, отсутствие горизонтальной прокрутки.
- Скорость загрузки. Мобильный интернет нестабилен, и тяжёлые страницы наказываются сильнее.
- Геолокация. Для локальных запросов ближайшие организации выходят в приоритет.
- Интерфейс выдачи. На экране помещается меньше результатов, а значит, борьба за верхние позиции жёстче.
- Ответы прямо в выдаче. Быстрые ответы, карточки организаций, блоки с картой забирают часть кликов.
- Намерение пользователя. С телефона чаще ищут «рядом», «как добраться», «позвонить», «цена».
Три подхода к мобильной версии
Существует несколько способов сделать сайт доступным на телефоне. У каждого свои плюсы и минусы.
Адаптивная вёрстка
Один адрес, один код, внешний вид подстраивается под размер экрана с помощью гибкой сетки и медиазапросов. Это самый распространённый и рекомендуемый вариант. Поисковики его любят: один URL, нет дублей, не нужно сопоставлять версии.
Динамический показ
Адрес тот же, но сервер в зависимости от устройства отдаёт разный HTML. Это даёт гибкость, но требует аккуратности: нужно корректно сообщать поисковикам о различиях через заголовок, иначе есть риск неверного кеширования.
Отдельная мобильная версия
Отдельный адрес, например на поддомене, с собственным шаблоном. Такой вариант сложнее в поддержке: нужно связывать версии между собой, следить за соответствием контента и настроить перенаправления. Часто встречается на старых проектах, и его всё чаще заменяют адаптивной вёрсткой.
| Подход | Плюсы | Минусы |
|---|---|---|
| Адаптивная вёрстка | один адрес, проще поддержка | нужна аккуратная вёрстка |
| Динамический показ | гибкость под устройство | риски кеширования |
| Отдельная версия | полный контроль над шаблоном | дубли, сложность связей |
Технические требования к мобильной версии
Независимо от выбранного подхода, есть базовый набор требований, без которого нормальной мобильной выдачи не будет.
- Мета-тег viewport. Без него браузер покажет страницу в масштабе десктопа, а текст будет микроскопическим.
- Одинаковый контент. Мобильная версия не должна терять тексты, изображения и структурированные данные по сравнению с полной. Поисковики индексируют сайт прежде всего по мобильной версии.
- Доступность ресурсов. Стили, скрипты и картинки не должны быть закрыты для роботов, иначе они не смогут оценить внешний вид.
- Отсутствие навязчивых элементов. Всплывающие окна, закрывающие весь экран, и баннеры, мешающие чтению, ухудшают оценку.
- Корректные перенаправления. Если есть отдельная версия, пользователь с телефона должен попадать на соответствующую страницу, а не на главную.
Скорость и вес страниц
Мобильная аудитория терпит ожидание меньше десктопной. Если страница грузится дольше нескольких секунд, значительная часть посетителей уходит. Поведенческие факторы ухудшаются, а следом проседают позиции.
- Сжимайте и конвертируйте изображения в современные форматы, отдавайте их в размере, подходящем экрану.
- Включите ленивую загрузку для картинок ниже первого экрана.
- Уменьшите количество скриптов, откажитесь от тяжёлых библиотек, где они не нужны.
- Сделайте минификацию стилей и скриптов, подключите сжатие на сервере.
- Настройте кеширование статических файлов.
- Выносите критически важные стили в начало страницы, остальные подгружайте позже.
- Используйте шрифты умеренно: каждый дополнительный начертание — лишний запрос.
Юзабилити: что любит палец
На телефоне вы управляете не курсором, а пальцем, и это накладывает ограничения на оформление.
- Кнопки и ссылки должны быть достаточно крупными и не прижаты друг к другу.
- Размер основного шрифта не меньше шестнадцати пикселей, иначе придётся приближать.
- Меню компактное и понятное, с заметной кнопкой открытия.
- Формы короткие, с правильными типами полей: для телефона цифровая клавиатура, для почты — подходящая раскладка.
- Номер телефона можно набрать нажатием, адрес открывается в навигаторе.
- Таблицы и изображения не выходят за границы экрана.
Как проверить мобильную версию
Проверка не требует сложных инструментов. Начните с простого.
- Откройте сайт на нескольких реальных устройствах: старом и новом, с большим и малым экраном.
- Воспользуйтесь режимом эмуляции устройств в браузере и пройдите основные сценарии: поиск, фильтр, оформление заказа.
- Загляните в отчёты Яндекс.Вебмастера и Google Search Console по мобильному юзабилити — там указаны конкретные страницы с проблемами.
- Проверьте скорость специальными сервисами и обратите внимание на показатели загрузки на мобильных.
- Посмотрите отчёты Метрики в разрезе устройств: сравните отказы, время на сайте и конверсию.
Если на телефоне отказы заметно выше, чем на компьютере, проблема почти наверняка в удобстве или скорости.
Типичные ошибки
- Мобильная версия урезана. Часть текста и разметки отсутствует, и поисковик видит меньше, чем на полной версии.
- Закрытые от роботов ресурсы. Стили и скрипты заблокированы, страница признаётся неудобной.
- Неправильные перенаправления. Все мобильные посетители отправляются на главную вместо нужной страницы.
- Навязчивая реклама и окна. Закрывающие контент блоки приводят к понижению.
- Мелкие элементы управления. Люди промахиваются и уходят.
- Игнорирование скорости. Красивый, но тяжёлый дизайн проигрывает простому и быстрому.
Особенности для локальных запросов
Если вы работаете с клиентами в конкретном городе, мобильная выдача особенно важна. Заполните карточку организации в справочниках и на картах, укажите точные адреса, часы работы и телефоны. На сайте разместите контактный блок на видном месте, добавьте разметку организации и схему проезда. Для мобильного пользователя дорога от поиска до звонка должна занимать секунды.
План действий для существующего сайта
Если сайт уже работает и вы подозреваете, что мобильная версия подводит, действуйте по порядку.
- Выгрузите из аналитики долю мобильного трафика и сравните конверсии по устройствам.
- Составьте список самых посещаемых страниц и проверьте каждую на телефоне вручную.
- Исправьте критические проблемы: отсутствие viewport, нечитаемый шрифт, горизонтальную прокрутку.
- Оптимизируйте картинки и уберите лишние скрипты.
- Через пару недель сверьтесь с отчётами вебмастерских панелей и динамикой мобильных позиций.
Не пытайтесь переделать всё сразу. Начните с страниц, которые приносят больше всего посетителей и заявок, и двигайтесь вниз по списку.
Заключение
Мобильная выдача давно перестала быть второстепенной. Оптимальный путь для большинства проектов — адаптивная вёрстка с одинаковым контентом, быстрыми страницами и удобными элементами управления. Регулярно проверяйте отчёты в вебмастерских панелях, тестируйте сайт на живых устройствах и следите за скоростью. Мобильный посетитель нетерпелив, но щедро награждает тех, кто о нём позаботился: ростом трафика, лучшими поведенческими показателями и позициями.