Вместо отдельного мобильного сайта используется одна вёрстка, которая перестраивает сетку, шрифты и картинки под ширину устройства. Меню сворачивается в бургер, колонки складываются в одну — пользователю удобно и на телефоне, и на десктопе, а адрес страницы остаётся один.
Для SEO это почти обязательное условие: Google индексирует сайты по мобильной версии (mobile-first), и кривая вёрстка на телефоне бьёт по позициям напрямую. Один URL вместо пары «основной + m.» упрощает индексацию и не размывает ссылочный вес между версиями.
Одна вёрстка подстраивается под смартфон, планшет и десктоп.
Медиазапросы меняют сетку по контрольным точкам 480 и 1024 px.
Больше половины трафика идёт со смартфонов, иначе уйдут к конкуренту.
Одна вёрстка на CSS-сетке: на мониторе 1920px меню в строку и три колонки товаров, на телефоне 360px — бургер-меню и один товар в ряд. Это критично, ведь Google индексирует мобильную версию в первую очередь.
Адаптивность для поиска — это Core Web Vitals на мобильном железе. Главные грабли: картинки, которые на телефоне грузятся в десктопном весе, и баннеры, прыгающие при подгрузке, — они роняют LCP и CLS, а это уже сигналы page experience у Google. Десктопный браузер с узким окном для этого не годится — проверяйте в PageSpeed Insights и Метрике с разбивкой по устройствам: там видно, что реальный смартфон в 4G отрисовывает первый экран втрое медленнее, чем ваш монитор.
Частая ошибка — прятать на мобильной версии текст, фильтры или товары «чтобы было чище». При mobile-first Google индексирует именно мобильный DOM: что скрыто в скрытом блоке или вырезано из вёрстки телефона, для ранжирования может не существовать. Контент должен совпадать между десктопом и мобайлом — скрывать допустимо аккордеоном, но не выкидывать из разметки. Заодно держите кликабельные зоны не меньше 44px и текст от 16px, иначе юзабилити-проверка Google отметит «слишком близкие элементы».
Поисковые системы оценивают сайт по мобильной версии, поэтому расхождение между экранами обходится дорого. Если на телефоне спрятаны блоки текста, таблицы или часть ссылок, поиск видит именно усечённый вариант. Правило простое: содержимое совпадает на всех ширинах, а различается только раскладка.
Проверяют вёрстку на трёх-четырёх ключевых ширинах: узкий телефон около 360 пикселей, крупный телефон, планшет и десктоп. Отдельно смотрят на переполнение по горизонтали: длинные таблицы, код и ссылки растягивают страницу и заставляют её ездить вбок. Лечится это прокруткой внутри блока и запретом на минимальную ширину у элементов сетки.
Частые вопросы
Чем адаптивная вёрстка отличается от отдельного мобильного сайта?
Адаптивная работает на одном адресе и одном наборе страниц, отдельный мобильный сайт живёт на своём поддомене и требует двойной поддержки, согласования содержимого и настройки соответствий между версиями. Сегодня отдельные мобильные сайты почти не делают.
Можно ли прятать часть контента на телефоне?
Прятать под раскрывающийся блок можно, удалять из разметки нельзя. Поисковые системы оценивают мобильную версию, и текст, которого там нет, в расчёт не идёт. Скрытое за аккордеоном содержимое учитывается, потому что оно присутствует в коде.
Какие ширины проверять?
Минимум четыре: 360 пикселей для узкого телефона, около 414 для крупного, 768 для планшета и десктоп. На каждой смотрят на переполнение по горизонтали, читаемость и доступность главного действия без прокрутки.
Влияет ли адаптивность на позиции?
Влияет через удобство и скорость на мобильных, а также через полноту содержимого в мобильной версии. Отдельного бонуса за адаптивность нет, зато неудобная мобильная версия ухудшает поведение и метрики скорости сразу.