Мобильная адаптация: как сделать сайт удобным на телефоне и не терять позиции
Если аудит отметил «Отсутствует meta viewport», «Flash-контент» или «таблицы с фиксированной шириной» — сайт неудобен на телефоне. Больше половины визитов — мобильные, и Google оценивает сайты по их мобильной версии (Mobile-First Index). Как сайт выглядит на смартфоне — так он и ранжируется, даже для тех, кто ищет с компьютера.
- Meta viewport с правильным значением — базовый тег адаптивности
- Адаптивная (резиновая) вёрстка — контент подстраивается под ширину экрана
- Никакого Flash — он не работает на мобильных вообще
- Ничего с фиксированной шириной в пикселях — иначе горизонтальный скролл
- Крупные кнопки и читаемый шрифт — попадать пальцем и читать без зума
Что такое Mobile-First и почему это касается всех
Раньше поисковик оценивал десктопную версию сайта, а мобильную — постольку-поскольку. Сейчас наоборот: Google индексирует и ранжирует в первую очередь мобильную версию страницы. Это и есть Mobile-First Index.
Практический вывод простой: мобильная версия — это не «дополнение для меньшинства», а основная версия сайта в глазах поисковика. Если на телефоне часть контента не видна, тормозит или разъезжается — страдают позиции по всем устройствам. Плюс сам пользователь: с неудобного мобильного сайта человек уходит за секунды, и это ухудшает поведенческие сигналы.
Главный тег: meta viewport
Всё начинается с одной строки в <head> — мета-тега viewport. Он говорит браузеру телефона, что страницу нужно показывать по ширине экрана, а не как уменьшенную копию десктопа. Правильное значение:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width— ширина страницы равна ширине экрана устройства;initial-scale=1— начальный масштаб 100%, без принудительного зума.
Одна и та же страница на телефоне: слева — без viewport (мелко + горизонтальный скролл), справа — адаптивная.
Что происходит без этого тега: телефон показывает страницу так, будто это широкий десктопный экран, ужатый до размеров ладони. Текст становится нечитаемо мелким, приходится растягивать пальцами. Наш аудит помечает отсутствие viewport как критическую ошибку, а некорректное значение (без width=device-width или initial-scale=1) — как серьёзную: масштабирование ломается.
Другие частые препятствия
Одного viewport мало — есть ещё несколько типичных проблем:
- Flash-контент. Технология Flash умерла в 2020 году и не работает ни на одном современном телефоне. Если остались
<object>или<embed>с Flash — их нужно заменить на HTML5/видео. Аудит помечает такой контент отдельно; - Фиксированная ширина в пикселях. Таблицы, блоки или картинки с жёсткой шириной вроде
width: 900pxне влезают в экран — появляется горизонтальный скролл. Аудит ловит таблицы шире 600px; - Мелкие кликабельные элементы. Крошечные ссылки и кнопки вплотную друг к другу — по ним сложно попасть пальцем;
- Всплывающие оверлеи. Агрессивные попапы на весь экран сразу после входа (interstitials) Google не любит и может понижать такие страницы в мобильной выдаче;
- Нечитаемый шрифт. Текст мельче ~16px на телефоне заставляет зумить — это раздражает.
Как сделать сайт адаптивным
Современный стандарт — адаптивная (responsive) вёрстка: один сайт, который сам подстраивается под любую ширину экрана. Основные принципы:
- Резиновые размеры вместо фиксированных. Ширины в процентах и относительных единицах, а не в жёстких пикселях; картинки — с
max-width: 100%; - Media queries. CSS-правила, которые меняют раскладку на узких экранах: колонки складываются в одну, меню сворачивается в «бургер»;
- Готовая адаптивная тема. На WordPress и конструкторах большинство тем уже адаптивны — важно не сломать это вставками с фиксированной шириной;
- Крупные зоны нажатия. Кнопки и ссылки с достаточным размером и отступами;
- Читаемый шрифт. Базовый размер 16px и больше, комфортная высота строки.
Отдельная мобильная версия на поддомене (m.site.by) сегодня почти не используется — адаптивная вёрстка удобнее и для пользователей, и для SEO: это один URL с одним набором сигналов.
Частые ошибки из наших аудитов
- Нет meta viewport — сайт показывается на телефоне как ужатый десктоп, всё мелкое;
- Кастомный блок с фиксированной шириной — тема адаптивная, но вставленная вручную таблица или баннер в пикселях даёт горизонтальный скролл;
- Остатки Flash — старый плеер или баннер, который на мобильных просто пустое место;
- Агрессивный попап — оверлей на весь экран сразу при входе с телефона;
- Мелкий шрифт и кнопки — формально адаптив есть, но пользоваться неудобно.
Как проверить свой сайт
- Откройте на телефоне — самый честный тест: удобно ли читать и нажимать без зума и горизонтального скролла
- Режим устройства в браузере — F12 → иконка телефона (Device Toolbar): страница в размерах разных смартфонов
- Проверка мобильной версии Google — инструмент удобства для мобильных показывает проблемы страницы
- Исходный код — Ctrl+U, поиск
viewport: есть ли тег и правильное ли значение - SEO-аудит — проверяет viewport, Flash, таблицы фиксированной ширины и другие мобильные препятствия
Что дальше
Первым делом проверьте наличие правильного meta viewport и откройте ключевые страницы на реальном телефоне: нет ли мелкого текста, горизонтального скролла и труднодоступных кнопок. Уберите остатки Flash и фиксированную ширину в пикселях, крупные элементы сделайте удобными для пальца. Это не разовая косметика, а основа: в мире Mobile-First именно мобильная версия определяет, как сайт видят и люди, и поисковик.
Хотите узнать, что мешает вашему сайту на мобильных — viewport, Flash, широкие таблицы? Закажите комплексный SEO-аудит: проверим мобильную адаптацию по всем страницам, а заодно метатеги, скорость, разметку и видимость в ИИ-поиске.
Коротко о мобильной адаптации
Нужна ли отдельная мобильная версия сайта (m.site)? +
Влияет ли мобильная адаптация на позиции в десктопной выдаче? +
Нужен ли AMP для мобильных? +
Мой сайт на современной теме — значит, он уже адаптивный? +
Как ваш сайт выглядит на телефоне?
Закажите SEO-аудит — проверим meta viewport, Flash, широкие таблицы и другие мобильные препятствия, из-за которых сайт теряет позиции в Mobile-First. А заодно метатеги, скорость, разметку и видимость в ИИ-ответах.