Мобильное SEO — это совокупность работ, которые обеспечивают корректную работу вашего сайта на смартфонах и планшетах как для пользователей, так и для поисковых систем. Большая часть интернет-трафика в России приходит с телефонов, а Google при оценке сайта в первую очередь смотрит на его мобильную версию. То есть мобильный опыт — это не «дополнительная функция», а лицо вашего сайта. В этом руководстве вы найдёте базовые принципы мобильного SEO, частые ошибки и способы проверки.
Что такое мобильное SEO?
Мобильное SEO — это технические и содержательные изменения, которые делают страницы корректно отображаемыми на маленьком экране, быстро открывающимися, удобными в использовании и полностью сканируемыми и индексируемыми Google. Хотя это выглядит как отдельная дисциплина по сравнению с SEO для десктопа, цель у них общая: довести нужного человека до нужной страницы с минимальным трением. Отличие в том, что на мобильных устройствах терпение пользователя меньше, экран меньше, а соединение часто медленнее.
Что означает mobile-first индексация?
Mobile-first индексация — это сканирование, индексация и ранжирование Google, которые опираются на мобильную версию сайта. После нескольких лет перехода Google сделал этот подход стандартным для всех сайтов. На практике это значит: контент, ссылки или структурированные данные, которых нет на мобильной странице, могут восприниматься Google как отсутствующие, даже если на десктопе они есть.
- Текст, скрытый или сокращённый на мобильной версии, не заменяется текстом, который показан на десктопе.
- Внутренние ссылки, которых не хватает на мобильной версии, ослабляют сканирование и распределение авторитета.
- Заблокированные ресурсы (CSS, JS, изображения) мешают Google правильно «увидеть» страницу.
Адаптивный дизайн и viewport
Для мобильной версии есть три варианта: адаптивный (responsive) дизайн, динамическая отдача и отдельный мобильный сайт (поддомен m.). Рекомендуемый Google и самый простой в поддержке вариант — адаптивный дизайн: один адрес, один HTML, CSS, который подстраивается под ширину экрана.
| Способ | Преимущество | Недостаток |
|---|---|---|
| Адаптивный дизайн | Один URL, простое сопровождение, равенство контента обеспечивается естественно | Требует усилий на дизайн и тестирование |
| Динамическая отдача | Можно отдавать HTML, предназначенный для устройства | Сложно; при ошибке в настройке контент начинает различаться |
| Отдельный мобильный сайт (m.) | Интерфейс специально для мобильных устройств | Два сайта в управлении, риск ошибок в редиректах и canonical |
Основа адаптивного дизайна — тег viewport в разделе <head> страницы:
<meta name="viewport" content="width=device-width, initial-scale=1">
Без этого тега мобильный браузер отрисовывает страницу в ширину десктопа и уменьшает её; текст становится нечитаемым.
Кроме того, вместо задания ширины страницы фиксированными пикселями (например, 1200px) используйте проценты, max-width
и медиазапросы (media query) в CSS.
Равенство контента на десктопе и мобильной версии
Самая частая ошибка при mobile-first индексации — «упрощение» контента в мобильной версии. Описания, которые удаляют, чтобы освободить место в меню, скрытые таблицы, комментарии, не загружаемые на мобильных, могут мгновенно выпасть из индекса. Что нужно проверить:
- Основной текст: заголовки и абзацы должны совпадать в обеих версиях. Текст внутри аккордеона или вкладки — не проблема; а полное удаление — проблема.
- Заголовок, meta description и canonical: в обеих версиях должны быть одинаковые значения.
- Структурированные данные (schema): разметка, которая есть на десктопе, но отсутствует на мобильной версии, теряется.
- Изображения и видео: должны быть доступны и на мобильных устройствах, сохранять alt-текст.
- Внутренние ссылки: даже если меню упрощено, ссылки на важные страницы должны присутствовать и на мобильной версии; подробнее — в нашей статье о методах увеличения органического трафика.
Области касания и читаемость
Палец значительно менее точен, чем курсор мыши. Поэтому кнопки, ссылки и поля форм должны быть достаточно большими и расположены на достаточном расстоянии друг от друга. Общепринятые ориентиры:
- Размер области касания: не менее примерно 48×48 CSS-пикселей (диапазон, на который указывают рекомендации Google и требования доступности).
- Расстояние между целями: между двумя соседними ссылками не менее 8 пикселей, чтобы палец не попадал на чужой элемент.
- Размер шрифта: основной текст не менее 16 пикселей; пользователь, которому приходится увеличивать мелкий текст, покидает страницу.
- Длина и интервал строк: на узком экране — короткие строки и комфортный межстрочный интервал.
- Всплывающие окна: окна, занимающие значительную часть экрана и трудно закрываемые, не только раздражают пользователя, но и могут попасть под оценку Google как «навязчивая межстраничная реклама».
Простой тест: возьмите телефон в одну руку, найдите на своём сайте товар и добавьте его в корзину. Каждое место, до которого не дотягивается большой палец, которое вы нажимаете по ошибке или которое нужно увеличивать, — это проблема мобильного SEO, которую нужно исправить.
Скорость на мобильных устройствах
На мобильных устройствах процессор и соединение часто слабее, чем на десктопе, поэтому одна и та же страница загружается медленнее. Показатели пользовательского опыта Google — LCP, INP и CLS — также оцениваются по мобильным данным. Подробные пороговые значения см. в нашей статье о Core Web Vitals. Наиболее эффективные улучшения для мобильной версии:
- Переводите изображения в WebP/AVIF и отдавайте их размером, подходящим для ширины устройства (
srcset). - Загружайте изображения и iframe ниже экрана с отложенной загрузкой (lazy loading).
- Удаляйте неиспользуемый JavaScript и CSS; ограничивайте сторонние скрипты.
- Сокращайте время ответа сервера с помощью кэширования и CDN.
- Уменьшайте количество шрифтов и используйте
font-display: swap. - Задавайте фиксированные размеры для изображений и рекламных блоков, чтобы страница не «прыгала» при загрузке.
Навигация и дизайн меню на мобильных
На десктопе широкое меню работает хорошо; на телефоне нужны такие решения, как гамбургер-меню, нижняя панель или раскрывающиеся категории. Хорошее мобильное меню обладает следующими свойствами: самые важные три–пять разделов доступны в одно касание, видна строка поиска, кнопка «назад» работает ожидаемо, а при открытом меню страница не прокручивается под ним. Упрощая меню, не удаляйте важные внутренние ссылки полностью: поскольку Google опирается на мобильную версию, отсутствующие на ней ссылки могут повлиять на распределение авторитета страницы.
Формы и процесс оплаты на мобильных
Мобильный посетитель гораздо охотнее бросает заполнение формы или оформление заказа, чем пользователь десктопа. Уменьшайте число полей, открывайте нужный тип клавиатуры (для телефона — цифровую, для email — клавиатуру с @), поддерживайте автозаполнение и показывайте сообщения об ошибках рядом с полем. На этапе оплаты способы в одно касание, например Apple Pay или Google Pay, могут заметно повысить конверсию. Эти улучшения не являются прямым фактором ранжирования, но это самый короткий путь от органического трафика к реальному клиенту.
Частые ошибки, портящие мобильный опыт
| Ошибка | Последствие | Решение |
|---|---|---|
| Нет тега viewport | Страница уменьшается, текст нечитаем | Добавьте мета-тег viewport |
| Горизонтальная прокрутка | Выходящие за экран изображение или таблица утомляют пользователя | max-width: 100%, контейнер с прокруткой для таблиц |
| Заблокированные CSS/JS | Google не может корректно отрисовать страницу | Не блокируйте ресурсы в robots.txt |
| Flash / устаревшие плагины | На мобильных не работают вообще | Используйте альтернативу на HTML5 |
| Неверный редирект | Мобильный пользователь попадает на нерелевантную страницу | Перенаправляйте на мобильный URL, соответствующий той же странице десктопа |
| Маленькие области касания | Ошибочные клики, уход со страницы | Цели размером около 48 пикселей |
Опирайтесь на реальные данные: лабораторный тест моделирует одно устройство и одни сетевые условия. А ваши пользователи заходят с очень разных телефонов и соединений. Отчёт «Основные показатели веб-страниц» в Search Console отдельно показывает этот реальный пользовательский опыт для мобильных и десктопных устройств; при определении приоритетов доверяйте этим данным больше, чем лабораторной оценке.
Доля мобильного трафика зависит от отрасли: в сферах еды, местных услуг и покупок большинство посетителей приходит с телефона, тогда как у B2B-сайтов и софта доля десктопа может быть выше. Посмотрите свою долю в Google Analytics в отчёте по категориям устройств и соразмерно ей расставьте приоритеты работ. Но помните: для ранжирования Google использует вашу мобильную версию, даже если большинство посетителей приходит с десктопа.
Инструменты тестирования и контрольный список
Для измерения мобильного состояния сайта есть бесплатные и надёжные инструменты:
- PageSpeed Insights: показывает отдельные результаты Core Web Vitals для мобильных и десктопных устройств и рекомендации по улучшению.
- Search Console → Проверка URL: показывает, как Googlebot для мобильных устройств видит страницу. Инструкции по настройке — в нашем руководстве по началу работы с Search Console.
- Режим устройства в Chrome DevTools: имитирует разные размеры экрана и медленное соединение.
- Тест на реальном устройстве: ручная проверка на нескольких телефонах и браузерах не заменяется никакими симуляциями.
Краткий контрольный список:
- Есть ли мета-тег viewport?
- Совпадают ли на мобильной версии основной контент, заголовки и структурированные данные с десктопом?
- Достаточно ли велики области касания и читаем ли текст?
- Проходит ли страница пороговые значения Core Web Vitals на мобильных?
- Не блокируют ли robots.txt CSS, JS и изображения?
- Не перекрывают ли всплывающие окна и реклама контент?
Если мобильный трафик заметно быстро уходит с какой-либо страницы, причину можно разобрать по шагам из нашего руководства по снижению показателя отказов.
И последнее напоминание: улучшения мобильной версии — не разовый проект. Новый плагин, рекламный скрипт или обновление дизайна могут испортить мобильный опыт за одну ночь. После крупных изменений привыкайте заново проверять несколько репрезентативных страниц.
Заключение
Мобильное SEO — необходимое условие в мире, где Google оценивает ваш сайт по мобильной версии. Начните с адаптивного дизайна, сохраняйте равенство контента, подбирайте размеры областей касания и шрифта по пальцу, измеряйте скорость по мобильным данным. Затем регулярно проверяйте сайт в Search Console и PageSpeed Insights. Безупречный мобильный опыт не гарантирует вам определённую позицию в выдаче, но он устраняет барьеры, из-за которых пользователи уходят, и открывает путь для того, чтобы ваш контент показал ту эффективность, которой заслуживает.