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

Как провести аудит мобильной версии сайта

Подробный чек-лист для SEO-анализа мобильной версии сайта

Что такое мобильная версия сайта

Мобильная версия сайта - это отдельная версия сайта, оптимизированная под мобильные устройства. Данная версия сайта размещается на поддомене и имеет код отличный от основной версии сайта. При внесении изменений в код мобильной версии, основная версия сайта остается без изменений.

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

В настоящее время заметен тренд перехода на адаптивные версии сайтов. Сайты с отдельной версией для мобильных устройств встречаются все реже.

Что такое адаптивная верстка

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

Сейчас большинство сайтов имеют адаптивную верстку, которая чаще всего уже генерируется CMS системами.

Почему важно наличие мобильной или адаптивной версии сайта

Более 60% пользователей переходят на сайты с мобильных устройств. С каждым годом доля мобильных пользователей увеличивается. В связи с этим сайты должны уметь адаптироваться под все типы устройств, либо иметь отдельную версию для мобильных устройств.

Наличие мобильной или адаптивной версии сайта является одним из важнейших факторов ранжирования для поисковых систем.

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

Что такое Mobile First

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

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

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

Подробнее с технологией Mobile First Index можно ознакомиться в документации Google.

Как провести анализ мобильной версии сайта

Анализ мобильной или адаптивной версии сайта можно разделить на несколько этапов:
1
Технический анализ мобильной или адаптивной версии сайта
2
Анализ трафика с мобильных устройств
3
Анализ положения сайта в мобильной поисковой выдаче
4
Анализ поведения пользователей, которые переходят с мобильных устройств
5
UX/UI-аудит мобильной или адаптивной версии с

Проведите технический аудит мобильной или адаптивной версии сайта

Проверьте адаптивность сайта

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

Воспользуйтесь несколькими способами:

  • Проверьте, корректно ли отображается сайт с мобильного устройства
  • Проверьте отображение сайта с мобильных устройств через инструменты разработчика в браузере
  • Проверьте адаптивность сайта через инструмент Google Search Console
Убедитесь, что страницы доступны для индексации Googlebot

  • Проверьте, что страница не закрыта от индексации для Googlebot в файле robots.txt или тегом noindex.
  • Убедитесь, что на странице не настроена отложенная загрузка основного контента, который необходимо проиндексировать. При наличии отложенной загрузки Googlebot не сможет проиндексировать контент.
  • При наличии мобильной версии сайта (на отдельном поддомене) необходимо убедиться, что поддомен доступен для индексации.
  • Убедитесь, что на основном домене и на мобильной версии размещен один и тот же контент.
Проанализируйте скорость загрузки страниц сайта с мобильных устройств

Скорость загрузки страниц является важным фактором ранжирование. По данным исследования Google более 53% пользователей уходят с сайта, если он загружается более 3 секунд.

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

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

Подробнее о том, как работать с данным инструментом вы можете ознакомиться в документации Google.

Анализ скорости загрузки страниц
Проверьте наличие ошибок в Google Search Console

С помощью панели Google Search Console можно выявить ошибки адаптивной или мобильной версии сайта.

Сервис может указать наличие следующих проблем:

  • Ошибки в верстке страниц
  • Наличие тяжелых картинок, замедляющих скорость загрузки страниц
  • Всплывающие окна
  • Крупные элементы, затрудняющие взаимодействие с сайтом
Анализ Google Search Console
Настройте AMP и Турбо страницы для статей

AMP страницы в Google и Турбо страницы в Яндексе - это облегченные версии страниц сайта для мобильных устройств.

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

В ряде случаев, увеличение скорости загрузки страниц может привести к росту поискового трафика.

Вес AMP и Турбо страниц меньше в связи с тем, что они содержат меньше стилей и скриптов в коде. Однако при уменьшении количества скриптов и стилей меняется внешний вид страницы, что может сказаться на юзабилити.

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

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

  • Размещайте на сайте изображения в хорошем качестве
  • Оптимизируйте изображения под все разращения экрана
  • Используйте только поддерживаемые форматы изображений (Google не может проиндексировать изображение в формате jpeg в тегах <image>, которое встроено в SVG-файл. При этом формат svg Google поддерживает).
  • Убедитесь, что тег alt заполнено одинаково на основной и мобильной версиях.
  • Для размещения видео на страницах сайта используйте поддерживаемые форматы и теги (<video>, <object> и <embed>).
  • Размещайте изображения или видео на страницах сайта таким образом, чтобы пользователям легко было найти данный контент.

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

Весь основной контент на страницах сайта должен быть оформлен в html-коде и доступен для индексации.

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

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

Проверить это можно с помощью инструмента Рендеринг страниц JavaScript в Яндекс Вебмастере.
Что если у сайта отдельная мобильная версия?
Если у сайта отдельная мобильная версия, необходимо проверить все ли нужные страницы индексируются поисковыми системами.

Что проверять и как оптимизировать мобильную версию сайта?
Добавьте тег Alternate на все страницы основной версии сайта

На всех страницах основной версии сайта необходимо разместить тег rel=alternate с указанием альтернативной (мобильной) версии соответствующей страницы сайта.

Пример заполнения тега:
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.site.ru/catalog/">
Добавьте тег Canonical на все страницы мобильной версии сайта

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

Пример заполнения тега:
<link rel="canonical" href="http://m.site.ru/catalog/">
Проверьте наличие и корректность файла robots.txt

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

Для улучшения индексации необходимо составить файл robots.txt, в котором будут закрыты от индексации служебные страницы и папки, страницы с GET-параметрами и дубли страниц.

Также рекомендуем открыть для индексации изображения, скрипты и стили.

Файл robots.txt необходимо разместить по адресу https://m.site.ru/robots.txt

Пример содержания файла robots.txt:
User-Agent: *
Allow: /bitrix/*.css
Allow: /bitrix/*.js
Allow: /bitrix/*.png
Allow: /bitrix/*.jpg
Disallow: /bitrix/
Disallow: /*search
Disallow: /*utm
Sitemap: https://m.site.ru/sitemap.xml
Сгенерируйте xml-карту сайта

Для мобильной версии сайта рекомендуем сгенерировать файл sitemap.xml и разместить в xm-карте ссылки на все существующие канонические страницы с 200 кодом ответа. Не следует включать в карту сайта страницы с GET-параметрами и страницы пагинации.

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

Пример:
<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
        <url>
            <loc>https:/m.site.ru/</loc>
            <lastmod>2022-08-10T11:00:00+03:00</lastmod>
        </url>
        <url>
            <loc>https:/m.site.ru/catalog/</loc>
            <lastmod>2022-08-10T11:00:00+03:00</lastmod>
        </url>
    </urlset>
Проверьте корректность заполнения мета-тегов

На мобильной версии сайта мета-теги должны дублировать теги с основной версии сайта.

При этом необходимо провести анализ заполнения мета-тегов и при необходимости скорректировать мета-теги. Что проверять?

  • На всех ли страницах сайта заполнены мета-теги title и description
  • На всех ли страницах присутствует заголовок h1
  • Нет ли дублирующихся мета-тегов title
  • Проверить длину тега title (в мобильной выдаче сниппет короче, чем в десктопной, в связи с чем длинные теги title рекомендуем сократить)
Проверьте наличие кнопки «Полная версия сайта»

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

Проведите анализ трафика и поведения мобильных пользователей

Сравните мобильный трафик с десктопным

Для начала определите доли мобильного и десктопного трафика в вашей тематике. Как правило более 60% пользователей переходят на сайты с мобильных устройств.

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

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

Проведите анализ поведенческих факторов и сравните показатели с мобильных устройств и ПК.

Что проверять:

  • Количество переходов (визиты)
  • Показатель отказов (уходов с сайта)
  • Глубину просмотра (количество просмотренных страниц за сеанс)
  • Время, проведенное на сайте за сеанс

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

Вебвизор - это инструмент в Яндекс Метрике, который позволяет отслеживать действия пользователей на страницах сайта. Данный инструмент записывает действия пользователей.

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

Проведите аудит юзабилити

Для того, чтобы выявить проблемы, которые мешают пользователям взаимодействовать с сайтом и совершать конверсионные действия, не обязательно привлекать UX-дизайнера.

Вы можете провести анализ юзабилити самостоятельно.

Поставьте себе цели:

  • Найти сайт в мобильной поисковой выдаче
  • Найти конкретный товар или услугу без использования поиска по сайту
  • Оформить покупку товара или заказать услугу
  • Найти какую-либо информацию о товаре или услуге
Попробуйте выполнить поставленные задачи с мобильного устройства.

В ходе анализа рекомендуем выполнить следующие действия:

  • Засеките время, за которое будут достигнуты цели
  • Фиксируйте процесс (записывайте все проблемы, с которыми столкнетесь в ходе проведения анализа)
  • Делайте скриншоты страниц, которые посещаете в ходе анализа

После завершения анализа проведите подобный анализ на сайтах конкурентов (лидеров тематики) и сравните показатели.

Как проверить сайт на адаптивность

Чтобы протестить адаптивность сайта, можно воспользоваться онлайн сервисами, например Google Mobile Friendly или adaptivator.ru.

Также проверить адаптивность можно с помощью консоли разработчика, посмотрев код сайта в браузере, либо зайти на сайт со смартфона.
Итоги
По итогам проведенного анализа мобильной или адаптивной версии сайта необходимо:

  • Составить список технических ошибок
  • Сформировать список проблем, которые затрудняют взаимодействие с сайтом
  • Сформулировать гипотезы, что можно улучшить
  • Составить список преимуществ конкурентов
  • Зафиксировать показатели по трафику и поведенческим факторам
  • Исправить найденные ошибки и повторить анализ для проверки достоверности сформированных гипотез
Пожалуйста, оцените статью
Читайте далее
Показать еще
Автор статьи
Дмитрий Лашманов
SEO-специалист
Опыт работы в SEO 4 года
60+ реализованных проектов

Дополнительные курсы:

SEO в СНГ - Rush Academy
SEO на запад - Rush Academy
UX/UI-дизайн - Skillbox
Школа экспертов Нетологии