Мобильная верстка сайта

Число пользователей мобильного интернета растет.

По данным Datareportal на начало 2024 года 130,4 миллиона человек активно пользуются Интернетом. В 2024 году российские пользователи проводят в Интернете 8 часов 21 минуту в день.

В России большинство людей предпочитают пользоваться мобильными устройствами для выхода в Интернет. Доля веб-трафика с мобильных устройств в 2024 году составила 42,30% (выросла на 10,6%).

Если пользователи попадают на сайт, который не адаптирован под мобильную версию или планшет, то они могут столкнуться с проблемами:

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

В итоге пользователь уйдет с неудобного сайта.

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

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

Перечислим основные принципы:

1. Удобство и простота сайта.

Для мобильной версии действует принцип «чем сайт проще, тем эффективнее». На удобном сайте посетитель без особых трудностей находит информацию или совершает целевые действия (оформляет заказ, рассчитывает кредит, узнает условия доставки и т. д.).

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


2. Единообразие дизайна для всех устройств.

Для выполнения этого принципа удобнее всего изначально использовать на сайте адаптивный веб-дизайн.

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

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

Если на вашем сайте в файле robots.txt закрыт доступ к JavaScript, CSS и графическим файлам, то данные не будут проиндексированы поисковой системой. От этого позиций сайта в выдаче будут низкими.

Для проверки доступности следует воспользоваться инструментом проверки URL в Google Search Console — с его помощью вы сможете найти и исправить ошибки индексирования сайта.

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

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

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

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

Список типичных ошибок переадресации:

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

Чтобы избежать ошибок, выполните следующие действия:

• используйте Google Search Console (сервис, с помощью которого можно отслеживать, как сайт представлен в результатах поиска Google). Это позволит получать уведомления об ошибках (например, что пользователи мобильной версии перенаправляются на главную страницу сайта вместо нужной);
• если мобильная версия сайта находится на отдельном поддомене или разных URL, проверьте, корректно ли настроена переадресация. Страницы должны вести на аналогичные в мобильной версии;
• если в мобильной версии сайта нет каких-то страниц, то откажитесь от переадресации для них с декстопной версии.

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

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

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

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

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

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

Чтобы сайт правильно отображался на экранах разных размеров, корректно настройте область просмотра с помощью метатега viewport, который сообщает, как правильно изменить размеры элементов страницы.

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

Иначе:

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

В мобильной версии сайта не используйте слишком мелкий шрифт. Рекомендуемый базовый размер шрифта — 16 пикселей в CSS (или 16 px). После того, как вы настроете область просмотра, определите размеры шрифтов, чтобы они корректно отображались.

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

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

1. Проверьте, что у Googlebot есть доступ к файлам JavaScript, CSS и графическим файлам. Используйте инструмент проверки URL в Google Search Console. С его помощью можно найти и исправить ошибки в индексировании сайта.

2. Проверьте файл robots.txt в Google Search Console.

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

4. В случае, если вы используете отдельные мобильные версии страниц, проверьте их корректность переадресации.