Поделиться:

Что такое мобайлфрендли: рекомендации Яндекс и Google

Опубликовано 8 ноября 2017

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

Немного истории

  • В апреле 2015 года Google выкатил апдейт алгоритма Mobile-friendly на весь мир. Адаптация сайтов для мобильных устройств стала одним из важных факторов ранжирования в мобильном поиске.
  • В ноябре 2016 года поисковик приступил к тестированию нового подхода к индексации — Mobile-first Index. Бот Google начал анализировать в первую очередь мобильную версию контента на сайте, чтобы ранжировать страницу в мобильном и обычном поиске. Переход на новую систему индексирования продолжается до сих пор.
  • В феврале 2016 года Яндекс запустил алгоритм «Владивосток», предоставляя преимущество в мобильном поиске сайтам, которые удобно просматривать с телефонов и планшетов.

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

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

Существует три варианта оптимизации ресурсов для просмотра с мобильных экранов. У каждого из предложенных решений есть свои достоинства и недостатки. Рассмотрим их подробнее.

  • Адаптивная верстка позволяет осуществлять подстройку страниц под любой размер экрана, оставляя содержимое без изменений. Google рекомендует использовать по возможности именно этот вариант.
  • При динамическом показе используется один URL для разного типа устройств, но в ответ на запрос сервер перенаправляет разные варианты html-кода и css, основываясь на данных о браузере пользователя.
  • Разные URL предполагают использование разных URL-адресов и вариантов кода. Благодаря этому пользователь получает оптимизированный контент для своего типа устройства: содержимое для компьютеров располагается на одном URL, а для телефонов — на другом, чаще всего с поддоменом m.
Адаптивная верстка Динамический показ Разные URL
URL остается неизменным Да Да Нет
HTML остается неизменным Да Нет Нет
Возможность перехода на основную версию сайта Нет Нет Да
Удобство просмотра со старых телефонов Нет В некоторых случаях Да

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

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

Рекомендации Яндекса и Google к мобайлфрендли-сайтам и чек-лист для проверки

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

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

Чек-лист для проверки Рекомендации поисковых систем
Переадресация
  • Проверьте переадресацию страниц, если используете для них отдельную мобильную версию. Сервер должен отправлять пользователей на аналогичные основному сайту страницы.
  • Яндекс воспринимает мобильную и основную версию сайта как отдельные сайты. Чтобы робот правильно индексировал и ранжировал мобильную версию, укажите ее URL, например, с помощью элемента link.
Область просмотра
  • Страница не является мобилопригодной, если для просмотра содержимого требуется горизонтальная прокрутка.
  • Используйте метатег viewport, чтобы сайт корректно отображался на экранах разных устройств.
  • Google рекомендует не использовать фиксированную ширину области просмотра. Это может привести к ошибкам в отображении документов.
  • Чтобы ширина страницы подходила под любое устройство, используйте значение width=device-width. Атрибут initial-scale=1 поможет заполнить экран, даже если сайт пользователь будет просматривать сайт, держа устройство горизонтально.
Видео и анимация
  • Проверьте, чтобы на сайте, предназначенном для просмотра с мобильных устройств, отсутствовал невоспроизводимый контент (в частности, flash-ролики).
  • Для анимации используйте стандартное видео в формате HTML5.
  • Добавьте к видео текст для тех пользователей, которые используют браузеры, не поддерживающие ваш формат.
Шрифт
  • Избегайте мелкого шрифта. Пользователи не должны использовать масштабирование, чтобы прочитать текст.
  • Google рекомендует межстрочный интервал 1.2em, размер шрифта от 16 пикселей.
  • Удобной для чтения считается длина строки 70-80 знаков или 8-10 слов. Если ширина ваших текстов превышает этот размер, установите контрольную точку.
Интерактивные элементы
  • Интерактивные элементы должны быть расположены на расстоянии друг от друга, чтобы пользователь случайно не нажал на ненужную кнопку или ссылку.
  • Google рекомендует размер элементов около 9 мм (48 пикселей в ширину) с пространством между кнопками не менее 5 мм.
Объявления и реклама
  • Откажитесь от рекламы, которая частично или полностью закрывает контент. Не используйте поп-апы, если их сложно закрыть с мобильного устройства.
  • Для рекламы приложения используйте HTML-баннер, встроенный в страницу.
Скорость загрузки страниц
  • Поработайте над скоростью загрузки страниц. Более 50% пользователей покидают мобильный сайт, если он загружается более 3 секунд.
Настройка доступа
  • Чтобы ресурс индексировался и отображался в выдаче, предоставьте ботам поисковых систем доступ к JavaScript, CSS и графическим файлам на вашем ресурсе в файле robots.txt.
  • Чтобы следить за статистикой индексирования страниц мобильной версии сайта в Яндексе, добавьте нужный поддомен или домен в Яндекс.Вебмастер.
Диагностика ошибок
  • Проведите диагностику ошибок с помощью специальных инструментов.

Инструменты диагностики сайтов на мобилопригодность

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

Что проверяем Инструмент для проверки
Ошибки индексирования сайта и его отображение в выдаче
  • Сканер Google для сайтов
  • Яндекс.Вебмастер
Удобство просмотра сайта с мобильных устройств
  • Mobile-Friendly Test
  • Проверка мобильных страниц
Скорость загрузки страниц
  • Page Speed Insights
  • Test your mobile speed

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

Посмотрите другие полезные материалы