По данным ресурса Statcounter, за последний год мобильным поиском пользуются на 8-10% больше, чем десктопным – 55% и 44% (данные за ноябрь 2021). И так как распространение мобильных и их возможности со временем увеличиваются, когда-нибудь показатель будет близок к 100%.
Рис. 1 – Статистика со Statcounter
Тенденция перехода к мобильным телефонам для серфинга в интернете, и, главное, для покупок, заставила сайты разрабатывать собственные мобильные версии. Потому что потерять жирный кусок пользователей-клиентов не хочется никому.
Когда Google заметил этот тренд, сразу начал подталкивать веб-сайты к адаптации своих ресурсов под маленькие экраны портативных звонилок. И в июле 2019 года перешел на индексацию с приоритетом мобильного контента. Таким образом, место в поисковой выдаче теперь определяет мобильная версия: ее удобность, скорость загрузки и релевантность содержимого.
Действует это правило как для новых или недавно добавленных в индекс ресурсов, так и для сайтов, созданных ранее. Если вас переводят на такой тип индексации, то вы получите уведомление в Search Console.
Рис. 2 – Примеры неоптимизированных страниц
Но трафик – это только одна из причин, чтобы адаптировать сайт под мобильные устройства.
Вторая причина – удобство. Без привязки к ПК любой сможет посетить сайт и найти нужную информацию через маленький экран мобильного. Где бы пользователь ни находился.
Чтобы ваш сайт был удобен в использовании, Google дает такие рекомендации для мобильной версии ресурса (для тех, что ранжируются с приоритетом на мобильный контент).
Вы же будете оптимизировать сайт под мобильные устройства для людей?
Поэтому ловите список требований со стороны юзеров, то есть те аспекты, которые помогут вам не потерять трафик, а увеличить его:
Красота, удобство и скорость – вот что требуют пользователи от мобильного сайта сегодня.
Для реализации мобильной версии сайта можно воспользоваться одним из 2-х способов:
Разберем каждый пункт подробнее.
По сути – это еще один сайт, оптимизированный под показ и взаимодействие только с мобильными и планшетами. В адресе сайта перед его названием через точку указывается m или mobile.
Рис. 3 – Мобильные версии сайтов в поиске
| Преимущества | Недостатки |
|
|
Оптимизация мобильной версии сайта осуществляется отдельно, а по общему дизайну она должна заимствовать элементы или полностью копировать внешний вид материнского ресурса (для узнаваемости).
Помимо указанных недостатков, обе версии могут конфликтовать между собой. Чтобы избежать этого, используйте теги canonical и alternate. Они помогут устранить дубли страниц.
На основном сайте в теге alternate нужно указать ссылку на мобильную версию страницы, таким образом связываются страницы мобильной и основной версии.
А тег canonical размещается как раз на мобильной версии с указанием основной версии страницы.
Но Google не рекомендует создавать новую версию, а советует пользоваться адаптивной версткой. При этом, старым сайтам легче заморочиться с созданием отдельной мобильной версии. Потому что делать адаптивную – значит практически создавать сайт с нуля. Хотя, с точки зрения SEO, более перспективно.
Этот термин означает, что все элементы вашего ресурса будут менять размер в зависимости от девайса, с которого происходит просмотр. Адаптация не урезает функции и может быть перегруженной, потому что на мелких экранах навигация будет сложнее, что навредит поведенческим факторам.
С другой стороны, это удобно из-за того, что все популярные CMS-системы предлагают адаптивные шаблоны. Поэтому адаптировать сайт под мобильные устройства можно онлайн.
Это значит, десктопный сайт автоматически будет ужиматься под нужные размеры без серьезного участия разработчика. Хотя, если сайт создается вручную, вам придется задавать возможность масштабирования тоже вручную.
Рис. 4 – Адаптивная верстка
| Преимущества | Недостатки |
|
|
С одной стороны, данное решение быстрое и удобное, но оно не лишено недостатков.
Поэтому для стабильности и роста удобства можно воспользоваться этими советами:
Если сайт пишется вручную, то придется для каждого элемента задавать параметры, которые помогут элементам менять свое местоположение и размер в зависимости от ширины и высоты дисплея. В итоге результат может не устроить вас, поэтому подумайте, какой из двух вариантов для вас целесообразнее.
Подробно о том, что такое AMP, какие ограничения и преимущества этот формат дает, писали в статье Что такое AMP-страницы.
Здесь упомяну, что несмотря на скорость загрузки и приоритет в ранжировании, такой способ ускорения сильно бьет по функциональности. Как пример, картинки должны иметь заданный размер, на сайте может отсутствовать функция комментирования, невозможно внедрить динамические элементы, и т. п..
Если для вас функционал очень важен, то лучше вообще не прибегать к AMP.
За отдельную плату задачу оптимизации для мобильных можно доверить программисту.
А если заняться этим самостоятельно, то результат можно получить с помощью следующих инструментов:
Несмотря на то, что адаптированный под мобильные сайт помогает привлекать дополнительный трафик, не всем отраслям он необходим.
Например, при выборе недвижимости пользоваться телефоном будет просто неудобно – чтобы рассмотреть картинки и планировку здания, понадобится большой экран. Поэтому далеко не каждый сайт имеет рабочий аналог для маленьких дисплеев.
Мобильная версия даст вам преимущество в таких сферах:
Как бы ни было, о создании адаптированного аналога основного ресурса подумать нужно уже сейчас. Даже если вам кажется, что мобильная версия вашему бизнесу не нужна.
Если вы уже создали оптимизированную под телефон версию сайта, то сразу же проведите проверку оптимизации для мобильных в инструменте от Google. Он покажет, насколько она удобна, и в чем ошибки верстки.
Рис. 5 – Результат проверки
Если следите за работой своего веб-сайта через Search Console, то там есть отчет об удобстве пользования на мобильных.
Он покажет, на каких страницах присутствуют проблемы:
Рис. 6 – Search Console
В Хроме есть эмулятор, который поможет проверить, как сайт будет выглядеть на мобильных с помощью Chrome DevTools.
Или же сайт Responsinator – ввел адрес и смотришь, как твой сайт выглядит на мобильных. Очень удобно.
Рис. 7 – Эмулировка отрисовки мобильной версии ITForce
Проверка после адаптации существующей верстки или создания отдельного мобильного сайта обязательна. Она поможет откорректировать ошибки и визуал, чтобы вашей аудитории тоже понравился результат.
Рекомендация от ITForce: С точки зрения продвижения в поиске лучше использовать адаптивный дизайн, т. к. это один сайт. То есть вы будете получать по нему одну статистику.
За мобильной версией же нужен постоянный контроль + это двойная работа (внедрять новые опции придется сразу на 2 ресурса отдельно).
Наше мнение – мобильные версии в будущем перестанут использоваться и останется только адаптивный дизайн.
