Олег Козлов — специалист по контекстной рекламе

село Федоровка, д. 185

Московская область, Дмитровский м.о.

Россия

+7 (996) 500-98-09

kov290583@yandex.ru

Большая часть поискового трафика на сайты услуг сегодня приходит с телефонов. В некоторых нишах — эвакуатор, вскрытие замков, доставка, срочный ремонт — доля мобильных визитов доходит до 80–90%, потому что человек ищет решение прямо на ходу. При этом сайты по-прежнему делают и принимают на десктопе, а мобильную версию смотрят мельком: «ну, адаптив же есть» — и мобильное SEO остаётся задачей, до которой руки доходят в последнюю очередь.

Мобильное SEO — это не про наличие адаптивной вёрстки. Это про то, что поисковая система оценивает ваш сайт преимущественно по мобильной версии, а человек с телефона в руках принимает решение за полминуты, одной рукой, часто на плохой связи. Если он не может за это время понять, что вы делаете, сколько это стоит и как с вами связаться, — он уходит к следующему.

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

Почему мобильное SEO — это не только адаптивная вёрстка

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

  • Индексация. Робот видит и оценивает мобильную версию страницы. Если часть контента на ней отсутствует, для поиска этого контента просто нет.
  • Скорость и отзывчивость. На мобильном устройстве и канале связи требования жёстче в разы.
  • Удобство взаимодействия. Размеры кнопок, расстояния между ссылками, работа форм, поведение клавиатуры.
  • Приоритет информации. На экране шириной 360 пикселей первый экран вмещает в несколько раз меньше, чем на десктопе. Порядок блоков становится критичным.
  • Мобильный контекст. Человек с телефона чаще ищет «рядом», чаще звонит вместо заполнения формы, чаще спешит.

Отсюда главная мысль: мобильная версия — это не уменьшенная копия десктопной, а основная версия сайта, которую просто иногда смотрят с большого экрана.

Mobile-first индексация: что это значит на практике

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

Контент должен совпадать

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

Метатеги и структурированные данные — тоже

На мобильной версии должны быть те же Title, Description, заголовки, микроразметка и хлебные крошки. Когда-то было нормой отдавать на мобильной версии урезанный набор — сегодня это ошибка.

Внутренние ссылки

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

Проверка одной командой

Самый простой тест: откройте страницу в браузере, включите эмуляцию мобильного устройства и сравните исходный код и видимое содержимое с десктопной версией. Расхождения по текстам, заголовкам и ссылкам — это ваш список задач. Дополнительно стоит заглянуть в Яндекс Вебмастер: там есть отчёты по мобильной пригодности страниц и по ошибкам, которые робот увидел именно на мобильной версии.

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

ЭлементЧто проверяюРабочий ориентир
Первый экранПонятно ли за 3 секунды, что за услуга, где и для когоЗаголовок, гео, выгода, кнопка действия помещаются без прокрутки
ШапкаНе съедает ли пол-экрана, виден ли телефонВысота не более 60–80 px, номер кликабелен
КнопкиРазмер и расстояние между соседнимиНе меньше 44×44 px, отступ между кликабельными — от 8 px
ШрифтЧитается ли без увеличенияОсновной текст от 16 px, межстрочный интервал от 1,4
ФормыЧисло полей, тип клавиатуры, автозаполнение2–3 поля, числовая клавиатура для телефона, подсказки ошибок рядом с полем
ТаблицыНе выезжают ли за экранГоризонтальная прокрутка внутри блока или перестроение в карточки
ИзображенияВес и размеры под мобильный экранОтдельные версии под мобильные, явные размеры в вёрстке
ПопапыПерекрывают ли контент, есть ли крестикНе показывать на входе, крестик не меньше 44 px
МенюДоступность всех разделовВсе важные разделы — в 1–2 касания
ПодвалКонтакты, реквизиты, ссылкиТелефон и адрес кликабельны, карта — по клику

Про размер кликабельных элементов

Это то, что чаще всего портит впечатление. Ссылки в списке идут вплотную, ширина пальца — около сантиметра, человек попадает не туда, возвращается, раздражается. Особенно страдают меню фильтров, пагинация и ссылки внутри текста. Проверять надо пальцем на реальном телефоне, а не курсором в эмуляторе: в эмуляторе всё всегда «нормально нажимается».

Про формы

Каждое лишнее поле на мобильной форме стоит вам заявок. Спрашивайте только то, без чего нельзя перезвонить. Отчество, город, «откуда о нас узнали», комментарий на 500 знаков — всё это переносите в разговор. И обязательно проверьте типы полей: при вводе телефона должна появляться цифровая клавиатура, при вводе почты — клавиатура с символом собаки.

Контент на мобильном: что резать, а что нет

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

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

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

Используйте аккордеоны правильно

Свёрнутые блоки — нормальное решение для мобильной версии: содержимое остаётся в коде и индексируется, а страница не превращается в километровую ленту. Важно, чтобы текст действительно присутствовал в HTML, а не подгружался скриптом по клику: во втором случае робот его может не увидеть.

Дробите текст

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

Не прячьте цены

Самая частая претензия посетителей с телефона: «пролистал всю страницу, цену не нашёл». Диапазон, формула расчёта или пример сметы должны быть выше середины страницы. Отсутствие цен — это ещё и минус по коммерческим факторам, которые я подробно разбирал в статье про коммерческие факторы ранжирования.

Скорость: на мобильных требования жёстче

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

  • Отдавайте изображения по размеру экрана. Картинка шириной 1920 пикселей на экране в 360 — это выброшенный трафик и лишние секунды.
  • Сократите число сторонних скриптов. На мобильном каждый виджет чувствуется заметнее: тяжёлый JavaScript занимает процессор и интерфейс перестаёт отвечать на касания.
  • Уберите тяжёлые эффекты. Фоновое видео, параллакс, анимации при прокрутке — на телефоне это первое, что стоит отключать.
  • Зарезервируйте место под баннеры и изображения, чтобы содержимое не прыгало под пальцем, пока грузится страница.

Мерить нужно по реальным пользователям: в Метрике есть разбивка времени загрузки по типам устройств, и смотреть надо именно мобильный срез — общая цифра всегда красивее и всегда врёт. Подробный разбор метрик и порядка работ — в материале про скорость сайта и Core Web Vitals.

Конверсия на телефоне: что реально приносит заявки

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

Звонок важнее формы

В большинстве услуг мобильный посетитель предпочитает позвонить. Отсюда: номер телефона в шапке кликабельный, кнопка звонка закреплена внизу экрана, время работы указано рядом. Если вы вне рабочих часов, честнее показать «перезвоним с 9:00», чем делать вид, что линия работает круглосуточно.

Мессенджеры

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

Липкая панель действий

Закреплённая внизу экрана полоса с двумя-тремя действиями («Позвонить», «Написать», «Рассчитать») работает почти всегда. Главное — не делать её выше 60 пикселей и не перекрывать ею контент.

Короткий путь до заявки

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

Что убивает конверсию

  • Попап на входе, который перекрывает весь экран, а крестик — три пикселя в углу.
  • Капча, которую невозможно пройти с телефона.
  • Форма из восьми полей с обязательным вводом отчества.
  • Номер телефона картинкой — по нему нельзя позвонить касанием.
  • PDF-прайс вместо таблицы цен: на телефоне он открывается плохо и читается ещё хуже.

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

Мобильный поиск и локальный контекст

Значительная часть мобильных запросов имеет привязку к месту — явную («шиномонтаж Митино») или неявную, когда человек просто ищет «шиномонтаж», а поисковик сам подставляет его местоположение. Для локального бизнеса это означает несколько практических вещей.

  • Карточка организации должна быть заполнена и актуальна — с телефона люди часто вообще не доходят до сайта, а звонят прямо из карточки на картах.
  • Адрес и зона работы — на видном месте. Не только в подвале, но и в блоке контактов выше по странице.
  • Кликабельные адрес и телефон. Касание по адресу должно открывать карту, касание по номеру — набирать.
  • Ориентиры вместо формальностей. «5 минут пешком от метро Речной вокзал, вход со двора» полезнее, чем один почтовый адрес.
  • Часы работы и «сегодня открыто». Человек в дороге принимает решение по этому признаку.

Как выстраивать видимость по запросам с городом и районом, я разбирал отдельно в материале про локальное SEO — мобильная версия там играет ключевую роль, потому что именно с телефона идёт основная доля таких запросов.

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

Схема с адресами вида m.site.ru сегодня считается устаревшей, но такие сайты ещё встречаются. Если у вас такой случай, есть два пути.

  1. Перейти на адаптивную вёрстку — один адрес, один набор контента, никаких рассогласований. Это правильное решение в долгую.
  2. Если переход невозможен сейчас, нужно аккуратно поддерживать связку: корректные взаимные указания между десктопной и мобильной версиями, одинаковый контент и метатеги, синхронное обновление обеих версий.

Основная проблема таких схем — рассинхронизация. Контент обновили на основной версии, на мобильной забыли; добавили новую услугу — на поддомене её нет. В итоге поисковик видит два разных сайта разной полноты. Если вы не готовы поддерживать обе версии синхронно, переходите на адаптив.

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

Обязательный минимум

  1. Откройте сайт на своём телефоне и пройдите путь клиента целиком: из поиска на страницу услуги, оттуда к ценам, дальше — отправить заявку. Засеките время.
  2. Попробуйте одной рукой. Если до кнопки заявки нельзя дотянуться большим пальцем, её стоит продублировать внизу.
  3. Проверьте на недорогом устройстве. Флагман скрывает проблемы с производительностью, которые видны на бюджетном телефоне.
  4. Включите режим медленной сети и посмотрите, что появляется в первые три секунды.
  5. Проверьте в двух-трёх браузерах — поведение мобильных браузеров различается сильнее, чем принято думать.
  6. Проверьте с включённой блокировкой рекламы. Иногда блокировщики ломают формы и виджеты.

Что смотреть в аналитике

  • Отказы и глубину просмотра отдельно по мобильным и десктопам — разрыв больше чем в полтора раза говорит о проблеме в мобильной версии.
  • Конверсию в заявку по типам устройств. Если с телефона в три раза хуже, дело почти всегда в форме или в первом экране.
  • Записи визитов в Вебвизоре: там прекрасно видно, как человек промахивается мимо кнопок и ищет цену.
  • Карту кликов на мобильных — часто выясняется, что люди тапают по некликабельным элементам.

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

Частые ошибки, которые я вижу

  1. Контента на мобильной меньше, чем на десктопной. Блоки скрыты вёрсткой, а не свёрнуты.
  2. Горизонтальная прокрутка. Один широкий элемент — таблица, длинный адрес, картинка — и страница ездит вбок.
  3. Шапка на половину экрана. Логотип, слоган, две строки меню — и на первый экран не помещается ничего полезного.
  4. Некликабельный номер телефона. Особенно если он выведен картинкой ради «защиты от парсеров».
  5. Мелкий шрифт. 12–13 px в тексте — читать невозможно, страницу закрывают.
  6. Тяжёлые фотографии в кейсах. Двадцать фото по 3 МБ на странице портфолио.
  7. Попап сразу после загрузки. Человек ещё ничего не увидел, а ему уже предлагают подписаться.
  8. Карта, загружаемая на всех страницах. Ей место только на контактах, и лучше по клику.
  9. Формы без валидации в реальном времени. Человек заполнил, нажал — и получил «ошибка» без объяснения, где именно.
  10. Кнопки в футере вплотную друг к другу. Промах по ссылке — гарантирован.

С чего начать, если переделывать сайт некогда

Типичная ситуация: сайту пять лет, разработчик давно пропал, бюджета на переделку нет, а заявки нужны сейчас. Полная переработка — не единственный путь. Я обычно предлагаю двигаться по очереди, начиная с того, что даёт эффект за день-два работы.

Очередь № 1 — стоит копейки, влияет сразу

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

Очередь № 2 — день-два работы верстальщика

  • Увеличить основной шрифт и межстрочный интервал.
  • Найти и устранить горизонтальную прокрутку — обычно виновата одна таблица или одно изображение.
  • Уменьшить шапку, чтобы первый экран стал информативным.
  • Увеличить кликабельные зоны в меню, пагинации и подвале.
  • Задать размеры изображениям, чтобы вёрстка не прыгала.

Очередь № 3 — требует планирования

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

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

Чек-лист мобильного SEO

  1. Контент мобильной версии полностью совпадает с десктопной.
  2. Title, Description, заголовки и микроразметка одинаковы на обеих версиях.
  3. Нет горизонтальной прокрутки ни на одной странице.
  4. Основной шрифт не меньше 16 px.
  5. Кликабельные элементы не меньше 44×44 px с отступами.
  6. Первый экран отвечает на вопрос «что, где и почём».
  7. Телефон и адрес кликабельны.
  8. Цена или её диапазон видны без долгой прокрутки.
  9. Форма заявки — не больше трёх полей, с правильными типами клавиатуры.
  10. Есть закреплённая кнопка действия внизу экрана.
  11. Попапы не показываются на входе и легко закрываются.
  12. Изображения отдаются в размере под мобильный экран.
  13. Вёрстка не прыгает при загрузке.
  14. Время загрузки первого экрана на мобильных — до 2,5 секунды по полевым данным.
  15. Все разделы доступны из мобильного меню.
  16. Таблицы либо прокручиваются внутри блока, либо перестраиваются в карточки.
  17. Карта подключается только на странице контактов и по клику.
  18. Проверено на реальном недорогом телефоне и в двух браузерах.
  19. Отказы и конверсия по мобильным сопоставимы с десктопными.
  20. Карточка организации на картах заполнена и совпадает с данными на сайте.

Вывод

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

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

Если хотите понять, теряет ли ваш сайт клиентов на мобильных и что чинить в первую очередь, я делаю разбор в рамках SEO-аудита сайта — от 30 000 ₽, аудит посадочной страницы перед рекламой — от 15 000 ₽, экспресс-проверку основных проблем провожу бесплатно. Если параллельно нужен трафик уже сейчас, я же работаю как частный директолог, и цены на услуги открыты на сайте.

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

Что такое мобильное SEO?

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

Можно ли скрывать часть контента на мобильной версии?

Убирать содержимое совсем нельзя: то, чего нет на мобильной версии, для поиска не существует. А вот сворачивать блоки в аккордеон можно — текст остаётся в HTML и доступен роботу. Важно, чтобы он не подгружался скриптом только после клика.

Какого размера должны быть кнопки на мобильном?

Ориентир — не меньше 44×44 пикселей с отступом от соседних кликабельных элементов хотя бы в 8 пикселей. Проверять нужно пальцем на реальном телефоне: в эмуляторе на компьютере курсор попадает точно и проблема не видна.

Сколько полей должно быть в мобильной форме заявки?

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

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

Нет, схема с адресами вида m.site.ru устарела, и её главная проблема — рассинхронизация контента между версиями. Правильное решение — адаптивная вёрстка с одним адресом и одним набором содержимого.

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

Сравните в аналитике отказы, глубину просмотра и конверсию в заявку отдельно по мобильным и десктопам. Разрыв больше чем в полтора раза — повод разбираться. Дальше смотрите записи визитов и карту кликов: там видно, как люди промахиваются мимо кнопок и ищут цену.

Файлы cookie

Сайт использует cookie и сервис «Яндекс Метрика» (включая Вебвизор) для анализа посещаемости. Метрика включится только после нажатия кнопки согласия. Подробнее — в Политике cookie и Политике обработки персональных данных.