Бесплатно по РФ: 8 800 200-55-73

Москва

+7 (499) 677-50-92

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

Автор: Мария Саловарова 27.01.2022

Мобильный поиск

Краткое содержание статьи:

За год доля мобильного трафика в России значительно выросла, сейчас на него приходится уже 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-разметки.

AMP-страницы

Эти технологии ускоренных страниц имеют свои недостатки:

  • Т.к. оформительные возможности ускоренных страниц сильно ограничены, посетители не увидят ваш особенный дизайн, страницы будут похожи на все остальные турбо-страницы других ресурсов.
  • В зависимости от того, как были реализованы страницы, веб-мастеру придётся следить за основным сайтом, Турбо, АМР-страницами.
  • Ускоренная страница располагается на сервере поисковика и имеет соответствующий URL (https://yandex.ru/turbo/vash-site.ru/prochie-parametry).
  • С ускоренных страниц пользователи редко переходят на полную версию сайта, несмотря на наличие на неё ссылки. Также отказы на них значительно выше.

Рекомендаций по оптимизации сайта под мобильные устройства

Сервисы проверки. Для проверки оптимизации сайта для мобильных устройств сначала воспользуйтесь сервисами от поисковиков: «Проверка мобильных страниц» в Яндекс.Вебмастере и «Проверка оптимизации для мобильных» от Google (также есть функционал проверки в Google Search Console). Сделайте проверку для разных страниц вашего сайта, например: главная страница, категория, товар, блог, контакты, т.к. на них могут быть разные результаты.

Проверка мобильных страниц

Проверить, как отображаются страницы сайта на разных мобильных устройствах, можно с помощью разных онлайн-сервисов, например, iloveadaptive.com, adaptivator.ru, mobilemoxie.com.

iloveadaptive

Проверка скорости загрузки. Протестируйте как быстро загружается мобильная версия вашего сайта, например с помощью сервиса PageSpeed Insights от Google. По результатам вы получите большой список доработок, которые можно внедрить на сайте. Например, сервис покажет, какие изображение необходимо уменьшить, какой JS-код можно удалить, какой CSS-код можно уменьшить и пр. Чем быстрее будет загружаться сайт, тем лучше будет продвижение сайта, лояльность аудитории и поведенческие факторы. Также вручную протестируйте, как быстро открывается сайт с разных устройств и с мобильного интернета и интернета через wi-fi.

Шрифты и элементы. Минимальный размер шрифта на мобильном устройстве – 12 пикселей, лучше ориентируйтесь на 14-16 пикселей. Используйте шрифты без засечек, чтобы текст мог легко читаться с мобильного устройства. Также в мобильной версии не должно быть мелких элементов (кнопки, баннеры, поля, фото и пр.), т.к. пользователю должно быть удобно пользоваться вашим сайтом.

Viewport. Чтобы указать браузерам области просмотра контента используйте мета-тег viewport. В большой степени он необходим адаптивным сайтам, но также с помощью него можно улучшить отображение страниц с фиксированной или гибкой разметкой. Без него пользователю придётся двигать изображения и текст вправо и влево, вниз и вверх.

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

Исходный код. На мобильной и основной версии сайта должен совпадать исходный код сайта, а именно: текст, мета-теги, заголовки, HTTP-заголовки (например, canonical, hreflang, vary, expires, last-modified и др.), перелинковка, исходящие ссылки и пр.

Индексация CSS и JS. Стили и скрипты сайта должны быть открыты к индексации поисковыми системами в robots.txt.

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

Анимация должна быть сделана с помощью HTML5, не используйте Flash, Silverlight-плагины, Java-апплеты. Успешность SEO-продвижения сайта в том числе будет зависеть и от того, нет ли на сайте контента, который не воспроизводится. Не должно быть всплывающих элементов, которые перекрывают основной контент сайта. Если такие имеются, их необходимо адаптировать под мобильную версию.

Редирект. Настройте перенаправление. 302-редирект на мобильную версию сайта срабатывает тогда, когда при заходе на сайт при помощи смартфона определяется User-Agent устройства. Сделать редирект можно разными способами: через php или js-код, через редирект в .htaccess.

В один клик. Сделайте на всём сайте номера телефонов и адреса электронной почты кликабельными, чтобы посетитель мог при нажатии на него без труда позвонить вам или написать. Для телефонов используйте протокол tel, для электронной почты mailto. Также полезно будет разместить кликабельные номера для связи в Whatsapp и Telegram. В дополнении этого всего на сайт можно внедрить геоссылки для адресов. При нажатии на адрес, всплывает карта проезда. Делается это с помощью API Яндекс.Карт и обворачивания нужного текста в HTML-элемент с CSS-классом «ymaps-geolink».

геоссылка

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

Данные по статистике с мобильных устройств

В Яндекс.Метрике статистику с мобильных устройств можно посмотреть в «Отчеты» -> «Технологии» -> «Устройства». В этом отчете отображаются данные по 4-м видам устройств: «Смартфоны», «Планшеты», «ПК» и «ТВ» и по ним можно проанализировать разные показатели: визиты, посетители, отказы и и.т.д.

Яндекс.Метрика

В Google Аналитике данные находятся в «Аудитория» -> «Мобильные устройства» -> «Обзор» с информацией по разным показателям: пользователи, сеансы, отказы и пр. Данные предоставляются по компьютерам, смартфонам и планшетам. Чтобы детально посмотреть, с каких именно устройств пришли пользователи, необходимо перейти в следующий раздел «Устройства».

Google Аналитика

Позиции в мобильной выдаче

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

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

Позиции в Топвизоре

Проведите анализ позиций десктопной и мобильной версии и сравните их, например, это можно сделать через Топвизор. Если между ними есть большие различия, проверьте, точно ли все указания поисковых систем по оптимизации мобильной версии сайта вы выполнили – возможно, вы что-то упустили. Также можно посмотреть, как ведёт себя пользователь на мобильной версии вашего сайта через Вебвизор в Яндекс.Метрике (В настройках столбцов включите «Тип устройства»). Выберите те посещения, которые имели плохие показатели и просмотрите записи, возможно в них вы найдёте недочёты вашего сайта.

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

Автор: Мария Саловарова