Проверка мобильных страниц в Вебмастере: как читать результат

В Яндекс Вебмастере есть инструмент, который проверяет, удобна ли страница для просмотра на мобильных устройствах. Он загружает страницу от имени мобильного робота, показывает, как она выглядит на экране телефона, и сообщает, если находит проблемы. Для бизнеса в Узбекистане, где клиенты часто ищут услуги с телефона, такая проверка — обязательная часть технического аудита.

Что оценивает инструмент

Проверка смотрит на базовые признаки мобильной оптимизации:

• Указан ли мета-тег viewport, который подстраивает ширину страницы под экран
• Помещается ли содержимое по ширине без горизонтальной прокрутки
• Достаточен ли размер шрифта для чтения без увеличения
• Не используются ли технологии, которые не работают на мобильных
• Как выглядит страница на скриншоте мобильного экрана

Если всё в порядке, инструмент сообщает, что страница оптимизирована для мобильных. Если нет — перечисляет найденные проблемы.

Как проверить страницу

1. Откройте сайт в Вебмастере и найдите инструмент проверки мобильных страниц.
2. Введите адрес страницы целиком.
3. Дождитесь результата и посмотрите на скриншот и список замечаний.

Проверяйте не только главную. Посмотрите основные шаблоны: страницу услуги, категорию, карточку товара, статью, контакты. Часто главная сделана аккуратно, а внутренние шаблоны — нет.

Как читать скриншот

Скриншот показывает, что увидел робот. Обратите внимание:

• Загрузились ли стили и картинки или страница выглядит как голый текст
• Не перекрывает ли содержимое всплывающее окно или баннер
• Видно ли главное: заголовок, предложение, кнопка связи
• Нет ли пустых областей там, где должен быть контент

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

Частые проблемы

Нет мета-тега viewport. Страница отображается как уменьшенная копия компьютерной версии. Исправляется добавлением одной строки в шаблон.

Содержимое шире экрана. Обычно виноваты таблицы, большие картинки с фиксированной шириной, длинные адреса и строки без переносов, встроенные карты и видео с заданной шириной.

Мелкий текст. Шрифт рассчитан на компьютер и не масштабируется. Решение — адаптивные размеры шрифта в стилях.

Элементы слишком близко. Ссылки и кнопки в меню расположены так плотно, что пальцем трудно попасть в нужную.

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

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

Не только «оптимизировано»

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

Связь с Google

У Google тоже есть средства оценки мобильных страниц: отчёт о Core Web Vitals для мобильных и проверка через Lighthouse в браузере. Google индексирует сайты преимущественно по мобильной версии, поэтому проблемы, найденные в Вебмастере, почти всегда важны и для Google.

Чек-лист после проверки

• Viewport есть на всех шаблонах
• Нет горизонтальной прокрутки на ширине телефона
• Текст читается без увеличения
• Кнопки и ссылки удобно нажимать пальцем
• Телефон кликабелен, мессенджеры открываются в приложении
• Всплывающие окна не закрывают содержимое при входе из поиска