Количество пользователей мобильных устройств за последние несколько лет выросло настолько, что не использовать этот нюанс в процессе продвижения своего бизнеса в интернете просто нелогично и контрпродуктивно.
Поэтому поисковые системы настроили свои алгоритмы таким образом, что наличие мобильной версии сайта или его адаптивность под различные мобильные гаджеты учитываются при ранжировании ресурса в результатах поиска наравне с другими факторами. О том, насколько выросла доля мобильного трафика в Рунете за прошлый год, вы можете узнать из исследования поисковой системы Яндекс.
Допустим, вы не знали, что наличие мобильной версии сайта так важно и упустили этот момент. Не стоит преждевременно отчаиваться. В этой статье мы подробно и пошагово объясним, что необходимо сделать для оптимизации сайта под мобильные устройства и какие действия нужно предпринять в первую очередь. Познакомим вас со способами подачи мобильного контента, а также расскажем о преимуществах и недостатках каждого из них.
Оптимизация сайта под мобильный трафик
Почему поисковые машины начали настаивать на обязательной оптимизации сайтов под мобильные гаджеты? В первую очередь, это связано со стремительным ростом мобильного трафика, который в отдельных нишах догнал и перегнал посещаемость стандартных настольных ПК, о чем мы уже упоминали в нашей статье о правильном продвижении сайта. Во-вторых, мобильный интернет стал намного дешевле, и число абонентов мобильных интернет-провайдеров резко возросло.
Сегодня вебмастера при создании мобильной версии веб-ресурса используют три вида технологий:
- адаптивный дизайн;
- динамический контент;
- разные URL-адреса для разных версий сайта.
Давайте подробно рассмотрим каждую технологию и выделим их положительные и отрицательные стороны.
Адаптивный дизайн
Такой тип верстки позволяет браузеру подстраиваться под экран конкретного устройства. При этом код HTML остается неизменным. Адаптивную верстку еще называют резиновой. С помощью мета-тега viewport сайт самостоятельно растягивается под размеры экрана и выглядит компактно и эстетично.
Плюсы адаптивной верстки:
- для всех устройств используется один и тот же адрес, нет необходимости выносить сайт на отдельный поддомен;
- одна уникальная страница намного быстрее входит в индекс поисковых систем и дольше там находится, чем несколько ее дублирующих версий для разных устройств;
- зачастую адаптивная верстка имеет меньше недочетов в плане форматирования и внутренней оптимизации;
- при посещении такого сайта поисковыми роботами меньше нагружается сервер, и ресурс работает быстрее, а скорость загрузки сайта – один из важных факторов ранжирования;
- также на быстроту загрузки положительно влияет отсутствие редиректа, который разработчики создают для других типов мобильных сайтов.
Недостаток у данного вида технологии может быть только один – «кривые» руки дизайнера. В остальном – это самый оптимальный способ получать качественный мобильный трафик. Даже Google рекомендует вебмастерам использовать адаптивную верстку, а он, как известно, плохого не посоветует.
Все вышеперечисленные преимущества адаптивного дизайна мобильной версии сайта являются сегодня неоспоримыми, и такая верстка используется в веб-строительстве чаще всего.
Отдельный поддомен для мобильных устройств
Такой способ тоже пользуется популярностью у вебмастеров. При посещении основного сайта пользователь через редирект попадает на отдельный поддомен вида m.site.ru, даже если на планшете или смартфоне ввел основной адрес сайта.
Для поддомена необходимо обязательно создать отдельный robots.txt, запретив посещение роботом поисковика служебных страниц сайта, а также sitemap.xml. Старайтесь разместить поддомен мобильной версии на том же домене, где находится основной сайт, иначе поисковые системы могут просто не распознать его и принять за отдельный ресурс.
Каких рекомендаций нужно придерживаться, чтобы не произошло дублирования сайтов в выдаче? Все просто: разместите мобильную версию на поддомене основного сайта, на страницах главного ресурса укажите мета-тег rel=“alternate”, установите редирект на мобильную версию сайта в зависимости от устройства пользователя.
Динамический показ
Для посетителей сайта, зашедших с разных устройств, сервер показывает одну страницу, но с разными вариантами CSS и HTML. Такой способ позволяет показывать пользователю разные варианты одной страницы. Особенно эффективно динамический контент работает для посадочных страниц, которые могут подстраиваться под конкретного пользователя.
При использовании HTTP-заголовка Vary, он сообщает кеширующим серверам провайдера, что важно учитывать агент пользователя, показывая тому веб-страницу. Без этого важного элемента пользователи мобильных гаджетов могут увидеть не оптимизированную версию страницы. Например, с компьютера откроется мобильная версия сайта, а со смартфона – десктопная HTML-версия.
Более того, заголовок Vary помогает роботу поисковой машины быстрее сканировать и показывать контент, оптимизированный под мобильные устройства. Подробнее о динамическом показе читайте на сайте Google для разработчиков.
Топ-10 советов по оптимизации мобильной версии сайта
Владельцы сайтов, не имеющие большого опыта в продвижении, часто допускают разного рода ошибки, которые отрицательно сказываются на эффективности поискового продвижения мобильного сайта. Мы подготовили для вас 10 самых важных рекомендаций, которые помогут избежать распространенных ошибок в мобильном SEO.
Найдите и исправьте некорректные редиректы
Как найти неправильные перенаправления на сайте? Зайдите в инструменты для вебмастеров в Google, выберите сайт из списка, перейдите на вкладку «Ошибки сканирования», выберите тип мобильного устройства и посмотрите на результат. Исправьте найденные ошибки. Если же бот поисковой системы не найдет никаких недочетов, сервис сообщит об этом, как показано на скриншоте.
Ускорьте сайт
Проверьте, насколько быстро загружаются страницы вашего сайта, и исправьте недочеты. Как это сделать? Посетите один из сервисов, которые предлагают проверить скорость загрузки сайта, например, вот этот. Укажите любую страницу вашего сайта и всего через несколько секунд узнаете, насколько быстр ваш проект и нужно ли его дополнительно ускорять.
Для более продвинутого анализа, например, когда необходимо узнать, с какой скоростью открывается ресурс в той или иной точке земного шара, воспользуйтесь серверами host-tracker.com. Результат проверки будет примерно такой, как показан на рисунке:
В Рунете такую услугу предоставляет сервис Айри, где можно провести подробное тестирование работоспособности сайта и его скорости загрузки. Что нужно сделать, чтобы сайт грузился быстрее? Установите плагины (модули) кеширования, произведите сжатие стилей CSS, проведите оптимизацию сценариев и скриптов. Если есть возможность хранить изображения на стороннем фотохостинге или размещать скрипты не до, а после контента, сделайте это (тогда в первую очередь будет открываться контент, а уже потом выполняться сценарии). Чем реже браузер пользователя обращается к серверу и чем меньше весят медиафайлы, тем выше скорость загрузки вашего ресурса.
Избавьтесь от дублированного контента
Сделать это можно с помощью такого полезного тега как rel=“canonical”. Он сообщит боту Google, какая из страниц является основной, а какая дублированной. Благодаря этой важной настройке поисковая машина не пессимизирует ваши страницы, и они будут хорошо ранжироваться в выдаче.
Сократите заголовок и описание
Для мобильной версии сайта очень важно, чтобы и title, и description были короткими, лаконичными и умещались в пределах экрана гаджета.
Исключите горизонтальную прокрутку
Еще один важный нюанс. Наличие горизонтальной прокрутки в браузере мобильного телефона или планшета негативно скажется на юзабилити сайта и поведенческих факторах (точно так же, как и на мониторах стационарных устройств). Не теряйте потенциальных клиентов из-за одной незначительной недоработки. Посмотрите, как органично выглядит сайт нашей компании на экране смартфона. Сделать это можно здесь.
Используйте микроразметку
Как показывают многочисленные исследования, пользователи с большей охотой переходят по ссылкам тех сайтов, которые используют так называемое «микроформатирование». Сегодня качественно структурированный контент положительно влияет на ранжирование сайта в поисковой выдаче.
Сделайте карту сайта под мобильные устройства
Если у вас еще нет мобильной карты сайта в формате XML, срочно создайте ее. Это позволит оперативно распознавать проблемы с индексацией ресурса и быстро их исправлять.
Не пренебрегайте региональным поиском
Укажите на сайте название компании, телефоны, адрес и другую информацию, которая поможет поисковой машине определить регион сайта и показать ваш контент непосредственно целевой аудитории. Как правило, большая часть пользователей в итоге пересаживается с мобильных на десктопные устройства и конвертируется в покупателей.
Не забывайте про страницу с 404 ошибкой
Не забывайте для мобильных версий сайта отдавать код сервера 404 для страниц, которых не существуют на вашем сайте.
Оптимизируйте видео на сайте
Когда посетитель не может посмотреть на мобильном устройстве видеоролик, который корректно отображается на компьютере или ноутбуке, такой пользователь, вероятнее всего, вскоре покинет сайт безвозвратно. Наши специалисты рекомендуют использовать вместо технологии Flash инструменты HTML5. Это положительно скажется как на трафике с мобильных устройств, так и на посещаемости «портативной» аудитории.
Более подробно о том, как правильно сообщить поисковым системам о конфигурации вашего сайта, описано здесь.
Важные нюансы при оптимизации мобильной версии сайта
Для качественной оптимизации мобильного сайта необходимо вдобавок ко всему вышеперечисленному сделать следующее:
чтобы при переходе со страницы мобильной версии пользователь попадал не на главную основного домена, а на ту же страницу, только на основном сайте, - обязательно проведите тестирование перекрестных ссылок в мобильной версии. Например, посетитель должен с адреса m.site.ru/content-one попадать на страницу site.ru/content-one, а не на site.ru.
- для отслеживания статистики и изучения поведения пользователей на разных устройствах установите счетчики и на основной сайт, и отдельно для мобильной версии.
- избегайте использования навязчивой рекламы, которая может замостить весь экран и помешать вашему пользователю получить важную информацию.
- всегда проверяйте, как ваш сайт отображается на различных мобильных девайсах с помощью таких онлайн-эмуляторов. На этом рисунке показано, как сайт нашей компании отображается на экране Apple IPad с разрешением 1024х768:
Вывод
Какие выгоды владельцу площадки дает сегодня оптимизация сайта под мобильные устройства? Во-первых, и это самое главное, ваш сайт привлечет больше трафика. Во-вторых, существенно улучшатся поведенческие факторы, посетители на сайте будут дольше находиться на его страницах. В-третьих, в тематиках с коммерческим уклоном увеличится показатель конверсии. В-четвертых, показатель отказов будет стремиться к нулю, что также окажет положительный эффект на позиции сайта в органической выдаче. В-пятых, оптимизированные страницы будут грузиться быстрее на всех устройствах.
