Телефон давно стал основным устройством для поиска, и поисковики перестроились под это. Google оценивает сайты по их мобильной версии, а Яндекс учитывает удобство сайта на телефоне при ранжировании в мобильной выдаче. Если на смартфоне сайт неудобен или показывает урезанное содержимое, это отражается на позициях по всем запросам, а не только на мобильном трафике.
В уроке — что означает mobile-first индексация, как выбрать технический способ сделать мобильную версию, какие расхождения между версиями приводят к потерям и как всё это проверить.
Что такое mobile-first индексация
Mobile-first индексация означает, что Google сканирует, индексирует и ранжирует страницы, ориентируясь на то, как они выглядят для мобильного робота. Десктопная версия при этом не исчезает из выдачи, но её содержимое уже не является основным источником информации о странице.
Практический вывод из этого очень конкретный. Если какой-то текст, блок ссылок, отзывы или характеристики товара показываются только на компьютере, а на телефоне скрыты, удалены «для компактности» или вынесены на отдельную страницу, Google их не учтёт. Когда-то мобильные версии делали облегчёнными, оставляя на них минимум информации, — сегодня такая экономия напрямую стоит позиций.
Яндекс не объявлял о полном переходе на подобную схему, но давно учитывает, насколько сайт удобен на мобильных устройствах, и может понижать неудобные сайты в мобильной выдаче. Кроме того, поведение пользователей с телефонов — сколько из них уходит сразу, сколько возвращается в поиск — влияет на оценку сайта в целом.
Три способа сделать мобильную версию
| Способ | Как устроен | Плюсы и минусы для SEO |
|---|---|---|
| Адаптивная вёрстка | Один адрес и один HTML, оформление подстраивается под ширину экрана средствами CSS | Рекомендуемый вариант: нет дублей, нет риска расхождения содержимого, проще поддерживать |
| Динамическая выдача | Один адрес, но сервер отдаёт разный HTML в зависимости от устройства | Нужен заголовок Vary: User-Agent; велик риск, что версии разойдутся по содержимому |
| Отдельный мобильный сайт | Мобильная версия на поддомене вроде m.example.ru | Нужна двусторонняя связка версий, удвоенная поддержка, риск ошибок в редиректах и дублей |
Если вы выбираете способ для нового сайта или редизайна, выбирайте адаптивную вёрстку. Отдельные мобильные поддомены остались в основном на старых проектах, и при переделке их обычно переводят на адаптив, — это фактически переезд, к которому стоит готовиться так, как описано в уроке «Переезд сайта и смена CMS без потери трафика».
Для адаптивной вёрстки обязательна строка в разделе head, которая сообщает браузеру, что страницу нужно отображать по ширине устройства:
<meta name="viewport" content="width=device-width, initial-scale=1">Без неё телефон покажет уменьшенную копию десктопной страницы, и сайт будет считаться неадаптированным.
Если отдельная мобильная версия уже есть
Пока сайт с отдельной мобильной версией не переведён на адаптив, важно правильно связать версии между собой, иначе поисковики будут считать их разными сайтами с дублирующимся содержимым. На каждой десктопной странице размещают ссылку на соответствующую мобильную с атрибутом rel="alternate" и указанием ширины экрана, а на мобильной странице — canonical на десктопную. Посетителей с телефонов перенаправляют на мобильную страницу с тем же содержимым, а не на главную мобильной версии. Каждой десктопной странице должна соответствовать своя мобильная: если у части разделов мобильного аналога нет, лучше показывать на телефоне десктопную страницу, чем отправлять человека в никуда.
Отдельный мобильный сайт требует двойной работы при каждом изменении: новые страницы, метатеги, тексты и разметку нужно добавлять в обе версии. Именно на этом чаще всего и возникают расхождения, из-за которых мобильная версия постепенно отстаёт от основной.
Что должно совпадать на мобильной и десктопной версиях
При любом способе реализации ключевые элементы страницы должны быть одинаковыми для обоих устройств.
- Основное содержимое: тексты, характеристики, описания, отзывы, ответы на частые вопросы.
- Ссылки: меню, хлебные крошки, блоки похожих товаров и материалов. Если мобильное меню урезано, часть разделов теряет внутренние ссылки.
- Метатеги: title, description, метатег robots. Случайный noindex только на мобильной версии способен выключить страницу из индекса Google.
- Микроразметка — с теми же данными и на тех же страницах.
- Изображения и видео — в достаточном качестве, с теми же текстами alt и с доступными для робота адресами.
Скрытое содержимое
Сворачивание текста в аккордеоны и вкладки на телефоне — нормальная практика, если это содержимое присутствует в HTML страницы: поисковик его видит и учитывает. Другое дело — содержимое, которое подгружается с сервера только после нажатия пользователя. Робот не нажимает на кнопки, поэтому такой текст для него невидим. Всё важное должно быть в коде страницы сразу.
Удобство на телефоне
Мобильная версия может быть технически правильной, но неудобной — и тогда она теряет посетителей и поведенческие сигналы. Самые частые проблемы:
- Навязчивые всплывающие окна. Окно подписки или скидки, которое закрывает весь экран сразу после перехода из поиска, — один из самых раздражающих сценариев. Google прямо относит такие окна к плохому опыту на мобильных. Допустимы уведомления о cookie и проверка возраста, где она обязательна, а рекламные окна лучше показывать позже и не на весь экран.
- Мелкий шрифт и узкие поля, из-за которых текст приходится увеличивать пальцами.
- Близко расположенные кнопки и ссылки, по которым трудно попасть.
- Горизонтальная прокрутка из-за широких таблиц и изображений.
- Неудобные формы: мелкие поля, неподходящая клавиатура для телефона и e-mail, отсутствие автозаполнения.
- Тяжёлые страницы, которые на мобильном интернете грузятся слишком долго. Скорости посвящён урок «Скорость загрузки и Core Web Vitals».
Совет. Раз в месяц пройдите на телефоне путь клиента от поисковой выдачи до заявки или покупки: найдите нужную страницу, воспользуйтесь фильтром, заполните форму. Многие проблемы, незаметные в отчётах, видны с первой попытки.
Мобильная выдача и поведение посетителей
Мобильная выдача заметно отличается от десктопной. Экран меньше, поэтому первые позиции получают непропорционально большую долю кликов, а рекламные блоки, карты, товарные карусели и ответы поисковика занимают значительную часть первого экрана. Для многих запросов органический результат на телефоне оказывается ниже первого экрана даже на третьей-четвёртой позиции.
Из этого следует несколько практических выводов. Во-первых, позиции в мобильной и десктопной выдаче нужно отслеживать отдельно: они могут расходиться, особенно в Яндексе. Во-вторых, сниппет на телефоне должен быстро объяснять, почему стоит перейти именно к вам: заголовок обрезается раньше, а длинное описание пользователь может не увидеть целиком. В-третьих, посетитель с телефона менее терпелив: если первый экран не отвечает на его вопрос, он вернётся в выдачу, и этот сигнал поисковик тоже учтёт.
Полезно сравнить в системе аналитики поведение мобильных и десктопных посетителей из поиска: долю отказов, глубину просмотра, конверсию. Если на телефоне показатели заметно хуже при одинаковых страницах и запросах, проблема почти наверняка в удобстве мобильной версии, а не в содержимом. Начинать стоит с самых посещаемых посадочных страниц: улучшение одной популярной категории или статьи даст больше, чем правки десятков редко открываемых страниц.
Как проверить мобильную версию
Отдельного отчёта об удобстве мобильных страниц в Search Console больше нет — Google убрал его вместе со старым инструментом проверки оптимизации для мобильных. Зато остались другие способы.
- Инструмент проверки URL в Search Console показывает, как страницу увидел мобильный робот Google: отрисованный HTML и снимок экрана.
- Lighthouse и PageSpeed Insights проверяют страницу в мобильной эмуляции, сообщают о размерах элементов, шрифтов и о проблемах со скоростью.
- Яндекс Вебмастер позволяет проверить, оптимизирована ли страница для мобильных устройств.
- Режим разработчика в браузере с эмуляцией разных экранов — для быстрой проверки вёрстки.
- Реальные устройства — недорогой смартфон с небольшим экраном покажет больше проблем, чем флагман.
Отдельно сравните мобильную и десктопную версии ключевых страниц краулером в режиме мобильного робота: количество ссылок, длину текста, метатеги. Расхождения в этих цифрах — первый признак того, что мобильная версия теряет содержимое.
Проверку стоит повторять после каждого редизайна и крупного обновления шаблонов. Именно тогда чаще всего пропадают блоки на мобильной версии: дизайнер решает, что на маленьком экране они лишние, и они исчезают вместе с текстом и ссылками, которые поисковик учитывал.
Что сделать после урока
- Проверьте, какой способ мобильной версии используется на сайте, и есть ли метатег viewport на всех шаблонах.
- Сравните мобильную и десктопную версии главной, категории и карточки: тексты, ссылки, метатеги, микроразметку.
- Найдите содержимое, которое подгружается только после нажатия, и перенесите важное в HTML страницы.
- Проверьте всплывающие окна: когда они появляются и сколько экрана закрывают на телефоне.
- Пройдите на смартфоне путь от выдачи до заявки и выпишите всё, что мешает.
- Сравните в аналитике долю отказов и конверсию мобильных и десктопных посетителей из поиска на одних и тех же посадочных страницах.
- Настройте отдельное отслеживание позиций в мобильной выдаче для главных запросов.