За год доля мобильного трафика в России значительно выросла, сейчас на него приходится уже 81% от общего трафика (в январе 2021 было около 77%). Прогнозируется, что рост немного замедлится, но не прекратится. Использование мобильных устройств для общения и поиска информации из Интернета пользователями будет происходить всё чаще, т.к. смартфоны становятся всё доступнее. Это нужно принимать во внимание каждому бизнесу, который планирует продавать свои товары и предлагать услуги онлайн. Конечно, в зависимости от ниши, доля мобильного трафика разная, например, если вы предлагаете сложное техническое оборудование, то десктопный трафик может превалировать.
Мобильным трафиком считаются переходы на ресурс со смартфонов или планшетов. Привлечь такой трафик можно с мобильной выдачи поисковых систем. Десктопная и мобильная выдачи различаются, в ней могут отсутствовать или присутствовать разные блоки, реклама, по-разному выдаваться результаты сайтов. Если по определенным запросам ваш сайт находится в ТОП-10 на десктопной выдаче, то совсем не обязательно, что на мобильной выдаче будет тоже самое, про это мы поговорим ниже. Есть отличия и в особенностях поиска информации пользователем через мобильные устройства, например, поисковые запросы могут вводиться не только ручным способом, но и голосовым, а сами запросы также могут отличаться.
Почему SEO-оптимизация под мобильные устройства необходима? Потому что Яндекс официально заявил, что мобилопригодность является фактором ранжирования, а в Google есть алгоритм Mobile-First Index, который в первую очередь оценивает мобильную версию сайта и на основе неё формирует выдачу на десктопе и мобайле.
Есть несколько вариантов оптимизации сайта под мобильные устройства. Далее рассмотрим их.
Адаптивный дизайн
Адаптивный дизайн позволяет правильно отображать страницы ресурса на любых устройствах с разным размером экрана. Такое корректное отображение содержимого страниц на ПК, смартфонах, планшетах, ноутбуках необходимо для того, чтобы сайт был удобным для всех.
Разработка адаптивной вёрстки может быть трудоёмка, но многие CMS имеют готовые шаблоны, которые адаптированы под мобильные устройства. Адаптивная вёрстка дешевле разработки мобильной версии, и более универсальна. Нет необходимости создавать дополнительный сайт, как в случае с мобильной версией, о ней мы тоже поговорим.
Для SEO адаптивный дизайн положителен тем, что у страницы десктопной и мобильной версии будет один и тот же адрес. Контент размещается один раз и корректно отображается на всех устройствах. Размер кода вёрстки может сказаться на индексировании и ранжировании сайта, но все зависит от реализации. На некоторых телефонах адаптивная версия сайта может загружаться достаточно медленно.
Мобильная версия
Мобильная версия – это отдельный сайт, который разрабатывается под мобильные устройства с нуля. Может располагаться на другом домене или поддомене, например, m.site.ru. Помимо отдельного url-адреса, у мобильной версии отличается и HTML-код, из-за этого оптимизировать, поддерживать и контролировать придётся в 2 раза больше страниц. Чтобы сообщить поисковым роботам о том, что у сайта есть мобильная версия, необходимо в коде основного сайта указать ссылку с атрибутом alternate (на мобильной версии тоже можно указать ссылки на основной сайт, но через атрибут canonical). При правильной разработке мобильная версия будет быстро грузиться.
Несмотря на эти плюсы и минусы, Google не рекомендует использовать мобильную версию сайта, так как часто появляются ошибки, как со стороны индексации поисковых систем, так и со стороны взаимодействия пользователей с ней.
Динамический показ
При динамическом показе сначала определяется с какого типа устройства и экрана зашёл пользователь и в зависимости от этого ему отдается определенный HTML-код. Десктопная и мобильная версия будут иметь одинаковый url, но, как мы уже написали, код у версий будет отличаться, поэтому поддерживать и контролировать придётся в 2 раза больше.
Для корректного отображения мобильной версии при динамическом показе рекомендуется указывать HTTP-заголовок Vary, при обнаружении мобильного контента он сообщит, что страницу дополнительно необходимо просканировать с помощью Googlebot для смартфонов. Также он поможет правильно отобразить десктопную версию на ПК, а мобильную на смартфоне, не перепутав их.
Благодаря данной технологии можно сильно ускорить мобильную версию сайта, а поисковые роботы смогут быстро индексировать её. Но динамический показ сложен в реализации, а еще может повлечь большое количество технических ошибок.
AMP и Турбо-страницы
Яндекс и Google создали технологии, позволяющие создавать легкие версии страниц сайта, которые быстро грузятся на мобильных устройствах. Яндекс – Турбо-cтраницы, Google – AMP-страницы.
Турбо-страницы хранятся и формируются на стороне Яндекса, с помощью загруженного вами RSS или YML источника. При создании страниц можно настроить многоуровневое меню, пользовательские блоки, динамические формы, строки навигации, комментарии, галерею картинок и многое другое. Для простого внедрения турбо-страниц существует большое количество плагинов для разных CMS. На Турбо-страницы можно попасть только из сервисов Яндекса, например из результатов Поиска или ленты Дзена.
Функционал настройки и добавления источника данных находится в Яндекс.Вебмастере.
AMP-страницы (Accelerated Mobile Pages) могут храниться как на стороне Google, так и на стороне владельца сайта. Они выглядят как сокращенные версии обычных страниц вашего сайта. На AMP располагается только основной контент, а разные элементы, виджеты, блоки убираются. Чтобы ускоренные страницы быстро загружались, Google их кеширует.
Такие страницы состоят из HTML-разметки со специальными тегами и JavaScript. Также как и Турбо-страницы, AMP урезаны в функционале и дизайне.
В мобильных результатах поисковой выдачи Google AMP-страницы отображаются в формате карусели, при этом просмотр контента страницы происходит непосредственно на странице выдачи и ваш сайт теряет трафик.
Плагины для создания AMP существует для небольшого количества CMS, а самостоятельное внедрение ускоренных страниц потребует понимания HTML-разметки.
Эти технологии ускоренных страниц имеют свои недостатки:
- Т.к. оформительные возможности ускоренных страниц сильно ограничены, посетители не увидят ваш особенный дизайн, страницы будут похожи на все остальные турбо-страницы других ресурсов.
- В зависимости от того, как были реализованы страницы, веб-мастеру придётся следить за основным сайтом, Турбо, АМР-страницами.
- Ускоренная страница располагается на сервере поисковика и имеет соответствующий URL (https://yandex.ru/turbo/vash-site.ru/prochie-parametry).
- С ускоренных страниц пользователи редко переходят на полную версию сайта, несмотря на наличие на неё ссылки. Также отказы на них значительно выше.
Рекомендаций по оптимизации сайта под мобильные устройства
Сервисы проверки. Для проверки оптимизации сайта для мобильных устройств сначала воспользуйтесь сервисами от поисковиков: «Проверка мобильных страниц» в Яндекс.Вебмастере и «Проверка оптимизации для мобильных» от Google (также есть функционал проверки в Google Search Console). Сделайте проверку для разных страниц вашего сайта, например: главная страница, категория, товар, блог, контакты, т.к. на них могут быть разные результаты.
Проверить, как отображаются страницы сайта на разных мобильных устройствах, можно с помощью разных онлайн-сервисов, например, iloveadaptive.com, adaptivator.ru, mobilemoxie.com.
Проверка скорости загрузки. Протестируйте как быстро загружается мобильная версия вашего сайта, например с помощью сервиса PageSpeed Insights от Google. По результатам вы получите большой список доработок, которые можно внедрить на сайте. Например, сервис покажет, какие изображение необходимо уменьшить, какой JS-код можно удалить, какой CSS-код можно уменьшить и пр. Чем быстрее будет загружаться сайт, тем лучше будет продвижение сайта, лояльность аудитории и поведенческие факторы. Также вручную протестируйте, как быстро открывается сайт с разных устройств и с мобильного интернета и интернета через wi-fi.
Шрифты и элементы. Минимальный размер шрифта на мобильном устройстве – 12 пикселей, лучше ориентируйтесь на 14-16 пикселей. Используйте шрифты без засечек, чтобы текст мог легко читаться с мобильного устройства. Также в мобильной версии не должно быть мелких элементов (кнопки, баннеры, поля, фото и пр.), т.к. пользователю должно быть удобно пользоваться вашим сайтом.
Viewport. Чтобы указать браузерам области просмотра контента используйте мета-тег viewport. В большой степени он необходим адаптивным сайтам, но также с помощью него можно улучшить отображение страниц с фиксированной или гибкой разметкой. Без него пользователю придётся двигать изображения и текст вправо и влево, вниз и вверх.
Вертикальная и горизонтальная прокрутка. В контейнерах, на блоках, таблицах нежелательно наличие горизонтальной или вертикальной прокрутки, т.к. это усложняет пользователю взаимодействие с сайтом.
...
Окончание статьи «Оптимизация сайта для мобильных устройств» в нашем блоге: https://business-online.su/blog/optimizaciya-sayta-dlya-mobilnyh-ustroystv/
...