Как проверить мобильную версию сайта

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

• Страница шире экрана — её приходится двигать вбок пальцем.
• Мелкий текст — меньше 12 пикселей читать трудно даже с увеличением.
• Маленькие кнопки вплотную — легко нажать не туда.
• Окно на весь экран при открытии — подписка, купон, cookie-баннер закрывают содержимое.
• Долгая загрузка — на мобильном интернете тяжёлая страница открывается секундами.

Без тега viewport телефон рисует страницу шириной около 980 пикселей, как на компьютере, и уменьшает её в 2–3 раза. Текст и кнопки становятся мелкими, даже если в стилях всё правильно. Минимальный правильный тег:

<meta name="viewport" content="width=device-width, initial-scale=1">

Не добавляйте в него user-scalable=no и maximum-scale=1: они запрещают увеличивать страницу, и людям со слабым зрением не прочитать текст.

По правилам доступности WCAG 2.2 элемент, на который нажимают, должен быть не меньше 24×24 пикселей или стоять на достаточном расстоянии от соседних. Ссылки внутри текста — исключение: их размер определяется строкой. Для главных кнопок Google советует ещё больше — около 48×48 пикселей.

Чаще всего проблема в меню подвала, пагинации, иконках соцсетей и списках тегов: ссылки высотой 15–20 пикселей стоят друг под другом без отступов. Лечится отступами (padding) у ссылок или промежутками между ними.

Google понижает в мобильной выдаче страницы, где при открытии содержимое закрывает навязчивое окно. Безопасно: небольшой баннер внизу, уведомление о cookie, окно, которое появляется после действия посетителя. Опасно: окно на весь экран сразу после перехода из поиска.

Вставьте адрес в проверку мобильной версии — бесплатно, без регистрации до 10 проверок в день. Сервис открывает страницу в настоящем браузере Chrome на экране 390×844 пикселей, как на смартфоне, и за 5–15 секунд показывает:

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

Если viewport нет, шрифт и кнопки оцениваются с учётом уменьшения страницы — так, как их видит посетитель. Подробнее о скорости — в проверке скорости загрузки.

Нужна ли отдельная мобильная версия на поддомене?

Нет. Адаптивная вёрстка на том же адресе проще: один адрес, один контент, никаких редиректов между версиями. Поисковики её и рекомендуют.

Влияет ли мобильная версия на позиции в Яндексе?

Да, в мобильной выдаче Яндекс учитывает, удобна ли страница на телефоне. А неудобная версия ухудшает поведение посетителей — это влияет на позиции везде.

Сайт выглядит нормально на моём телефоне. Зачем проверка?

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

Какой размер шрифта ставить на мобильном?

Для основного текста — 16 пикселей и больше. Подписи и сноски — не меньше 12 пикселей.