SEO

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

Почитать позже
Наши продукты помогут вашему бизнесу оптимизировать расходы на маркетинг

Как адаптивность связана с SEO

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

Если страница плохо отображается на мобильном (шрифт экстремально мелкий, изображения выходят за границы экрана, кнопки маленькие), Google и Яндекс проявят заботу о людях — не отправят сайт в на верхние позиции, даже если контент на нем идеальный.

Mobile-friendly Google (мобайл френдли Гугл) — алгоритм, учитывающий удобство просмотра страницы на смартфонах. Он появился в 2015 году. А в 2020-м Google объявил о планах внедрения Mobile First — алгоритма, который понижает сайты, не адаптированные под мобильные устройства, даже в десктопном поиске.

Яндекс еще в 2016 году официально признал, что оптимизация сайта под мобильные устройства — один из важных факторов ранжирования. Алгоритм получил название «Владивосток» — в честь города с огромной мобильной аудиторией.

Слабая оптимизация сайта для телефона влияет и на поведенческие факторы. Если страница неудобная — растет процент отказов, падают время и глубина просмотров. Из-за негативных ПФ у сайта снижаются позиции.

Как проверить сайт на адаптивность?

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

Но у поисковых систем есть и более тонкие требования к адаптации:

  • не должно быть Flash-анимации и других элементов, которые не работают на смартфонах;
  • ширина контента соответствует экрану, контент читается без горизонтальной прокрутки;
  • всплывающие окна могут быть только на десктопной версии;
  • скорость загрузки контента на смартфоне — максимум 1 секунда;
  • дизайн не перегружен оформительскими и интерактивными элементами;
  • текст оптимизирован для просмотра на смартфонах: крупный шрифт (более 14 px), короткие абзацы, контрастный фон. Пользователи телефонов не должны напрягать зрение даже на солнце.

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

Google Mobile Friendly Test

Официальный сервис Google Mobile Friendly Test проводит проверку оптимизации для мобильных устройств Google. Нужно ввести URL или html-код и нажать «Проверить страницу». Инструмент анализирует юзабилити. Он сообщит, оптимизирована ли страница, и создаст отчет о проблемах при загрузке.

PageSpeed Insights

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

Google Search Console

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

Яндекс.Вебмастер

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

Неофициальные инструменты

Онлайн-сервисы Iloveadaptive, Adaptivator, Quirktools позволяют увидеть проект глазами мобильного пользователя. Показывают, как выглядит страница на экранах популярных устройств в разных операционных системах (IOS и Android).

Askusers

Более глубокую проверку с участием живых пользователей (вашей целевой аудитории) проводит компания Askusers. Тестировщики проверяют, удобно ли пользоваться сайтом со смартфона, фиксируют все плюсы и минусы в анкетах, записывают тест на видео, отвечают на вопросы клиента — владельца проекта. Также они проверяют, как шаблон ведет себя в разных браузерах (Google Chrome, Mozilla Firefox, Яндекс.Браузер). «Ручной» аудит дополняется выводами и рекомендациями экспертов.

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

Существует три основных способа адаптации (отдельный мобильный сайт, адаптив, динамическое обновление) и два дополнительных (AMP и турбо).

Две версии сайта — мобильная и десктопная

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

Плюсы:

  • Быстрая загрузка.
  • Невысокая нагрузка на сервер.

Минусы:

  • Невозможно воспользоваться типовым шаблоном. Чтобы переделать сайт под мобильную версию, его нужно программировать и верстать индивидуально.
  • Официальная позиция Google однозначна: применять конфигурацию сайта с разными URL для разных версий сайта не рекомендуется. Адаптивный дизайн предпочтительнее.

Адаптивный сайт

В отличие от предыдущего способа, на адаптивном сайте единый URL для мобайл- и десктоп-версий. Адаптив автоматически подстраивается под любой размер экрана и разрешение. HTML-код на разных устройствах одинаковый, меняются только стили — расположение и размер элементов.

Это самый популярный способ оптимизации. Большинство стандартных современных шаблонов адаптивны.

Плюсы:

  • Адаптировать страницы можно самостоятельно — для этого достаточно использовать типовой шаблон.
  • Быстрая и недорогая реализация.
  • Корректно отображается на устройствах с любой диагональю.
  • Единый URL и HTML-код, продвигать нужно один проект, а не два.
  • Google рекомендует именно этот способ оптимизации.

Минусы:

  • Медленная загрузка из-за дублирования кода.
  • Невозможно вывести отдельный контент для смартфонов и планшетов.

Динамическое обновление

Динамическое обновление (RESS — Responsive Design and Server Side) — более сложный вариант адаптивного дизайна. Верстка тоже адаптивная, URL не меняется. Особенность в том, что корректную версию страницы через HTTP-запрос Vary выдает сервер (а не клиент, как в случае со стандартным адаптивом). При этом меняется не только CSS, но и HTML.

Плюсы:

  • Быстрая загрузка.
  • Можно выкладывать разный контент для десктоп- и мобайл-версий.

Минусы:

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

AMP

AMP (Accelerated Mobile Pages) — страницы для смартфонов, созданные по технологии Google. Очень быстро загружаются. Не подходят для большинства коммерческих сайтов. Рекомендуются для новостных и контент-проектов.

Плюсы:

  • Высокая скорость загрузки.
  • Простая бесплатная реализация.

Минусы:

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

Турбо-страницы

Адаптирование сайтов Яндекс предлагает реализовывать через турбо-страницы. Технология похожа на AMP. Особенность в том, что трафик получает не сайт, а Яндекс, поскольку турбо расположены на его домене.

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

Плюсы:

  • Простая бесплатная реализация.
  • Быстрая загрузка.
  • Можно частично индивидуализировать дизайн.

Минусы:

  • Скромный функционал.
  • Не отображаются виджеты.
  • Неудобно интегрировать рекламные объявления.

AMP и Турбо могут стать удачным решением на информационных страницах. Но пока они не могут полностью заменить основные способы оптимизации интернет-площадки.

Практические советы

  • Проверьте файл robots.txt. В нем не должно быть директивы на запрет сканирования Javascript, CSS и других частей кода. При запрете поисковые боты могут не разобраться, есть ли на сайте адаптация под смартфоны.
  • Не используйте поп-апы, которые мешают просмотру контента.
  • Оптимизируйте первый экран: сократите контент, расположенный до заголовка, увеличьте расстояние между интерактивными элементами.
  • Оптимизируйте текст: шрифт должен быть достаточно крупным, контрастным к фону. Абзацы короче, больше воздуха.
  • Применяйте микроразметку, чтобы документ стал заметнее в выдаче.
  • Удалите элементы, не поддерживаемые мобильными браузерами: например, созданные с помощью Flash и Silverlight-плагинов.

Читайте на Askusers

«Недостаточно качественная страница»: что именно не нравится Яндексу и как это исправить?

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

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

 

 

Закажи юзабилити-тестирование прямо сейчас
Заказать
Читать также

Готовы узнать, что думают пользователи?

Тогда переходите на новый уровень и улучшайте ваш
продукт вместе с нами

Узнать