Мобильная версия сайта: адаптив, mobile-first и проверка

Мобильная версия сайта - это то, как сайт выглядит и работает на смартфоне. Сделать её можно двумя путями: адаптивным дизайном (один сайт подстраивается под экран - подходит большинству) или отдельной версией на адресе с «m.» (наследие, риск дублей). Главное для SEO - принцип mobile-first: Яндекс и Google индексируют именно мобильную версию, поэтому на ней должно быть всё то же, что на десктопе. Хорошую мобильную версию отличают тег viewport, крупные тач-зоны (от ~44 px), шрифт от 16 px, отсутствие горизонтальной прокрутки и быстрая загрузка. Проверяют через F12, Яндекс Вебмастер и на реальном телефоне.

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

Мобильная версия сайта - это то, как сайт выглядит и работает на смартфоне: удобная навигация, крупные кнопки и текст, картинки и блоки под узкий экран. Сделать сайт удобным на телефоне можно двумя путями: адаптивным дизайном (один сайт подстраивается под любой экран) или отдельной мобильной версией на своём адресе (обычно с приставкой «m.»).

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

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

Два подхода к мобильному сайту решают одну задачу по-разному:

Параметр	Адаптивный дизайн	Отдельная версия (m.)
Адрес (URL)	один для всех устройств	отдельный, с «m.»
Поддержка	проще: один сайт	сложнее: две версии
SEO-риски	рисков нет	дубли контента, рассинхрон версий
Когда применять	большинству сайтов	особые, высоконагруженные случаи

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

Mobile-first: поиск смотрит на мобильную версию

Самое важное про мобильность в SEO - принцип mobile-first indexing. И Яндекс, и Google в первую очередь смотрят на мобильную версию сайта: именно её они обходят, индексируют и по ней оценивают контент. Десктопная версия вторична.

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

Что делает мобильную версию хорошей

Короткий чек-лист - на что смотреть:

• Тег viewport - страница масштабируется под ширину экрана, а не показывает уменьшенную десктопную копию.
• Крупные тач-зоны - кнопки и ссылки, по которым легко попасть пальцем (ориентир - не меньше примерно 44 пикселей).
• Читаемый шрифт - основной текст от 16 пикселей, чтобы не приходилось увеличивать страницу пальцами.
• Без горизонтальной прокрутки - контент помещается по ширине, ничего не «уезжает» вбок.
• Скорость - на телефоне особенно важны Core Web Vitals: быстрая загрузка и отзывчивость.
• Без назойливых попапов на весь экран, которые перекрывают контент сразу после захода.
• Полный контент - то же, что на десктопе (см. mobile-first выше).

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

• С компьютера, инструменты разработчика: в браузере нажмите F12 и включите режим устройства (эмуляцию телефона) - увидите сайт «глазами смартфона» и сможете выбрать разные размеры экранов.
• Яндекс Вебмастер - проверка мобильных страниц и удобства для мобильных.
• Проверка от Google - тест оптимизации для мобильных (mobile-friendly).
• На реальном телефоне - ничто не заменит: откройте ключевые страницы и пройдите путь клиента до заявки.

Проверять стоит именно ключевые страницы - главную, услуги, карточки, форму заявки, - а не только одну главную.

Частые ошибки

• Урезали контент на мобильной - спрятали текст или блоки; из-за mobile-first это бьёт по позициям.
• Мелкие кнопки и шрифт - по ссылкам не попасть, текст приходится увеличивать.
• Горизонтальная прокрутка - вёрстка шире экрана.
• Тяжёлые картинки - медленная загрузка на мобильном интернете.
• Попап на весь экран сразу после захода - раздражает людей и не нравится поиску.
• Отдельная m.-версия отстала от основной - на десктопе обновили, на мобильной забыли.

Что дальше

Мобильность тесно связана со скоростью - на телефоне она особенно заметна: разбор скорость сайта и Core Web Vitals. Как поиск обходит и индексирует страницы (в том числе по мобильной версии) - в узле индексация и обход. Общая картина техники - в хабе технический SEO, а проверить сайт на практике - в чек-листе технического аудита.

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

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

Это то, как сайт выглядит и работает на смартфоне: удобная навигация, крупные кнопки и текст, вёрстка под узкий экран. Сделать её можно адаптивным дизайном (один сайт подстраивается под экран) или отдельной версией на адресе с приставкой «m.».

Чем мобильная версия отличается от адаптивной?

Отдельная мобильная версия - это второй сайт на своём адресе (m.site.ru) со своим контентом. Адаптивный дизайн - один сайт с одним адресом, который сам подстраивается под размер экрана. Адаптив проще поддерживать и не создаёт дублей, поэтому подходит большинству; отдельная m.-версия - наследие для особых случаев.

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

Нажмите F12 в браузере и включите режим устройства (эмуляцию телефона) - увидите сайт как на смартфоне и сможете выбрать разные экраны. Дополнительно - проверка мобильных страниц в Яндекс Вебмастере и тест mobile-friendly у Google. Надёжнее всего открыть сайт на реальном телефоне.

Что такое mobile-first indexing?

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

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

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