Чек-лист: 30 шагов к идеальной мобильной версии сайта

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

Мы в нашем агентстве используем следующий чек-лист для проверки качества мобильной версии сайтов наших клиентов. Почему важно использовать чек-лист? Да просто, чтобы ничего не забыть и делать идеальные сайты. :)

Общая проверка мобильной версии

1. Мобильная версия сайта сканируется корректно в Search Console. Проверяем с помощью инструмента Fetch as Google.
2. Если на сайте присутствует видео, для его проигрывания используется HTML5.
3. Видео воспроизводится корректно.
4. Никакой навязчивой рекламы во весь экран.
5. Отступы между ссылками не менее 28 пикселей по горизонтали и вертикали. Это минимальный размер кнопок, по которым комфортно нажимать пальцем.
6. У мобильной версии сайта нет горизонтальной прокрутки.
7. Мобильная, адаптивная версия сайта или динамический показ контента протестирован в инструменте разработчика Google Chrome минимум в пяти разных разрешениях экрана, а также минимум в двух разных мобильных браузерах и минимум на трех мобильных устройствах с разным разрешением экрана.
8. В мобильной версии сайта присутствует возможность покупки или заказа в один клик.
9. Номера телефонов являются кликабельными и указаны соответственно правилам набора номеров операторов региона продвижения. (Используем тег tel:)

Проверка адаптивного дизайна

1. Для корректного отображения содержимого в блоке присутствует мататег viewport со значением:
   
2. Размер изображений на сайте адаптируется под размер экрана мобильных устройств.
3. При масштабе изображения не теряют в качестве и смотрятся четко.
4. У поискового робота есть доступ к JavaScript, CSS-файлам и изображениям, как и у обычного пользователя сайта.
5. Меню сайта находится на первом экране (если оно не занимает много места, можно даже закрепить при прокрутке).
6. Ссылка на главную страницу находится на первом экране.
7. Ссылка на корзину находится на первом экране.
8. Для адаптации видео под различные разрешения экранов используется тег HTML5.

Детальный анализ мобильной версии сайта

1. Пользователи мобильных устройств автоматически перенаправляются на мобильную версию сайта с помощью 302 редиректа.
2. Пользователи десктопных устройств перенаправляются на обычную версию сайта.
3. Если пользователь был на мобильной версии сайта и перешел на обычную, при переходе на другие страницы он не перенаправляется на мобильную версию сайта.
4. Перекрестные ссылки работают корректно, посетитель с адреса m.site.com/content-one попадает на страницу site.com/content-one, а не на site.com.
5. Для декстопной и мобильной версии указаны канонические URL-адреса с помощью тегов с элементами rel=”canonical” на десктопную версию сайта.
6. Для обычной мобильной версии сайта указаны альтернативные ссылки rel=”alternate” соответственно десктопной и мобильной версии.
7. В robots.txt и Google Search Console создана и добавлена отдельная XML-карта для мобильной версии сайта.
8. Проведен технический SEO-аудит по аналогии с аудитом обычной версии сайта.
9. С помощью сервиса PageSpeed Insights проверена скорость загрузки сайта для мобильных устройств, при получении низкого балла (меньше 80) разработано техзадание по оптимизации на основе подсказок сервиса.
10. Общий стиль мобильной версии соответствует стилю десктопной версии сайта.
11. В ответ сервиса настроен HTTP-заголовок Vary:User-Agent, чтобы Google и браузеру о том, что отдаваемый HTML код изменяется по признаку User-Agent.

Подведение итогов SEO-аудита мобильной версии сайта

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

Кроме удобства пользователей, такой сайт однозначно будет выше ранжироваться в мобильной выдаче как Яндекса, так и Google. Есть вопросы? Звоните: +7 (8332) 21-56-75