Mobile-first индексация: мобильный контент, viewport и удобство для касаний
1. Что именно меняет mobile-first индексация
В 2019 году Google начал тестировать mobile-first индексацию, а с июля 2024 года она стала обязательной для всех сайтов. Меняется не алгоритм ранжирования, а то, как Google смотрит на ваш сайт.
| Раньше (приоритет десктопа) | Теперь (приоритет мобильных) | Что это значит для B2B-сайтов |
|---|---|---|
| Для индексации сканируется десктопная версия страницы | Для индексации сканируется мобильная версия страницы | Если мобильная версия прячет таблицу с десктопа, она не индексируется |
| Мобильная версия — только оптимизация опыта | Мобильная версия — единственный источник индексации | Schema, отрисованная только на десктопе, равносильна её отсутствию |
| Отдельный поддомен m.example.com допустим | Отдельный мобильный поддомен дорог в поддержке | Рекомендуем перейти на единый адаптивный шаблон и отказаться от поддомена m. |
| Передача веса внешних ссылок на десктопе | Внешние ссылки оцениваются так же по мобильной версии | Медленная мобильная версия влияет и на ранжирование |
Проверить, переключились ли вы уже: на главной странице Search Console появится надпись «Сайт проиндексирован с приоритетом мобильной версии». Если её ещё нет, значит Google пока сканирует вас по старым правилам, но переключение — вопрос времени, не ждите.
2. Четыре обязательные проверки: viewport, контент, касания, Schema
Проверку соответствия mobile-first индексации можно разложить на четыре пункта, и у каждого есть чёткий стандарт.
| Что проверить | Критерий нормы | Частая ошибка | Инструмент проверки |
|---|---|---|---|
| viewport | <meta name=”viewport” content=”width=device-width, initial-scale=1″> | Жёстко задан width=1200 или отсутствует viewport | Тест на удобство для мобильных устройств |
| Единообразие контента | Видимый контент на десктопе и мобильных полностью совпадает | На мобильных таблицы и характеристики скрыты через display:none | Сравнение исходного кода по URL мобильной версии |
| Удобство для касаний | Зона нажатия ≥ 48×48 CSS-пикселей, отступ ≥ 8px | Кнопки 24px, ссылки слиплись | Эмуляция мобильных устройств в Chrome DevTools |
| Структурированные данные | Исходный код мобильной страницы содержит полный JSON-LD | Schema выводится только в десктопном шаблоне | Rich Results Test для URL мобильной версии |
Пример из практики: страница товара на сайте промышленных запчастей. В десктопной версии есть полная таблица характеристик (30 строк), а в мобильной её для «упрощения» скрыли через display:none. После запуска mobile-first индексации 12 длиннохвостых запросов по этой странице выпали из топ-20 — Google в мобильной версии видел только вводный текст и не понимал, какие у товара характеристики. После того как таблицу сделали с горизонтальной прокруткой на мобильных, 8 запросов вернулись в топ-10 за две недели.
Единообразие контента — это не про одинаковую вёрстку на десктопе и мобильных, а про то, что текст, таблицы, изображения и Schema должны присутствовать везде. Вёрстку можно сворачивать, но нельзя удалять.
3. Адаптивная вёрстка, динамический serving и поддомен m.
Google официально поддерживает три подхода к мобильной версии, но рекомендует их в разной степени.
| Подход | Реализация | Стоимость поддержки | Рекомендация |
|---|---|---|---|
| Адаптивный веб-дизайн | Тот же HTML, адаптация через CSS media queries | Низкая | Оптимальный вариант |
| Динамический serving | Тот же URL, разный HTML в зависимости от UA | Средний | Можно |
| Отдельный поддомен m. | Отдельный набор шаблонов на m.example.com | Высокий | Не рекомендуется, лишний балласт |
| Без мобильной версии | Десктопная версия в масштабе | Нет | Запрещено, неудобно на мобильных |
Контринтуитивный момент: отдельный поддомен m. выглядит «управляемым», но на деле приходится поддерживать два набора шаблонов, две схемы Schema и два набора hreflang — и как только они расходятся, возникает несоответствие контента. Сам переход на адаптивную вёрстку — это переезд сайта, нужна карта 301-редиректов. На мультиязычных сайтах дополнительно проверяйте,Перенос Hreflang для мультиязычности не ломает ли мобильный шаблон hreflang.
4. Изображения, шрифты и производительность на мобильных
Mobile-first индексация — это не только «чтобы было видно»: Google оценивает и данные мобильной версии.Core Web Vitals.
| Статья | Обычная практика на десктопе | Что нужно менять на мобильных |
|---|---|---|
| Изображение | Одно большое изображение | srcset + sizes, адаптация под DPR и ширину |
| Шрифты | Загружаются все 3 начертания | Только 2 начертания, font-display: swap |
| Навигационный | Горизонтальное меню сверху | Гамбургер-меню, чтобы ничего не вылезало на мобильных |
| Формы | Все поля развёрнуты | type под число и email, чтобы не открывалась полная клавиатура |
| Реклама и всплывающие окна | Боковая колонка | На мобильных нельзя перекрывать контент интерстишл-попапом |
Пример из практики 2: на мобильной версии блога B2B-компании LCP долго держался на 4,5 секунды, потому что в hero стояла десктопная картинка шириной 2400px. После добавления srcset с размерами 640px и 1080px мобильный LCP упал до 2,1 секунды, а десктоп не пострадал. В этом изменении к тегу img добавили всего два атрибута, дизайн не трогали.
Мобильные попапы — отдельная мишень Google: если мобильная страница перекрывает основной контент интерстишл-попапом, её помечают как «неудобную на мобильных». Популярный на B2B-сайтах попап подписки на рассылку на мобильных нужно заменить нижней полосой или убрать совсем.
5. Чек-лист самопроверки и порядок проверки
| Что проверить | Инструмент | Критерий прохождения | Частота |
|---|---|---|---|
| Тест на удобство для мобильных | Тест Google на удобство для мобильных устройств | Всё пройдено, нет предупреждений о мелком шрифте и близких зонах нажатия | Запускать один раз после редизайна |
| Единообразие контента | Эмуляция мобильных в Chrome + просмотр исходного кода | Видимый текст на десктопе и мобильных полностью совпадает | Раз в квартал проверять 10 страниц |
| Рендеринг Schema на мобильных | Rich Results Test для URL мобильной версии | Распознаны все типы Schema | После смены шаблона |
| Данные CrUX по мобильным | Отчёт об опыте в Search Console | Все три метрики CWV для мобильных в норме | Ежемесячно |
| Статус мобильного индексирования | Главная Search Console | Показано «Индексируется в первую очередь мобильная версия» | Ежемесячно |
Доработка мобильного опыта и Доступность сайта (WCAG) во многом пересекаются: размер зон нажатия, контрастность, навигация с клавиатуры — сделайте один раз, и выиграют обе версии.
VI. Как менять подачу контента после перехода на мобильный приоритет
Мобильный приоритет — это не только техническая переделка, но и другой подход к тексту. На десктопе можно ставить длинные таблицы, многоколоночные параметры и большие абзацы рассуждений, а на мобильном посетитель держит телефон одной рукой, и ритм чтения совсем иной. Структуру контента нужно перестроить под одну колонку и вертикальный экран.
| Элемент контента | Как обычно на десктопе | Как лучше на мобильном |
|---|---|---|
| Длинные таблицы | Широкие таблицы от 8 колонок | Разбить на карточки или горизонтальную прокрутку, ключевые колонки — вперёд |
| Длина абзаца | Абзац от 200 знаков | Не больше 3–4 строк на абзац, короткие фразы и частые переносы |
| Анкор внутренней ссылки | Ссылка целым предложением | Текст ссылки — отдельной строкой, чтобы удобно нажать пальцем |
| Графики | Плотные графики с данными | Для мобильных — отдельная упрощённая версия с текстовым выводом |
| Кнопка CTA | Маленькая кнопка в верхнем меню | Крупная кнопка в середине статьи и ещё одна внизу |
Сначала пишите черновик в одну колонку под мобильный, а потом адаптируйте под десктоп. Тогда текст читается и там, и там, а не так, что на десктопе вёрстка красивая, а на мобильном всё слиплось. Раз в квартал берите десять опубликованных статей и просматривайте их в режиме эмуляции мобильного в Chrome: если таблица вылезает, кнопка слишком мелкая или ссылка прижата к краю — включайте в следующий цикл доработок.
Формы — самое частое место потери конверсии на мобильных. На десктопе можно разом вывести десяток полей, а на мобильном посетитель вводит текст одной рукой, и каждое лишнее поле отсекает часть людей. Сократите форму заявки до трёх-четырёх обязательных полей: название компании, email, краткое описание задачи, остальное дособерите после сделки. Номер телефона, страну и прочее, что можно вывести из email и домена компании, лучше не заставлять вводить вручную. Каждые пять процентных пунктов роста конверсии мобильной формы — это заметный шаг вперёд по числу заявок.
FAQ: частые вопросы
Когда Google начал принудительно переводить сайты на мобильный приоритет?
Повлияет ли на SEO скрытие контента через display:none на мобильных?
Нужно ли сохранять отдельный поддомен m.example.com?
Какой минимальный размер кликабельной зоны?
Можно выводить Schema только в десктопной версии?
За что штрафуют мобильные интерстициальные попапы?
В заключение
Mobile-first индексация — это не «сделать мобильную версию» и на этом закончить, это единственный способ, которым Google читает ваш сайт. Десктопная версия может быть сколь угодно полной, но если её не видно на мобильном — её не существует.
Три шага к результату: на этой неделе выборочно проверьте 10 ключевых страниц в режиме мобильной эмуляции Chrome DevTools и убедитесь, что контент на десктопе и мобильном совпадает; на следующей неделе устраните три критичных недочёта — viewport, кликабельные зоны и рендеринг Schema на мобильном; на третьей неделе подтвердите в Search Console, что тест на мобильную дружелюбность пройден, а мобильные данные CrUX в норме.
Запомните одну фразу: mobile-first индексация — это не про то, чтобы сделать уменьшенную версию десктопного сайта, а про то, чтобы признать — Google видит именно ту версию, которую посетитель видит на телефоне.