Что такое адаптивная вёрстка сайта

Адаптивная вёрстка — подход, при котором у сайта один адрес и один HTML для всех устройств, а расположение блоков, размер шрифтов и картинок меняется под ширину экрана. На компьютере меню в строку, на телефоне — кнопка «бургер», колонки встают одна под другую.

Как это устроено

Основа — метатег <meta name="viewport" content="width=device-width, initial-scale=1">, который говорит телефону не уменьшать страницу как для компьютера. Дальше CSS с медиазапросами задаёт разные правила оформления для разных ширин экрана.

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

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

Почему это важно для SEO

Большая часть поиска сегодня идёт с телефонов. Google индексирует сайты по их мобильной версии — это принцип mobile-first. Яндекс отмечает в выдаче страницы, удобные для мобильных. Если на телефоне текст мелкий, кнопки слипаются, а таблица уезжает за край экрана, посетитель уходит, и это сказывается на поведенческих факторах.

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

• на телефоне скрыта часть текста или блоков, которые есть на компьютере;
• горизонтальная прокрутка из-за широкой таблицы или картинки;
• слишком мелкие кнопки и ссылки, стоящие вплотную;
• баннеры и всплывающие окна закрывают весь экран;
• элементы прыгают при загрузке — растёт CLS.

Пример

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

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

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

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

Отличаются ли позиции на телефоне и компьютере?

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