Mobile-First Indexing: Оптимизация для маленьких экранов

Годами Google рассматривал десктопную версию веб-сайта как "основную", а мобильную версию — как "альтернативную". Эта эпоха закончилась.

С Mobile-First Indexing (Индексация с приоритетом мобильного контента) Google преимущественно использует мобильную версию вашего контента для индексации и ранжирования. Если у вашего сайта отличный контент для десктопа, но урезанная или сломанная мобильная версия, ваши позиции пострадают — даже для пользователей, ищущих с десктопа.

Это руководство объясняет, как обеспечить выживание и процветание вашего сайта в мире, ориентированном на мобильные устройства.

1. Что такое Mobile-First Indexing?

Важно прояснить распространенное заблуждение: Не существует отдельного "Мобильного Индекса". Есть только один Индекс Google.

• Старый способ: Googlebot (Desktop) сканировал ваш сайт. Он решал, где вас ранжировать, основываясь на том, что он видел на большом экране.
• Текущий способ: Googlebot (Smartphone) сканирует ваш сайт. Он решает, где вас ранжировать, основываясь на том, что он видит на мобильном экране.

Следствие: Если вы скрываете контент на мобильных устройствах, чтобы "сэкономить место" (например, удаляя текст или вкладки), Google больше не может эффективно видеть этот контент. Он не будет проиндексирован.

2. Решение: Адаптивный веб-дизайн

Хотя вы можете иметь отдельный мобильный сайт (m.example.com), Google настоятельно рекомендует Адаптивный веб-дизайн (Responsive Web Design).

Адаптивный дизайн означает, что ваш веб-сайт использует один и тот же HTML-код и один и тот же URL для всех устройств, но использует CSS для изменения макета в зависимости от размера экрана.

Жизненно важный тег: Viewport

Чтобы адаптивный дизайн работал, каждая страница на вашем сайте должна содержать следующий мета-тег в разделе <head>:

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

Эта строка говорит браузеру: "Масштабируй этот контент так, чтобы он соответствовал ширине конкретного используемого устройства". Без него мобильные браузеры будут пытаться отобразить десктопную версию и уменьшить ее, заставляя пользователей щипать и увеличивать масштаб (серьезный сбой юзабилити).

3. Правило "Паритета контента"

Чтобы преуспеть в Mobile-First Indexing, вы должны обеспечить Паритет (равенство) между вашими десктопной и мобильной версиями.

• Тот же контент: Текст, изображения и видео должны быть идентичными. Не сокращайте свои статьи для мобильных пользователей.
• Те же структурированные данные: Разметка Schema (JSON-LD) должна присутствовать на мобильной версии.
• Те же метаданные: Заголовки (Title) и Мета-описания (Description) должны быть одинаковыми.
• Визуальная проверка: Убедитесь, что реклама или всплывающие окна (интерстициалы) не закрывают основной контент на мобильных. Google не рекомендует навязчивые интерстициалы, потому что они мешают добраться до контента.

4. Как найти проблемы на мобильных

В декабре 2023 года Google отключил отчёт «Удобство для мобильных» в Search Console и инструмент проверки оптимизации для мобильных. Сейчас проверяйте страницы с помощью Lighthouse в Chrome DevTools или PageSpeed Insights и тестируйте на реальном телефоне.

Вот три частые проблемы на мобильных (названия взяты из старого отчёта) и способы их исправить:

Ошибка А: "Текст слишком мелкий для чтения"

• Проблема: Размер шрифта настолько мал, что пользователям приходится увеличивать масштаб, чтобы прочитать его.
• Исправление: Google рекомендует базовый размер шрифта не менее 16px для основного текста. Проверьте свой CSS, чтобы убедиться, что вы не устанавливаете шрифты фиксированного маленького размера (например, 10px).

Ошибка Б: "Интерактивные элементы расположены слишком близко"

• Проблема: "Синдром толстого пальца". Кнопки или ссылки находятся так близко, что пользователь, пытающийся нажать "Отмена", случайно нажимает "Отправить".
• Исправление: Убедитесь, что сенсорные цели имеют размер не менее 48x48 пикселей и имеют отступ примерно 8 пикселей между ними.

Ошибка В: "Контент шире экрана"

• Проблема: Пользователю приходится прокручивать горизонтально (слева направо), чтобы увидеть всю страницу. Это строгое "нет" в UX.
• Исправление: Обычно это вызвано изображением или таблицей с фиксированной шириной (например, width: 800px). Измените фиксированную ширину на относительную (например, max-width: 100%) в вашем CSS, чтобы элементы автоматически сжимались.

Заключение

Mobile-first индексирование — не настройка, которую можно отключить, а обычное состояние интернета. Адаптивный дизайн, одинаковый контент и проверка страниц на реальных телефонах и в Lighthouse гарантируют, что сайт работает для всех, кто смотрит его на маленьком экране.