заказать звонок
+38 (044) 358-48-00
заказать звонок
Starting a new project?
получить консультацию
Читайте наш Telegram 👈
334
4

По данным ресурса Statcounter, за последний год мобильным поиском пользуются на 8-10% больше, чем десктопным – 55% и 44% (данные за ноябрь 2021). И так как распространение мобильных и их возможности со временем увеличиваются, когда-нибудь показатель будет близок к 100%.

Адаптация сайта под мобильный

Рис. 1 – Статистика со Statcounter

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

Когда Google заметил этот тренд, сразу начал подталкивать веб-сайты к адаптации своих ресурсов под маленькие экраны портативных звонилок. И в июле 2019 года перешел на индексацию с приоритетом мобильного контента. Таким образом, место в поисковой выдаче теперь определяет мобильная версия: ее удобность, скорость загрузки и релевантность содержимого.

Действует это правило как для новых или недавно добавленных в индекс ресурсов, так и для сайтов, созданных ранее. Если вас переводят на такой тип индексации, то вы получите уведомление в Search Console.

Адаптация сайта под мобильный

Рис. 2 – Примеры неоптимизированных страниц

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

Вторая причина – удобство. Без привязки к ПК любой сможет посетить сайт и найти нужную информацию через маленький экран мобильного. Где бы пользователь ни находился.


1. Требования Google к сайтам

Чтобы ваш сайт был удобен в использовании, Google дает такие рекомендации для мобильной версии ресурса (для тех, что ранжируются с приоритетом на мобильный контент).

  • на обеих версиях должны быть одни и те же метатеги и robots.txt;
  • не стоит внедрять отложенную загрузку (загрузка элемента после определенного действия);
  • на всех версиях ресурса должен быть одинаковый контент;
  • проверьте структурированные данные (они должны присутствовать на обеих версиях);
  • следуйте рекомендациям об изображениях и видео;
  • разрешить доступ к файлам CSS, JavaScript – от них зависит отображение страниц;
  • не используйте Flash-элементы, большинство смартфонов их не поддерживают.

2. Требования со стороны пользователей

Вы же будете оптимизировать сайт под мобильные устройства для людей?
Поэтому ловите список требований со стороны юзеров, то есть те аспекты, которые помогут вам не потерять трафик, а увеличить его:

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

Красота, удобство и скорость – вот что требуют пользователи от мобильного сайта сегодня.


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

Для реализации мобильной версии сайта можно воспользоваться одним из 2-х способов:

  1. Создать отдельную мобильную версию (на поддомене).
  2. Использовать адаптивную верстку.

Разберем каждый пункт подробнее.


3.1 Отдельная мобильная версия

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

Адаптация сайта под мобильный поиск

Рис. 3 – Мобильные версии сайтов в поиске

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

Оптимизация мобильной версии сайта осуществляется отдельно, а по общему дизайну она должна заимствовать элементы или полностью копировать внешний вид материнского ресурса (для узнаваемости).
Помимо указанных недостатков, обе версии могут конфликтовать между собой. Чтобы избежать этого, используйте теги canonical и alternate. Они помогут устранить дубли страниц.

На основном сайте в теге alternate нужно указать ссылку на мобильную версию страницы, таким образом связываются страницы мобильной и основной версии.
А тег canonical размещается как раз на мобильной версии с указанием основной версии страницы.

Но Google не рекомендует создавать новую версию, а советует пользоваться адаптивной версткой. При этом, старым сайтам легче заморочиться с созданием отдельной мобильной версии. Потому что делать адаптивную — значит практически создавать сайт с нуля. Хотя, с точки зрения SEO, более перспективно.


3.2 Адаптивная верстка

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

С другой стороны, это удобно из-за того, что все популярные CMS-системы предлагают адаптивные шаблоны. Поэтому адаптировать сайт под мобильные устройства можно онлайн.

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

Адаптация сайта под мобильный адаптивная верстка

Рис. 4 – Адаптивная верстка

Преимущества Недостатки
  • url не меняется;
  • правильно отображается на всех устройствах;
  • рекомендуемый Google’ом формат;
  • быстрая реализация.
  • может урезаться доступная информация;
  • перейти на полную версию невозможно;
  • долго загружает тяжелые элементы.

С одной стороны, данное решение быстрое и удобное, но оно не лишено недостатков.
Поэтому для стабильности и роста удобства можно воспользоваться этими советами:

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

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


3.3 Использование AMP-страниц

Подробно о том, что такое AMP, какие ограничения и преимущества этот формат дает, писали в статье Что такое AMP-страницы.
Здесь упомяну, что несмотря на скорость загрузки и приоритет в ранжировании, такой способ ускорения сильно бьет по функциональности. Как пример, картинки должны иметь заданный размер, на сайте может отсутствовать функция комментирования, невозможно внедрить динамические элементы, и т. п..

Если для вас функционал очень важен, то лучше вообще не прибегать к AMP.


4. Как создать мобильную версию?

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

А если заняться этим самостоятельно, то результат можно получить с помощью следующих инструментов:

  • конструкторы. Это веб-сайты, на которых каждый может собрать свой собственный проект как кубик Рубика, выбирая блоки и темы оформления (или используя готовый шаблон) – Creambee, MoAction, Mobify и др.. Несмотря на то, что некоторые решения платные, общие затраты все равно будут ниже, чем при сотрудничестве с разработчиком;
  • CMS-плагины. Например, WPtouch, AMP for WP и др.. Плагины позволяют быстро создать мобильную версию, просто задав нужные настройки;
  • адаптивные темы. Как и плагины, они работают только с CMS. С их помощью основной сайт приобретает адаптивный дизайн, то есть может подстраиваться под различные экраны устройств.

5. Каким типам ресурсов нужна мобильная версия?

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

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

Мобильная версия даст вам преимущество в таких сферах:

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

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


6. Как проверить, оптимизирована ли страница под просмотр на мобильных?

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

Адаптация сайта под мобильный Google Search Console

Рис. 5 – Результат проверки

Если следите за работой своего веб-сайта через Search Console, то там есть отчет об удобстве пользования на мобильных.

Он покажет, на каких страницах присутствуют проблемы:

Адаптация сайта под мобильный

Рис. 6 – Search Console

В Хроме есть эмулятор, который поможет проверить, как сайт будет выглядеть на мобильных с помощью Chrome DevTools.

Или же сайт Responsinator – ввел адрес и смотришь, как твой сайт выглядит на мобильных. Очень удобно.

Google Search Console

Рис. 7 – Эмулировка отрисовки мобильной версии ITForce

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

Рекомендация от ITForce: С точки зрения продвижения в поиске лучше использовать адаптивный дизайн, т. к. это один сайт. То есть вы будете получать по нему одну статистику.
За мобильной версией же нужен постоянный контроль + это двойная работа (внедрять новые опции придется сразу на 2 ресурса отдельно).

Наше мнение – мобильные версии в будущем перестанут использоваться и останется только адаптивный дизайн.


Расширенный сниппет. Как создать?

Как сделать украинскую версию сайта по умолчанию и при этом не потерять имеющийся трафик?

Google May 2022 Core Update

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

Вы уже подписаны на нашу рассылку!

Подтвердите свой Email для завершения подписки.

Заказать
продвижение
Больше полезных статей и мануалов еще впереди. Будьте в курсе!

Спасибо! Скоро с Вами свяжется наш менеджер.