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

Kristina | Июнь 29, 2015

Вот и пришел час М – мобильная версия веб-сайта из ряда необязательных, перешла в ранг необходимых. Ведь доля посетителей, приходящих на интернет-ресурс с мобильных устройств, неуклонно растет и в среднем уже составляет 20 %. А для некоторых веб-сайтов перевалила и за половину.По оценке поискового гиганта Google уже совсем скоро ОДИН МИЛЛИАРД людей в интернет в основном будут заходить через свои смартфоны. А сколько это будет делать время от времени? Да практически все! Поэтому сейчас одной из самых актуальных задач интернет-маркетинга можно считать создание качественной мобильной версии сайта и ее сео продвижение. Кстати, Гугл уже официально заявил о существенном влиянии факторов mobile-friendly на результаты выдачи для мобильных устройств.

mobile-site

Обычная и мобильная версии сайта

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

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

Адаптивный дизайн

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

Существует достаточно большое количество плагинов для различных CMS, которые адаптируют веб-сайт для его просмотра через мобильные устройства. Например, для популярного движка WordPress это WPtouch, а для Joomla! – MobileTemplate, MobileJoomla, TapThemeи т. д.

Преимущества:

  1. Один и тот же URL для десктопной и мобильной версии. Ведь это же один сайт, один код, который по-разному визуализируется на стационарных и мобильных устройствах. Единый URL означает, что сео оптимизацией необходимо заниматься для ОДНОГО интернет-ресурса и продвигать необходимо только его, что существенно сокращается затраты на это. Отпадают вопросы с дублированием контента (что очень не любят поисковики) и разделением ссылок между различными версиями сайта.
  2. Не надо разрабатывать новый HTML-код для мобильной версии. Установил нужный плагин и все.

adaptivnyj-dizajn

Недостатки:

  1. Практически всегда ухудшается юзабилити сайта. Попробуйте перейти со страницы на страницу, если элементы навигации отстоят друг от друга на расстоянии меньше ширины пальца! И серфинг по интернет-ресурсу становится похожим на яхтинг в шторм, когда сводит пальцы от напряжения.
  2. Ухудшается дизайн. Одно дело, когда таблицы, картинки и текст гармонизированы для показа на большом экране и со всем по-другому это выглядит, когда они сжаты в несколько раз. Поэтому часто требуется редизайн сайта. А это уже почти, что его разработка.
  3. Значительное увеличение времени загрузки страниц. Все же загрузить картинку в несколько мегабайт на скорости 100 Мбит/с намного быстрее, чем делать это в 2G сети и в месте со слабым сигналом. И не забываем о скриптах, которые значительно увеличивают время загрузки страницы, но совершенно не работают в мобильной версии. Кстати, это является одним из существенных доводов против создания мобильной версии интернет-магазина при помощи адаптивного дизайна. Ведь многие функции в этом случае просто не будут работать!
  4. Безальтернативность. Если по каким либо причинам вас не устраивает вид сайта на вашем смартфоне, перейти на мобильную версию не получится. Ее просто нет!

И еще об одном недостатке хотелось бы сказать. Мобильные устройства довольно сильно влияют на восприятие информации пользователем. Согласитесь, что одно дело читать главную страницу с размером статьи в 3000 знаков, украшенной красивой графикой, а то и видео на ноутбуке с диагональю 17» и совсем другое – делать это на смартфоне пусть и с 5-дюймовым экраном – очень утомительное занятие! Другими словами, для мобильных устройств необходим другой контент – более лаконичный, не отягощенный тяжелой графикой и уж тем более видео. Конечно, в этом случае часть информации останется за бортом. Разумно, конечно, за бортом мобильной версии оставить все наименее востребованное.

Динамическая подстановка контента

dinamich-kontent

Суть этого способа состоит в том, что сервер понимает, с какого устройства происходит запрос, и под одним и тем же URL пользователям смартфонов и ПК показывает РАЗНЫЕ версии страниц.

Преимущества:

  1. URL остается неизменным, поэтому не надо распылять усилия при сео продвижении. Опять же, отпадают вопросы с раздвоением ссылочной массы и дублированием контента. Даже если для мобильной версии страницы будет использована просто часть текстового контента со стационарной версии, в глазах поисковых систем это не является дублированием, так как и вся статья, и отрывок из нее будут расположены на одной странице.
  2. Появляется возможность создавать удобный интерфейс и контент, заточенный под мобильные устройства. А это и хорошее юзабилити, и приемлемое время загрузки страницы, и хорошо воспринимаемый контент. Все это существенно влияет на отдачу вебсайта – уровень продаж (если речь идет об интернет-магазине), времени, проведенному на веб-ресурсе посетителями и т. д.

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

Недостатки:

  1. Необходимость разработки другого варианта кода HTML и дополнительного контента.
  2. Сложность разработки и высокая стоимость обслуживания.
  3. Ошибки при определении вида устройства. То есть сервер может не распознать смартфон пользователя, как мобильное устройство и откроет десктопную версию.

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

Основные рекомендации по сео оптимизации:

  1. Используйте HTTP-заголовки Vary, чтобы роботу Google для смартфонов было легче находить мобильный контент.
  2. Проверьте HTML-код при помощи опции Fetchas Google в вWebmaster Tools и с помощью эмуляторов – Mobile Phone Emulator, Opera Mini Simulator и др.

Самостоятельная мобильная версия

В этом случае на поддомене m. (mobile) создается САМОСТОЯТЕЛЬНЫЙ сайт для мобильных устройств (например, m.rambler.ru). Переход со страниц вебсайта для ПК на сайт для мобильных устройств (и обратно) осуществляется при помощи 301-го редиректа. То есть если вы решили узнать погоду и набрали в смартфоне weather.rambler.ru, то будете автоматически переадресованы на страницу m.weather.rambler.ru.

Преимущества:

  1. Простота HTML-кода по сравнению с первыми двумя способами.
  2. Удобный, адаптированный под мобильные устройства интерфейс.
  3. Показ контента, адаптированного для мобильных устройств.

Недостатки:

  1. Разделение ссылок между двумя сайтами.
  2. Необходимость сео продвижения сразу двух сайтов.
  3. Проблема дублированного контента. В рекомендациях по сео оптимизации предлагается использовать атрибут rel=»canonical» тега, созданного специально для указания предпочитаемой (канонической) страницы. То есть на страницах сайта для ПК используете атрибут rel=»alternate» для указания на соответствующие страницы сайта для мобильных устройств (например, <link rel=»alternate» a href=»http://weather.rambler.ru»/>). А в мобильном сайте атрибут rel=»canonical» (например, например, <link rel=»canonical» a href=»http://m.weather.rambler.ru»/>). Но есть одно но. В разъяснениях Яндекса написано, что, во-первых, что атрибут rel=»canonical» не является строгой директивой и может быть проигнорирован. А во-вторых, указаны случаи, когда вероятней всего это произойдет. И один из них – указание в качестве адреса канонической страницы URL, расположенной в поддомене. Так что проблему сдублированным контентом оставляем в недостатках этого вида сайта для мобильных устройств.
    И все же подсластим пилюлю. Хотя в данном способе создания сайта для мобильных устройств присутствует необходимость сео продвижения и его, и его десктопного коллеги, в этом есть определенное… преимущество. Ведь используется 301 редирект, который полностью передает вес страниц. То есть, продвигая десктопный вариант, вы одновременно продвигаете и мобильный. И наоборот. Такой своеобразный индуцированный эффект.

Основные рекомендации по сео оптимизации:

  1. Максимально уменьшите вероятность появления дублированного контента (см. п. 3 недостатков самостоятельной мобильной версии сайта).
  2. Для мобильного сайта создайте ту же структуру, что и для десктопной версии и обязательно сделайте карту сайта (XML Sitemap).
  3. Проверьте HTML-код при помощи эмуляторов.
  4. С каждой страницы сайта для мобильных устройств сделайте ссылку на соответствующую страницу десктопной версии. Только именно на соответствующую, а не на главную.

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

algoritm

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

Для крупных веб-ресурсов необходимо использовать либо способ динамической подстановки контента, либо мобильную версию сайта. Например, крупнейший интернет-магазин Amazon использует мобильную версию, а сайт CNN – динамическую подстановку контента. Выше представлен алгоритм (не бесспорный!) по выбору способа создания сайта для мобильных устройств.

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

seo-mobile

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

1. При помощи сервиса www.google.com/webmasters/tools/mobile-friendly/. Вводите в специальное поле URL страницы и через несколько секунд получаете результат.

google-ok

Этот сайт, по мнению Гугл, оптимизирован под мобильные устройства

google-ne-ok

А этот нет

2. При помощи SE Ranking. Причем имеется два набора инструментов для анализа:

  1. Для оперативного обнаружения ошибок по критериям mobile-friendly по шести критериям:
    • оптимизация для мобильных устройств;
    • наличие заданной области просмотра для мобильных устройств;
    • совместимость плагинов;
    • расположение ссылок;
    • размер шрифта;
    • ширина контентной области.
  2. Практическое руководство для устранения найденных ошибок.

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

Вердикт Google и SE Ranking по сайтам совпадают:

se-ranking-mobile-1

se-ranking-mobile-2

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

  1. Поиск страниц, которые выдают ошибки при сканировании гугловским роботом (Google bot). Выполняется это при помощи сервиса Google Webmaster Tools (Сканирование –> Ошибки сканирования).
  2. Корректность анализа страниц Google bot – Google Webmaster Tools (Сканирование –> Просмотреть как Google bot).
  3. Скорость загрузки страниц (особенно важно для адаптивного сайта). Выполняется при помощи гугловского сервиса Page Speed Insights.

Заключение

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

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on VKPin on Pinterest