Mobile-first индексация: что это и как подготовить сайт

Google и Яндекс смотрят сначала на мобильную версию. Как проверить готовность и что чинить, если есть проблемы.

Mobile‑first индексация: что это и как подготовить сайт

Google и Яндекс в последние годы всё чаще используют мобильную версию сайта как основной источник информации при индексации и ранжировании. Если ваш ресурс не оптимизирован под мобильные устройства, вы рискуете потерять видимость в поиске. Ниже – подробный план проверки готовности и конкретные шаги по исправлению проблем.

Что такое mobile‑first индексация

Как работает алгоритм

Google: начиная с 2018 года, Google использует «mobile‑first» индексацию. Это значит, что при обходе страниц сначала загружается мобильная версия (или адаптивный шаблон), а затем – десктопная. Если мобильная версия содержит ошибки, они влияют на весь сайт.
Яндекс: в 2020 году Яндекс объявил о переходе на mobile‑first индексацию. Сайт, который не корректно отображается на мобильных устройствах, получает более низкий рейтинг.

Почему это важно

Большинство пользователей заходят в интернет с мобильных устройств (≈ 60 % трафика).
Ошибки на мобильной версии могут привести к потере позиций, снижению CTR и ухудшению пользовательского опыта.

Как проверить готовность сайта к mobile‑first индексации

1. Инструменты проверки

Инструмент	Что проверяет	Как использовать
Google Search Console – Mobile Usability	Ошибки отображения, кликабельность, размер элементов	В разделе «Проблемы мобильной версии»
Яндекс.Вебмастер – Мобильная версия	Размеры элементов, скролл, видимость	В разделе «Мобильная версия»
Lighthouse (Chrome DevTools)	Производительность, доступность, SEO	Вкладка «Lighthouse» → «Mobile»
PageSpeed Insights	Скорость загрузки, критический путь	Введите URL и выберите «Mobile»

2. Ключевые метрики, которые нужно проверить

Метрика	Что означает	Целевое значение
Размер кликабельных элементов	Минимальный размер кнопок 44 px	≥ 44 px
Отступы между элементами	Минимальный отступ 8 px	≥ 8 px
Наличие viewport‑мета‑тега	Указывает ширину экрана	`<meta name="viewport" content="width=device-width, initial-scale=1">`
Скорость загрузки	Время до первого байта (TTFB)	< 300 мс
Критический путь	Минимум 3–4 запросов	≤ 4
Показатель отказов	Высокий показатель отказов на мобильных	< 50 %

3. Проверка вручную

Откройте сайт в браузере на мобильном устройстве (или в режиме эмулятора).
Проверьте, что все ссылки работают, а контент читается без горизонтальной прокрутки.
Убедитесь, что меню открывается и закрывается без ошибок.

Частые проблемы и как их исправить

1. Отсутствие viewport‑мета‑тега

Проблема: страница масштабируется до ширины экрана, элементы растягиваются.
Решение: добавить в <head>

<meta name="viewport" content="width=device-width, initial-scale=1">

2. Кнопки и ссылки слишком маленькие

Проблема: пользователь не может нажать на элемент.
Решение:
- Увеличьте размер кнопок до 44 px.
- Добавьте отступы между элементами (≥ 8 px).
- Используйте CSS‑правило touch-action: manipulation; для улучшения отклика.

3. Перенос текста за пределы экрана

Проблема: горизонтальная прокрутка.
Решение:
- Убедитесь, что все изображения и таблицы имеют max-width: 100%; height: auto;.
- Проверьте, что нет фиксированных ширин в пикселях, которые превышают ширину экрана.

4. Медленная загрузка

Проблема: высокий показатель TTFB, медленный критический путь.
Решение:
- Сжать изображения (WebP, AVIF).
- Использовать lazy‑loading для изображений и видео.
- Минифицировать CSS и JavaScript.
- Включить HTTP/2 или HTTP/3.

5. Неправильная работа JavaScript

Проблема: скрипты блокируют рендеринг, элементы не появляются.
Решение:
- Перенесите критические скрипты в конец документа.
- Используйте атрибут async или defer.
- Убедитесь, что скрипты не конфликтуют с мобильными событиями (touchstart, click).

6. Ошибки в мобильной версии в Google Search Console

Проблема: «Кнопки слишком близко» или «Текст слишком мелкий».
Решение:
- Пересмотрите CSS‑стили, которые применяются только на мобильных (@media (max-width: 767px)).
- Проверьте, что все элементы находятся в пределах видимой области.

Как подготовить сайт к mobile‑first индексации

1. Выбор подхода к адаптивности

Подход	Плюсы	Минусы
Адаптивный дизайн	Один код, один URL	Может быть сложнее оптимизировать под разные устройства
Мобильный сайт (PWA)	Быстрая загрузка, офлайн	Требует отдельной версии
Мобильный и десктопный сайты (двойной URL)	Оптимизация под каждую аудиторию	Дублирование контента, риск каннибализации

Для большинства сайтов рекомендуется адаптивный дизайн, так как он проще в обслуживании и не создает дублирования контента.

2. План действий

Шаг	Что делать	Инструмент
1	Создать резервную копию сайта	FTP/SSH
2	Проверить текущую мобильную версию	Lighthouse, Search Console
3	Исправить критические ошибки (viewport, размеры)	CSS/HTML
4	Оптимизировать изображения	ImageOptim, TinyPNG
5	Минифицировать и объединить скрипты	Webpack, Gulp
6	Настроить lazy‑loading	`loading="lazy"`
7	Проверить скорость в PageSpeed Insights	PageSpeed
8	Перепроверить в Search Console	Mobile Usability
9	Настроить 301‑перенаправления, если меняется структура	.htaccess, Nginx
10	Запустить мониторинг	Мониторинг трафика, позиции

3. Тестирование после изменений

Сравните показатели: скорость, мобильные ошибки, позиции в SERP.
Проверьте пользовательский опыт: откройте сайт на разных устройствах (iOS, Android, планшет).
Проверьте индексацию: в Search Console посмотрите, сколько страниц проиндексировано после изменений.

Что делать дальше

Проведите аудит
- Запустите Lighthouse и Search Console, соберите список ошибок.
- Составьте чек‑лист по исправлению.
Оптимизируйте контент
- Сжмите изображения, используйте современные форматы.
- Минифицируйте CSS/JS, применяйте lazy‑loading.
Проверьте мобильную версию
- Убедитесь, что все элементы кликабельны, размеры соответствуют требованиям.
- Проверьте, что нет горизонтальной прокрутки.
Отслеживайте результаты
- Через 2–4 недели проверьте позиции в SERP и показатели отказов.
- При необходимости скорректируйте стратегию.

Следуя этим шагам, вы обеспечите корректную mobile‑first индексацию и улучшите видимость вашего сайта в поиске.