Число пользователей мобильного интернета растет.

Datareportal.com в январе 2019 года опубликовал статистику: 109,6 миллионов пользователей в России выходят в сеть через мобильный интернет:

Если они попадают на сайт, который не адаптирован под мобильную версию или планшет, то они могут столкнуться с проблемами:

• весь контент не влезает на экран устройства, нужно вручную изменять размер веб-страниц;
• возможно какая-то часть контента будет обрезана;
• неудобное меню;
• при выпадающих длинных списках часть его выходит за рамки экрана.

В итоге пользователь уйдет с неудобного сайта.

Чтобы такого не произошло, сайт необходимо адаптировать под мобильные устройства. При этом нужно помнить, что есть различия между тем, как Яндекс видит мобильную версию и тем, как это делает Google.

Google в отличие от Яндекса не разделяет поисковую выдачу на обычную и мобильную. В Google действует алгоритм Mobile-Index First. Google при формировании выдачи отдает предпочтение сайтам с мобильной адаптацией.

Это важно учитывать, так как в мобильном поиске в России лидирует поисковая сеть Google.

При этом мы регулярно встречаем сайты, которые не имеют мобильной версии.

Поэтому мы решили обобщить основные правила адаптации сайта под мобильные устройства, чтобы он хорошо ранжировался в поисковой системе Google.

Перечислим основные принципы:

1. Удобство и простота сайта.

Для мобильной версии действует принцип «чем сайт проще, тем эффективнее». На удобном сайте посетитель без особых трудностей находит информацию или совершает целевые действия (оформляет заказ, рассчитывает кредит, узнает условия доставки и т.д.).

Для этого нужно все действия проанализировать и постараться сократить количество шагов от захода на сайт до их свершения.

2. Единообразие дизайна для всех устройств

Для выполнения этого принципа удобнее всего изначально использовать на вашем сайте адаптивный веб-дизайн.

После того, как вы выбрали, какой вариант мобильной версии сайта вы будете использовать или уже используете, нужно эту версию подготовить к индексированию поисковой системой.

Подробнее об услуге «Продвижение в поисковой системе» вы можете узнать здесь

1. Необходимо подтвердить право собственности как на обычную, так и на мобильную версию сайта в Google Search Console. Так вы сможете получать уведомления и данные по обеим версиям сайта;

2. Необходимо проверить атрибуты hreflang* для каждой версии сайта. Атрибуты hreflang в URL должны указывать на версии, предназначенные для соответствующих типов устройств;

Если вы используете разные URL или динамический показ, вам необходимо подготовить ваш сайт к индексированию поисковой системой Google, согласно рекомендациям:

1. Мобильная и полная версии сайта должны содержать одинаковый контент.

Контент мобильной версии сайта (тексты, изображения с прописанным тэгом alt, видео, мета-данные) должен совпадать с основным сайтом.

2. Мобильная и полная версии сайта должны содержать структурированные данные.

Необходимо проверить, что URL в структурированных данных мобильной версии ведут на оптимизированные для мобильных устройств страницы (если структурированные данные добавляются с помощью маркера, регулярно выполняйте проверку на наличие проблем).

3. Мобильная и полная версии сайта должны содержать мета-данные.

Заголовки (title) и описания (description) должны совпадать.

которые вам необходимо осуществить для правильной индексации сайта в поисковой выдаче Google:

• Необходимо сообщить Google, что ваш сайт рассчитан на мобильные устройства;
• Проверить, что ключевые файлы сайта (включая CSS, JavaScript или изображения) доступны для сканирования роботом Googlebot.

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

Перечислим самые распространенные ошибки, чтобы вы могли избежать их во время разработки мобильной версии сайта или исправить на уже функционирующем сайте.

Ошибка: некорректное отображение страниц — блокировка JavaScript, CSS и графических файлов

Если мобильная версия сайта отображается некорректно, первым делом стоит проверить предоставлен ли роботу Googlebot доступ к JavaScript, CSS и графическим файлам. Поисковый робот должен видеть мобильную версию сайта также, как его видит обычный пользователь.

Если на вашем сайте в файле robots.txt закрыт доступ к JavaScript, CSS и графическим файлам, то данные не будут проиндексированы поисковой системой. От этого позиций вашего сайта в выдаче будут низкими.

Для проверки доступности следует воспользоваться инструментом проверки URL в Google Search Console — с его помощью вы сможете найти и исправить ошибки индексирования сайта.

Ошибка воспроизведения контента

Обычно в мобильных версиях сайта не поддерживаются видео, требующие Flash-проигрыватель или контент с ограниченной лицензией.

Если у вас на сайте есть подобный контент, Google рекомендует использовать стандартные теги HTML5, а также удостоверится, что вы используете форматы видео, которые поддерживаются на всех устройствах.

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

Ошибки переадресации

Если для мобильной версии у вас есть отдельные версии страниц, необходимо корректно настроить переадресацию для каждой.

Список типичных ошибок переадресации:

• сервер компьютерной версии сайта настроен перенаправлять пользователей на главную страницу мобильной версии с любой открываемой страницы;
• динамические параметры в URL пропадают при переходе на аналогичные страницы мобильной версии;
• перенаправление на мобильную версию сайта настроено не для всех мобильных устройств.

Чтобы избежать ошибок, выполните следующие действия:

• всегда используйте Google Search Console (бесплатный сервис, с помощью которого вы можете контролировать, как ваш сайт представлен в результатах поиска Google). Это позволит вам получать уведомления об ошибках (например, что пользователи мобильной версии перенаправляются на главную страницу сайта вместо нужной);
• если мобильная версия сайта находится на отдельном поддомене или разных url, проверьте, корректно ли настроена переадресация. Страницы должны вести на аналогичные в мобильной версии;
• если в мобильной версии сайта нет каких-то страниц, то откажитесь от переадресации для них с декстопной версии.

Ошибка 404

Бывает, что сайты, которые корректно отображаются на компьютерах, в мобильной версии выдают ошибки. В таких случаях:

• используйте Google Search Console, чтобы своевременно получать информацию об ошибках;
• при использовании мобильной версии сайта с отдельным URL настройте переадресацию для пользователей мобильных устройств;
• при использовании мобильной версии с динамическим контентом, проверьте, что агент пользователя определяется правильно;
• если у каких-то страниц сайта нет мобильной версии, не ищите варианты, куда перенаправить пользователя (например на главную страницу).

Ошибка: нежелательные межстраничные объявления

Если на сайте есть межстраничные объявления или различные оверлеи с формами подписки, то часто в мобильной версии они частично или полностью перекрывают полезный контент на странице. В некоторых случаях их бывает сложно закрыть.

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

Ошибки перекрестных ссылок

Если вы используете отдельный сайт для мобильных устройств, то обычно на нем есть ссылка для возвращения на полную версию сайт и наоборот. Одна из самых распространенных ошибок в этом случае — ссылка не на ту страницу. Поэтому всегда перепроверяйте, куда ведут ссылки.

Ошибка: медленная загрузка

Обязательно проверьте, что у мобильной версии сайта высокая скорость загрузки. В этом вам поможет инструмент Google PageSpeed Insights. Вы сможете узнать, какие элементы страниц замедляют загрузку. С помощью рекомендаций улучшите скорость загрузки вашего сайта.


Ошибка: некорректная настройка области просмотра

Чтобы ваш сайт правильно отображался на экранах разных размеров, корректно настройте область просмотра с помощью мета-тэга viewport, который сообщает, как правильно изменить размеры элементов страницы.

При настройке мета-тега viewport проверьте, что значения ширины и позиционирования элементов CSS относительны, а изображения масштабируются.

В противном случае:

• если выбрана фиксированная ширина области просмотра, то страницы будут показываться в нужном масштабе не на всех существующих экранах;
• если минимальная область просмотра слишком широка, то для маленьких экранов возникнет необходимость прокручивать страницы по горизонтали.

Ошибка: маленькие шрифты

В мобильной версии сайта не используйте слишком мелкий шрифт. Рекомендуемый базовый размер шрифта — 16 пикселей в CSS (или 16 px). После того, как вы настроете область просмотра, определите размеры шрифтов, чтобы они корректно отображались. Подробнее про настройку шрифтов можно прочитать в этой статье.

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

Не располагайте элементы навигации слишком близко друг к другу, чтобы пользователь случайно не задевал соседние ссылки. Позаботьтесь об оптимальных размерах элементов навигации и расстояниях между ними. Пользователям должно быть удобно с ними взаимодействовать.

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

1. Проверьте, что у Googlebot есть доступ к файлам JavaScript, CSS и графическим файлам. Используйте инструмент проверки URL в Google Search Console. С его помощью можно найти и исправить ошибки в индексировании сайта;

2. Проверьте файл robots.txt в Google Search Console;

3. Для того, чтобы узнать насколько ваш сайт удобен для использования на смартфонах, протестируйте его с помощью специального инструмента от Google;

4. В случае, если вы используете отдельные мобильные версии страниц, проверьте их, чтобы убедиться в корректности переадресации.

Инструмент проверки оптимизации для мобильных устройств от Google

Этот инструмент для сканирования страниц использует робот Googlebot. Это означает, что при проверке учитываются правила в файле robots.txt. Если у робота Googlebot не будет доступа к страницам, JavaScript, CSS и каким-либо к другим ресурсам, не исключено, что выполнить проверку оптимизации для мобильных будет невозможно. Важно (!) правильно составить файл robots.txt для мобильной версии сайта.

С помощью этого инструмента можно получить рекомендации по необходимой оптимизации сайта.

Инструмент Google PageSpeed Insights

Он покажет скорость загрузки вашего сайта и даст все необходимые рекомендации по его оптимизации. Инструмент проверяет страницы, имитируя поведение обычного пользователя. При проверке не учитывает правила в robots.txt.