Mobile-Friendly сайты: на что обратить внимание при оптимизации

Mobile-Friendly — это алгоритм Google, который оценивает, насколько сайт удобен в использовании с мобильных устройств. Он существует с 2015 года, в 2016 похожий алгоритм «Владивосток» появился у Яндекса.

В этой статье мы разберем, как сделать сайт по-настоящему дружелюбным для пользователей смартфонов.

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

https://www.similarweb.com/ru/platforms/

Большинство пользователей обращаются к интернет-поисковикам на ходу — через смартфоны и планшеты, а не ПК. Поэтому конверсия сайта напрямую зависит от того, насколько удобна для посетителей его мобильная версия.

Существует три способа сделать сайт дружелюбным для мобильных ОС.

Этот способ рекомендуют специалисты Google и Яндекса как самый простой.

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

Тип устройства определяется с помощью серверных скриптов. Затем гаджет получает соответствующий HTML-код.

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

Речь идет о страницах с отдельными URL-адресами для мобильной версии. Чаще всего они располагаются на поддоменах M.

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

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

https://www.seobility.net/en/wiki/Viewport

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

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

Кроме тега Viewport следует задать максимальную ширину изображений. Это также позволит избежать горизонтального скроллинга.

Если изображение окажется слишком широким для экрана, даже при правильно заданном теге Viewport весь макет страницы может сдвинуться в отсутствие параметров максимальной ширины. Поэтому для изображений стоит указывать тег Max-width 100%. Он не позволит изображению превысить ширину родительского блока, в котором оно размещено.

Шрифт должен быть удобным для чтения с мобильного устройства. Рекомендуемый минимальный размер основного текста у Google и Яндекса отличаются. Яндекс считает допустимым шрифт в 12 пикселей по высоте, Google в своем руководстве Material Design рекомендует 16 пикселей.

https://m3.material.io/components/menus/guidelines

Речь идет о ссылках в боковом меню, шапке, футере или оглавлении.

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

Эта рекомендация актуальна как для мобильной, так и для десктопной версии сайта.

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

Google всегда учитывает «рекомендации», прописанные в robots.txt. Поэтому важно вручную проверять, какие элементы закрыты от индексации, а какие — нет.

Желательно открыть CSS-файлы, JS-файлы и файлы стилей. Потому что, если при оценке Mobile-Friendly они будут закрыты от сканирования, сайт пройдет проверку, но результаты будут некорректными.

Такие разделы, как «Часто задаваемые вопросы», желательно раскрывать по умолчанию. Потому что информация, скрытая за табом и требующая дополнительного клика, не попадет в сниппеты. Следовательно, юзер не получит быстрого ответа на свой вопрос.

Фавикон — это значок, логотип, расположенный перед названием веб-страницы во вкладке браузера. Для мобильных версий их желательно размещать на всех разделах сайта.

Это единственный оптимальный вариант мобильной оптимизации для AMP-страницы.

Динамический показ и мобильная версия на отдельном поддомене недопустимы, поскольку поисковик кэширует содержимое AMP-страниц и показывает пользователю то, что закэшировано, независимо от типа устройства. То есть, если краулер увидел на AMP-странице отдельную мобильную версию, именно ее он будет показывать посетителю, даже если тот зайдет с десктопа.

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

Также стоит самостоятельно проверять все страницы, которые не индексируются поисковиком, например:

Следует также обратить внимание на следующие моменты.

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

https://observer-msk.ru/catalog/teleskopy/

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

Ее актуальность зависит от тематики и объема публикуемого на странице контента.

Если материал занимает больше 5-6 экранов, на сайте нужна кнопка «Вверх». Ее следует интегрировать примерно после пятого экрана. Но если речь идет о коротких статьях или постах в блоге, такая кнопка вряд ли будет актуальна. Дело в том, что современные мобильные устройства поддерживают функцию инертного скроллинга: прокрутка контента продолжается какое-то время, после того как пользователь убрал палец с экрана.

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

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

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

Рациональным решением будет постраничная пагинация или кнопка «Загрузить еще» внизу страницы.

Для корректного отображения страниц и улучшения UX стоит максимально упростить все формы ввода.

Для начала нужно минимизировать количество полей. Мобильный пользователь вряд ли будет заполнять форму, состоящую из 10 строк. Следует оставить самые необходимые — имя, номер телефона, почту.

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

Google рекомендует подписывать все поля формы, независимо от того, остаются они пустыми или уже заполнены.

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

https://www.mvideo.ru/products/kofemolka-redmond-rcg-m1608-20055284

На любой странице сайта пользователь должен видеть кнопку, которая позволит ему совершить нужное для конверсии действие, например, «Купить», «Заказать звонок», «Зарегистрироваться». Посетитель в любой момент может «дозреть» до совершения действия, и благодаря «липкой» кнопке ему не придется возвращаться на предыдущую страницу или скроллить сайт на несколько экранов вперёд.

При создании Mobile-Friendly сайта нужно учитывать множество факторов: от метода реализации (адаптивный дизайн, динамический показ, мобильная версия) до малейших нюансов, например, корректного отражения форм для заполнения.

Также важно помнить не только о SEO-стратегии, но и о пользовательском опыте. Только принимая в расчет все аспекты, можно существенно улучшить конверсию.