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

Чаще всего малому бизнесу хватает одной адаптивной версии: один адрес и одна вёрстка, которая подстраивается под экран. Отдельная версия на адресе вроде m.site.ru нужна редко. Главное — проверить, что с телефона можно найти цену, позвонить и оставить заявку.

Мобильная версия сайта сегодня: что это и какой вариант выбрать

Мобильная версия — это то, что посетитель видит на экране телефона. Она бывает двух видов: отдельный сайт на своём адресе (например, m.site.ru) или та же страница, которая перестраивается под ширину экрана. Второй вариант называется адаптивной вёрсткой, и для услуг, каталога и лендинга он подходит в большинстве случаев.

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

Версии «под Android» или «под iPhone» не нужны. Сайт открывается в браузере, и его вид зависит от ширины экрана, а не от операционной системы.

Дальше в статье: как выбрать вариант, что настроить для поиска и как проверить сайт по числам.

Для телефона важно не название версии, а то, что посетитель может найти цену и оставить заявку.

Как понять, что с телефона сайт работает хуже

Откройте свой сайт на телефоне. Если с ним что-то не так, вы заметите это сразу. Сверьтесь с признаками:

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

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

Теперь посмотрите данные. В Яндекс Метрике есть отчёт по типам устройств; название пункта зависит от интерфейса, поэтому ищите разбивку по устройствам. Он покажет, какая доля посетителей приходит с телефонов именно у вас. Общую цифру по рунету брать не нужно: ваша аудитория может отличаться.

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

Мало заявок с телефона бывает и по другим причинам: пришёл не тот трафик, непонятно предложение, нет отзывов и реквизитов, страница медленно грузится. Вёрстка здесь может быть ни при чём.

Отдельная версия на m.-адресе или адаптив: сравнение по пяти критериям

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

У отдельной версии две копии контента. Каждая правка цены или текста делается дважды, и версии со временем расходятся.

Тип сайта тоже влияет на выбор. Если вы ещё решаете, нужен лендинг или многостраничный сайт, определитесь с этим раньше, чем с мобильной версией.

Мнение. Если у вас услуги или каталог и нет команды, которая будет вести две версии, берите адаптив: так не придётся править две копии при каждом изменении цены или текста.

Что настроить, чтобы мобильная версия не ухудшила видимость в поиске

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

Факт. По документации Google Search Central, при индексировании и ранжировании используется мобильная версия сайта, просканированная Googlebot для смартфонов.

Если у вас адаптивный сайт

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

Если у вас отдельная m.-версия

Страницы двух версий связывают между собой атрибутами rel=canonical и rel=alternate. По документации Google адрес полной версии всегда канонический, а мобильной — альтернативный: с мобильной страницы canonical ведёт на полную, с полной alternate — на мобильную. Ещё нужна переадресация посетителей на подходящую версию.

Проверяйте результат в Яндекс Вебмастере и Google Search Console, в отчётах по мобильным страницам. Названия разделов зависят от текущего интерфейса.

Другие причины просадки в поиске

Просадка бывает и по другим причинам:

• файлы скриптов и стилей закрыты от поисковика;
• на телефоне скрыта часть контента;
• сайт переехал без переадресаций.

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

Чек-лист мобильной страницы: какие числа проверять

Общее «сделайте удобно» ничего не измеряет. Нужны пороги, у каждого из которых есть источник.

Область нажатия — зона, в которую попадает палец, — влияет на то, дойдёт ли мобильный посетитель до заявки. Стандарт WCAG 2.2 в критерии 2.5.8 «Минимальный размер цели» требует область не меньше 24×24 CSS-пикселей (есть исключения, например для целей с достаточным отступом).

Скорость измеряют Core Web Vitals: скорость загрузки, отклик и стабильность страницы. Пороги по документации web.dev проверяют на 75-м процентиле загрузок страниц, отдельно для телефонов и компьютеров:

• время загрузки главного элемента (LCP): до 2,5 с;
• отклик на нажатие (INP): до 200 мс;
• сдвиги макета при загрузке (CLS): до 0,1.

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

Как проверить сайт на телефоне по шагам

Подготовьте свой телефон, адреса главной, страницы услуги и формы заявки, доступ к Метрике и Вебмастеру.

1. Откройте страницы на реальном телефоне и пройдите путь к заявке: найдите цену, нажмите на номер телефона, отправьте форму. Смотрите, что видите на каждом шаге.
2. В браузере на компьютере включите режим устройств. Он быстро покажет, как страница ведёт себя на разной ширине, но реальный телефон точнее.
3. Проверьте скорость в PageSpeed Insights и сверьте результат с порогами из чек-листа.
4. В Метрике откройте Вебвизор и карты кликов по мобильным посетителям, если они включены. Они покажут, куда нажимают мимо кнопок.
5. Убедитесь, что заявка из формы дошла до вас, а в Метрике по мобильным посетителям видны достижения цели.

Условный пример. Человек ищет мастера по ремонту стиральных машин и открывает сайт с телефона. Кнопку «Заказать звонок» перекрывает окно о cookie, которое не закрывается. Он листает, не находит, куда нажать, и уходит. После правки окно закрывается одним касанием, кнопка звонка стоит под рукой, а форма состоит из двух полей: имя и телефон. Путь занимает несколько касаний.

Чаще всего ошибаются так: смотрят только на свой новый телефон при быстром интернете, не отправляют форму до конца и не проверяют цели в Метрике.

Звонок, заявка, оплата: что сделать на телефоне в первую очередь

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

Форма короткая: только то, без чего нельзя связаться. Для поля телефона включите цифровую клавиатуру, для почты — клавиатуру с символом @. Мессенджер или чат на сайте можно добавить, но после того, как понятно предложение и путь к заявке.

Если на телефоне нельзя быстро позвонить и отправить форму, остальные улучшения мобильной версии мало что изменят.

Бывает, что вёрстка ни при чём. Предложение непонятно, нет доверия, сайт медленный из-за хостинга. Тогда новая версия не поможет, и сначала нужно исправить причину.

Контролируйте результат по целям: сравните мобильные цели до и после правок за одинаковый период. Рост это не гарантирует, но покажет, был ли эффект.

Когда хватит правок в конструкторе, а когда сайт стоит пересобрать

Ответьте на четыре вопроса:

• Проблемы точечные: кнопка, форма, размер картинок? Тогда хватит правок.
• Тема или конструктор поддерживают адаптив и позволяют менять мобильный вид? Если да, правьте сами.
• Структура сайта ведёт посетителя к заявке? Если нет, нужна пересборка.
• Контент на телефоне и компьютере расходится? Это тоже довод за пересборку.

Если сайта пока нет, начинайте сразу с адаптивного: закажите сайт для бизнеса с адаптивной вёрсткой.

При любом варианте у сотрудников остаётся работа: держать актуальными цены, тексты и фото и отвечать на заявки. Стоимость и сроки пересборки рассчитываются под задачу.

Следующий шаг: пройдите чек-лист на своём телефоне. Если правки в теме или конструкторе путь к заявке не исправляют, вы можете обсудить пересборку сайта под телефон с командой MERA CLICK.

Частые вопросы

Как узнать, адаптивный у меня сайт или с отдельной m.-версией?

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

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

В меню браузера есть пункт вроде «Версия для компьютера»; название и место зависят от браузера. Если полная версия читается плохо, значит, мобильный вид у сайта нужен и стоит им заняться.

Что подготовить, прежде чем заказывать мобильную версию или адаптацию сайта?

Доступ к Метрике, адреса страниц, где теряются посетители, список того, что должно получиться с телефона (звонок, заявка, оплата), и актуальные тексты, цены и фото.

Как понять через месяц после правок, что мобильная версия сработала?

Сравните мобильные визиты, отказы и достижение целей за одинаковые периоды до и после правок. Если цели не настроены, сначала настройте их: без этого сравнивать нечего.