Мобильная версия сайта: оптимизация под мобильные устройства

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

Почему Google смотрит на мобильную версию

Потому что Google индексирует сайты такими, какими их видит смартфон. Mobile-first индексация - это способ, при котором робот Google заходит на страницу как смартфон и по увиденному решает, что попадет в индекс и как страница будет ранжироваться, так это описывает справка Google. С 5 июля 2024 года Google сканирует все сайты только роботом для смартфонов, и то, что с телефона не открывается, в индекс не попадает. По данным StatCounter, в сентябре 2026 года 59% просмотров страниц в мире пришлось на мобильные устройства.

Для владельца сайта это значит, что индексация мобильной версии сайта и есть индексация сайта. Если на телефоне текст сокращен, часть ссылок спрятана, а разметка для расширенных сниппетов стоит только в версии для компьютера, Google видит урезанный сайт. Попала ли нужная страница в индекс, можно проверить индексацию страниц в Search Console.

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

Справка Google описывает три способа, и они отличаются адресами страниц и тем, какой код получает телефон:

Google советует адаптивный дизайн: его проще всего сделать и поддерживать. У страницы один адрес, поэтому ссылки и сигналы не делятся между двумя адресами, а правка текста сразу видна на всех устройствах. Динамический показ и отдельный поддомен имеют смысл, только если мобильным пользователям нужен заметно другой функционал, и тогда каждую разницу между вариантами придется держать под контролем. Деление адаптива на AWD с несколькими фиксированными макетами и RWD с одним гибким встречается в статьях разработчиков, но для SEO разницы между ними нет.

Адаптивный дизайн

Адаптивная мобильная версия сайта - это та же страница с тем же адресом и кодом, у которой верстка перестраивается под ширину экрана: колонки встают друг под друга, меню сворачивается в кнопку. Роботу не нужно сопоставлять две страницы, а вам править текст дважды.

Что проверить с разработчиком:

• тег viewport в коде страницы: <meta name="viewport" content="width=device-width, initial-scale=1">, без него телефон показывает уменьшенную страницу для компьютера;
• картинки отдаются по ширине экрана, а не в размере для монитора;
• меню на телефоне открывается одним нажатием и содержит те же разделы.

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

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

• на странице m.-версии тег canonical указывает на страницу для компьютера, а на ней тег alternate ведет обратно, причем для каждой пары страниц;
• на обоих адресах тот же текст, заголовки, title и description, та же разметка и те же картинки с описанием;
• телефон перенаправляется на ту же страницу в m.-версии: с site.com/dostavka на m.site.com/dostavka;
• адреса страниц на поддомене повторяют адреса основного сайта;
• robots.txt поддомена не закрывает страницы и файлы стилей, иначе робот не увидит страницы поддомена;
• m. добавлен в Search Console, лучше ресурсом на весь домен.

Когда хотя бы одна пара страниц не связана, мобильная версия сайта на поддомене превращается в дубли, и Google может выбрать для показа не ту страницу.

Скорость сайта на телефоне

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

Core Web Vitals на мобильных

Core Web Vitals - это три показателя Google, по которым видно, насколько быстро и стабильно страница работает у живых людей:

• LCP показывает, когда загрузился самый крупный элемент первого экрана, хорошо до 2,5 секунды;
• INP показывает, как быстро страница реагирует на нажатие, хорошо меньше 200 миллисекунд, с марта 2024 года он заменил FID;
• CLS показывает, насколько сдвигаются блоки при загрузке, хорошо меньше 0,1.

В Search Console отчет о показателях Core Web Vitals строится отдельно для мобильных и для компьютеров и делит адреса на «Хорошо», «Нужно увеличить скорость» и «Низкая скорость». Это данные реальных пользователей Chrome за 28 дней. Лабораторный замер в PageSpeed Insights или Lighthouse делается один раз на эмуляции телефона и помогает найти причину, но с отчетом может не совпадать.

Картинки и шрифты

Медленный сервер тоже бывает причиной, но чаще мобильную страницу тормозит то, что на нее положили:

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

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

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

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

PageSpeed Insights, Lighthouse и Search Console

PageSpeed Insights показывает для мобильных данные реальных пользователей и лабораторный замер с подсказками. Lighthouse встроен в Chrome: откройте DevTools, перейдите на вкладку Lighthouse, выберите устройство Mobile и запустите отчет. Режим устройства (Toggle device toolbar) показывает, как страница выглядит на телефоне. Проверка мобильной версии сайта в Google Search Console делается через «Проверку URL»: нажмите «Проверить страницу на сайте», затем «Изучить проверенную страницу», и на вкладке «Скриншот» будет то, что увидел робот. Mobile-Friendly Test и отчет об удобстве на мобильных Google отключил 1 декабря 2023 года, заменой назвав Lighthouse.

Чек-лист за 10 минут

Откройте с телефона главную, страницу услуги или товара и контакты и пройдите по списку:

1. Горизонтальной прокрутки нет: страница не уезжает вбок, когда вы листаете вниз.
2. Текст читается без увеличения пальцами, строки не вылезают за экран.
3. Кнопки и ссылки не мелкие: по размеру с подушечку пальца, около 48 на 48 пикселей, и стоят не вплотную.
4. При входе нет окна на весь экран с подпиской или акцией, которое закрывает содержание.
5. Номер телефона нажимается и сразу открывает звонок.
6. Форма заявки заполняется с клавиатуры телефона: для номера открываются цифры, поля не прячутся под клавиатуру.
7. Меню открывается одним нажатием, в нем те же разделы, что на компьютере, и оно закрывается.
8. Картинки и таблицы помещаются по ширине и не обрезаны.

Пройдите список на двух телефонах, Android и iPhone, если они есть рядом, и запишите, что сломано и на какой странице.

Ошибки мобильной оптимизации

Ошибки ниже встречаются чаще всего и мешают и людям, и роботу Google:

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

Частые вопросы о мобильной версии сайта