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

Для мобильного сайта, который просматривают на бегу, в условиях быстрой смены обстановки, важны:

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

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

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

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

Например, описанные отличия хорошо заметны на разных версиях сайта change.org (Рис. 1): полная десктопная версия с широким функционалом и лаконичная мобильная с акцентом на самом главном.

Рис. 1. Один и тот же сайт имеет отличия в отображении контента на разных устройствах

Единственная версия сайта сегодня — моветон, об этом напоминают и представители поисковых систем. Игнорировать мобильных пользователей больше невозможно — их доля значительна и по разным оценкам составляет от трети до половины посетителей сайтов разных тематик. Google отреагировал на глобальную «мобилизацию»: в 2014 году введена маркировка в результатах поиска сайтов, имеющих мобильную версию, в апреле 2015 года запущен новый алгоритм ранжирования в мобильном поиске. Яндекс поддержал тренд в феврале 2016-го.

Теперь предпочтение в мобильном поиске отдается сайтам, адаптированным для просмотра на смартфонах (Рис. 2), и вот какие требования к оптимизации предъявляют оба ведущих поисковика:

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

Проверить уровень мобильной оптимизации сайта можно в Яндекс.Вебмастере (необходимо иметь доступ к аккаунту) и с помощью открытого инструмента Google.

Рис. 2. Яндекс показывает, какие сайты могут занять достойное место в ТОПе мобильной выдачи

Доля мобильного трафика в Рунете каждый год растет на 5%, при этом доля неоптимизированных под телефоны сайтов в мобильном ТОП10 уменьшается на 4%. Наблюдаем практически прямую зависимость. Отставание в 1% связано, в первую очередь, с нехваткой сайтов, оптимизированных под мобильные устройства. Можем сделать вывод, что с ростом мобильного трафика растет и доля адаптивных сайтов в мобильной выдаче.

Аналитики SeoPult задались целью провести собственное исследование: в какой степени мобильность сайта влияет на его видимость в мобильном поиске. Были получены две выборки сайтов в Системе: оптимизированные и не оптимизированные под мобильные устройства. Распределение оказалось следующим: оптимизированных сайтов — 17%, не оптимизированных — 83%. Картина плачевная.

Далее мы проанализировали, какую видимость в Системе имеют сайты из выборки. Получили результаты, отраженные в таблице ниже (Рис. 3) (видимость смотрелась по основной поисковой системе, указанной в профиле проектов).

Рис. 3. Адаптированные сайты имеют лучшую видимость в мобильном поиске

Что и требовалось доказать — алгоритм поисковиков в действии. Несомненно, он работает с некоторой погрешностью, и результаты мобильного поиска иногда оставляют желать лучшего. Однако тенденция очевидна, и получение мобильного трафика на сайт напрямую связано со степенью его мобильной адаптации.

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

Очень многие сайты оказались вне ТОП10 мобильной выдачи, а значит, вне поля зрения мобильных пользователей. Хотя могли получать мобильный трафик и работать на рост конверсий (Рис. 4).

Рис. 4. Монитор изменения позиций сайта в десктопной и мобильной выдаче Яндекса и Google

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

В целом можно выделить два подхода к адаптации существующего сайта:

• создание отдельного ресурса на новом домене (например, m.site.ru);
• подгонка под экран смартфонов существующей версии.

Об этих способах реализации мы писали в выпуске рассылки «Техники мобильной адаптации сайта».

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

У адаптивного дизайна есть разновидность — «responsive design» («отзывчивый дизайн»). Он сочетает в себе возможности адаптивной и так называемой «резиновой» верстки, используемой для десктопных сайтов. Благодаря этому удается еще более удачно вписать контент в рамки мобильного экрана. С примерами реализации можно ознакомиться здесь.

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

Какой метод оптимизации выбрать? Здесь нет однозначного ответа. У каждого способа есть сторонники и противники. Одни утверждают, что отдельная версия — это лучшее решение. Можно сделать идеальный мобильный сайт, отбросив все ненужное и тотально переделав интерфейс взаимодействия. Другие им отвечают, что это дополнительные трудозатраты, необходимость поддерживать сразу два сайта и разумнее использовать адаптивный дизайн.

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

С точки зрения SEO адаптивный дизайн предпочтителен:

• ускоряется индексация страниц;
• отсутствует риск появления дублей страниц;
• не нужно настраивать переадресацию с применением агентов пользователя;
• пользователи работают с одним URL (им удобнее делиться контентом);
• чтобы сообщить поисковому роботу об адаптивной версии сайта достаточно лишь прописать в заголовок документа мета-тег viewport: <meta name="viewport" content="width=device-width, initial-scale=1">

Однако, если у вас уже есть две отдельные версии, не забудьте проработать следующие нюансы:

• помогите поисковому роботу правильно определить мобильную версию — используйте на ее страницах параметр alternate: <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page.html"/>
• добавьте мобильную версию в Яндекс.Вебмастер, чтобы следить за индексацией страниц;
• размещайте мобильную версию только на отдельном домене, например m.site.ru, а не в единой директории основного сайта, например, site.ru/mobile (чтобы робот смог корректно индексировать данные).