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

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

Что такое мобильная оптимизация?

Мобильная SEO – это оптимизация веб-сайта для мобильных поисковых систем, то есть оптимизация для посетителей, использующих мобильные устройства, планшеты, смартфоны и т.д. для доступа к вашему ресурсу. Целью мобильной поисковой оптимизации является удобство пользования сайтом для мобильных посетителей независимо от операционной системы устройства, размера или разрешения экрана или скорости Интернет-соединения.

Почему так важно сделать сайт удобным для мобильных устройств?

Владельцы веб-ресурсов должны понимать, что неоптимизированный для мобильных пользователей сайт будет терять посетителей вместе с рейтингом поисковых систем. Начиная с 2015 года, когда Google запустил обновление для мобильных устройств, он последовательно придает приоритет именно мобильному поиску – mobile-first индекс. На сегодняшний день более 70% ресурсов привлечены к индексу mobile-first, проверить свой сайт можно в Google Search Console – “Настройки -> Поисковый робот”

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

Как выбрать мобильное решение для сайта?

• Мобильная версия сайта использует отдельные URL или отдельный поддомен для мобильной версии страниц (site.com/mobile/page-n, m.site.com/page-n). Скорее всего, это урезанная версия основного сайта с ограниченным функционалом. Она предлагает более подходящую для мобильного использования навигацию и содержит меньше контента, чем десктопная. Такая конфигурация не так популярна, как раньше. не рекомендуется Google.
• Мобильное приложение сайта – приложение под соответствующую мобильную платформу (iOS, Android), может быть дополнять сайт или быть самостоятельным решением. Разработка и использование мобильного приложения уместно не для каждого сайта (бизнеса). Для сайта электронной коммерции или сервиса доставки мобильное приложение может улучшить удобство использования мобильных посещений. Для информационного сайта разработка и использование mobile application не будет оптимальным решением.
• Адаптивный дизайн (Responsive design) сайта – автоматически адаптируется под параметры того устройства, с которого осуществляется вход. При такой конфигурации сервер отвечает разным HTML (и CSS) на один и тот же URL-адрес в зависимости от того, какой агент пользователя запрашивает страницу (мобильный, планшетный или настольный).

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

1. оптимизацию CSS и настройку медиазапросов;
2. настройка области просмотра с помощью специальных метатегов;
3. оптимизацию используемых плагинов.

Как проверить, оптимизирован ли ваш сайт для мобильных устройств?

Проверьте распространенные проблемы на мобильных устройствах с помощью Google Search Console на вкладке «Удобство для мобильных»

Вы также можете проверить оптимизацию страниц вашего сайта для мобильных устройств с помощью Google Mobile-Friendly Test

Проверьте скорость страницы на мобильном устройстве. Вы можете использовать Google PageSpeed ​​Insights, введите URL-адрес страницы, который вы хотите проверить, и дождитесь завершения анализа. Прокрутите вниз в раздел “Возможности” и ознакомьтесь с предложениями, которые помогут улучшить скорость вашего сайта.

Как сделать свой сайт мобильным?

На что обратить внимание, чтобы сделать сайт удобным для пользователей мобильных устройств и поисковых систем?

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

Скорость загрузки вашего сайта на мобильных девайсах имеет решающее значение, если вы хотите усовершенствовать мобильное SEO:

• Проверьте время отклика вашего сервера
• Избегайте Flash – вместо этого используйте HTML5
• Не используйте слишком много плагинов
• Сделайте ваши изображения удобными для мобильных устройств
• Включите веб-кэширование
• Зарегистрируйтесь в сети доставки контента CDN
• Проверьте свой код HTML, CSS и JavaScript
• Используйте меньше редиректов

Разрешить Google сканировать все – проверьте файл robots.txt на блокировку Javascript, CSS, изображений и других важных частей кода вашего сайта для компьютеров и мобильных устройств.

Работайте над UI и UX вашего мобильного сайта

Грамотно используйте метатег Mind Viewport – тег «Viewport Content» сообщает браузерам, как обрабатывать размеры и масштаб вашей веб-страницы на разных устройствах.

Улучшайте читабельность – используйте простые четкие шрифты размером не менее 14 пикселей. Убедитесь, что между текстом и фоном достаточно контраста, чтобы избежать проблем с читаемостью в проблемном окружении.

Используйте “удобный для большого пальца” подход – Google рекомендует минимальный размер цели касания примерно 7 мм или 48 пикселей CSS с минимальным расстоянием между элементами не менее 8 пикселей.

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

Следите за призывами к действию (CTA) – всегда размещайте призывы к действию на своих целевых страницах в верхней части страницы для мобильных пользователей, никогда не позволяйте не очень важным баннерам накладываться на CTA.

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

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

Реализовать разметку Schema

Сайты с правильно структурированной разметкой schema лучше интерпретируются Google и обычно занимают высокие места в результатах поиска Google.

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

Александр Романенко

Team Lead/Senior SEO-специалист

Страница автора