Мобильная версия сайта и адаптивная вёрстка

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

Поисковые системы давно перестроились под эту реальность. Google индексирует сайты преимущественно в мобильной версии, Яндекс учитывает удобство для мобильных устройств при ранжировании на смартфонах. Если сайт неудобен на телефоне, он проигрывает конкурентам именно там, где сосредоточена основная аудитория.

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

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

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

Практические следствия этого подхода:

• если часть текста, ссылок или изображений скрыта или удалена в мобильной версии, поисковик может их вообще не учесть;
• микроразметка, мета-теги, canonical и hreflang должны присутствовать в мобильной версии так же, как в десктопной;
• скорость загрузки измеряется прежде всего для мобильных устройств и медленных сетей;
• заблокированные для робота ресурсы — CSS и JavaScript — не позволят ему увидеть страницу так, как её видит пользователь.

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

Три подхода к мобильной версии

Существует три основных способа сделать сайт удобным на смартфонах. Каждый имеет свои плюсы и ограничения.

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

Если у вас отдельная мобильная версия

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

1. На десктопной странице разместите тег link с атрибутом rel=alternate и media, указывающий на соответствующую мобильную страницу.
2. На мобильной странице поставьте canonical на десктопную версию.
3. Настройте перенаправление: смартфоны с десктопных адресов ведите на мобильные, и наоборот, компьютеры с мобильных — на десктопные. Используйте постраничные редиректы, а не переброс на главную.
4. Убедитесь, что содержимое мобильной версии эквивалентно десктопной: те же тексты, заголовки, ссылки, микроразметка.
5. Добавьте мобильный поддомен в панели вебмастеров и следите за его индексацией.

При динамическом показе важно отправлять заголовок Vary со значением User-Agent, чтобы промежуточные кэши и поисковые роботы понимали, что содержимое зависит от устройства.

Основы адаптивной вёрстки

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

Мета-тег viewport

Без строки meta name="viewport" с параметром width=device-width мобильный браузер отрисует страницу как десктопную шириной около 980 пикселей и уменьшит её — текст станет нечитаемым. Это первое, что нужно проверить. Не запрещайте масштабирование параметрами user-scalable=no или maximum-scale=1: это ухудшает доступность для людей со слабым зрением.

Гибкая сетка

Блоки задаются не в фиксированных пикселях, а в относительных единицах, и используют гибкие механизмы раскладки — flexbox и grid. Колонки на широком экране перестраиваются в одну на узком.

Медиазапросы

CSS-правила, срабатывающие при определённой ширине экрана, позволяют менять раскладку, размер шрифта, отступы. Современный подход — mobile-first: базовые стили пишутся для смартфонов, а медиазапросы добавляют усложнения для широких экранов.

Гибкие изображения

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

Удобство на смартфоне: на что смотреть

Техническая адаптивность — только начало. Сайт может формально подстраиваться под экран и при этом быть неудобным. Вот критерии, по которым стоит оценивать мобильную версию.

• Размер шрифта. Основной текст — не меньше 16 пикселей. Мелкий шрифт заставляет масштабировать страницу, и человек уходит.
• Размер и расстояние между кнопками. Область нажатия — порядка 48 на 48 пикселей, с отступами, чтобы не промахиваться по соседним ссылкам.
• Отсутствие горизонтальной прокрутки. Широкие таблицы, длинные адреса, фиксированные блоки — частые виновники.
• Навигация. Меню должно открываться одним касанием, поиск — быть заметным, ключевые разделы — доступными в пару нажатий.
• Формы. Минимум полей, правильные типы — для телефона открывается цифровая клавиатура, для email — клавиатура с символом «@».
• Контакты. Кнопка звонка и мессенджеров, которые открываются нажатием.
• Навязчивые элементы. Всплывающие окна на весь экран, особенно сразу после входа с поиска, раздражают и могут снижать позиции.
• Липкие панели. Фиксированная шапка, плашка о cookies, кнопка чата и баннер вместе могут занимать половину маленького экрана.

Таблицы, слайдеры и другие сложные элементы

Некоторые элементы интерфейса плохо переносят маленький экран, и для них нужны отдельные решения.

Таблицы с большим количеством колонок — классическая проблема. Варианты: обернуть таблицу в контейнер с собственной горизонтальной прокруткой, чтобы не ломать страницу; перестроить строки в карточки на узких экранах; скрыть второстепенные колонки, оставив возможность их раскрыть.

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

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

Видео должно масштабироваться по ширине контейнера и не запускаться автоматически со звуком.

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

Проверка складывается из автоматических инструментов и живого тестирования.

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

Типичные ошибки мобильной версии

На аудитах раз за разом встречаются одни и те же проблемы.

1. Урезанный контент. Ради экономии места на мобильных убирают текст, перелинковку, блоки отзывов. При мобильной индексации это означает потерю этого контента для поиска.
2. Заблокированные ресурсы. CSS и скрипты закрыты в robots.txt, и робот видит страницу без оформления, считая её неадаптивной.
3. Отсутствие viewport или запрет масштабирования.
4. Тяжёлые десктопные картинки без адаптивных версий.
5. Перенаправление всех мобильных пользователей на главную мобильной версии вместо соответствующей страницы.
6. Различия в мета-тегах и микроразметке между версиями.
7. Интерстишалы — полноэкранные окна подписки или установки приложения, закрывающие контент.
8. Неработающие на касание элементы — выпадающие меню по наведению мыши, которого на смартфоне нет.

Мобильная версия и поведенческие факторы

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

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

Вывод

Мобильная версия — это уже не дополнение к сайту, а его основная форма для большинства посетителей и для поисковых роботов. Оптимальный выбор для новых и обновляемых проектов — адаптивная вёрстка: один адрес, один HTML, никаких дублей и проблем со связыванием версий.

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