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

  1. Общие рекомендации
  2. Как проверить мобильные страницы сайта
  3. Как Яндекс проверяет сайты на мобильную адаптивность
  4. Вопросы и ответы про мобильные сайты

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

Сайт с адаптивным дизайном
Сайт подстраивается под разрешение и размер экрана; доступен по одному URL для всех типов устройств.
Сайт с динамической версткой страниц
Для просмотра с разных мобильных устройств сервер отправляет в ответ на запрос одного URL различные варианты кода HTML и CSS.
Мобильная версия сайта (поддомен)
Для просмотра с мобильных устройств используется отдельный URL (специальный поддомен: m.example.com, mob.example.com и пр.). Чтобы в мобильном поиске участвовал мобильный поддомен, его структура должна полностью соответствовать структуре основного домена.
Примечание. На адаптивность мобильным устройствам Яндекс проверяет основной домен и мобильный поддомен. Например, робот проверяет страницу example.com/page, затем по редиректу переходит на m.example.com/page. Если страница на мобильном поддомене проходит проверку, то страница example.com/page признается адаптированной для мобильных устройств. Подробнее см. Как Яндекс проверяет сайты на мобильную адаптивность.

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

Общие рекомендации

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

  • Ресурсы должны быть доступны для мобильного индексирующего робота Яндекса: Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4 (compatible; YandexMobileBot/3.0; +http://yandex.com/bots). Разрешите в файле robots.txt сканирование CSS, JavaScript, от которых зависит отображение сайта на мобильных устройствах. Иначе страницы сайта могут некорректно отображаться в результатах поиска.
  • Страницы сайта должны отправлять серверу ответ с HTTP-кодом 200 OK. Вы можете проверить ответ сервера в Яндекс Вебмастере.

  • Не используйте технологии Flash, Silverlight или Applet на страницах, ориентированных на мобильных пользователей — эти технологии могут не поддерживаться на мобильных устройствах.

    Совет. Например, пользователи не смогут просмотреть интерактивную часть сайта или видеоролик, встроенные на Flash. Поэтому рекомендуем встраивать контент с помощью HTML5 или отказаться от тяжелых и сложных интерактивных элементов.
  • Размещайте контент вашего сайта таким образом, чтобы он был максимально виден на экране мобильного устройства.
  • Содержимое страниц не должно выходить за рамки экрана по горизонтали.
  • Страницы сайта должны открываться корректно и без горизонтальной прокрутки на устройствах с разрешением 320 пикселей и более.
  • Размер текста в пикселях должен быть таким, чтобы весь текст удобно читался на экране мобильного устройства.
  • Адреса вида m.example.com могут выглядеть в десктопном поиске как ссылки на мобильную версию сайта, которые случайно попали в выдачу. Чтобы этого избежать, рекомендуем использовать для десктопных версий более однозначные поддомены, например mos.example.com для московской версии сайта.

Также посмотрите Как Яндекс проверяет сайты на мобильную адаптивность.

Как проверить мобильные страницы сайта

Чтобы проверить:
  1. Перейдите на страницу Проверка мобильных страниц.
  2. Выберите из списка сайт, страницу которого хотите проверить.
  3. В поле укажите URL страницы. По умолчанию указана главная страница сайта.
  4. Нажмите кнопку Проверить.

Проверка длится несколько минут.

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

После проверки на странице Оптимизация сайта → Диагностика сайта появятся рекомендации по оптимизации. Яндекс Вебмастер регулярно проверяет сайт. Вы можете настроить уведомления о результатах проверки.

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

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

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

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

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

Для формирования поисковой выдачи на мобильных устройствах робот Яндекса сверяет URL-адреса десктопной и мобильной версии сайта:

Настройки сайта Поведение в результатах поиска на мобильных устройствах Рекомендация
Адреса десктопной и мобильной версии сайта полностью совпадают.

Отображается мобильная версия.
  1. В элемент head добавьте метатег <meta name="viewport" content="width=device-width, initial-scale=1">, чтобы указать область просмотра контента. Подробно см. в разделе Использование HTML-элементов.
  2. Убедитесь, что сайт отвечает общим рекомендациям по мобилопригодности. Также вы можете проверить сайт в Вебмастере.

Адреса различаются только доменом (например, https://example.com/ и https://m.example.com/) или полностью (например, https://example.com/page/ и https://mobile.example.com/catalog/).

Для указания на мобильную версию на десктопной версии может быть установлен редирект и атрибут rel="alternate".

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

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

Когда адреса совпадают, кроме домена (https://m.example.com и пр.), подмена десктопной версии на мобильную в выдаче может происходить без наличия атрибута атрибута rel="alternate". Несмотря на это, рекомендуем добавлять атрибут для указания на мобильную версию. Это поможет Яндексу более точно определять связь между версиями сайта.
  1. Проверьте, что все версии сайта мобилопригодны.
  2. Проверьте, что контент страниц десктопной и мобильной версии сайта совпадает.

  3. Для пользователей мобильных устройств установите на все страницы десктопной версии сайта редирект и атрибут rel="alternate", указывающий на страницы мобильной версии. Редирект с каждой страницы десктопной версии должен вести на аналогичную страницу мобильной версии.

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

    При этом атрибут rel="alternate" должен быть указан для основного индексирующего робота Яндекса, а редирект — для мобильного.
Настройки сайта Поведение в результатах поиска на мобильных устройствах Рекомендация
Адреса десктопной и мобильной версии сайта полностью совпадают.

Отображается мобильная версия.
  1. В элемент head добавьте метатег <meta name="viewport" content="width=device-width, initial-scale=1">, чтобы указать область просмотра контента. Подробно см. в разделе Использование HTML-элементов.
  2. Убедитесь, что сайт отвечает общим рекомендациям по мобилопригодности. Также вы можете проверить сайт в Вебмастере.

Адреса различаются только доменом (например, https://example.com/ и https://m.example.com/) или полностью (например, https://example.com/page/ и https://mobile.example.com/catalog/).

Для указания на мобильную версию на десктопной версии может быть установлен редирект и атрибут rel="alternate".

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

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

Когда адреса совпадают, кроме домена (https://m.example.com и пр.), подмена десктопной версии на мобильную в выдаче может происходить без наличия атрибута атрибута rel="alternate". Несмотря на это, рекомендуем добавлять атрибут для указания на мобильную версию. Это поможет Яндексу более точно определять связь между версиями сайта.
  1. Проверьте, что все версии сайта мобилопригодны.
  2. Проверьте, что контент страниц десктопной и мобильной версии сайта совпадает.

  3. Для пользователей мобильных устройств установите на все страницы десктопной версии сайта редирект и атрибут rel="alternate", указывающий на страницы мобильной версии. Редирект с каждой страницы десктопной версии должен вести на аналогичную страницу мобильной версии.

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

    При этом атрибут rel="alternate" должен быть указан для основного индексирующего робота Яндекса, а редирект — для мобильного.
Пример использования атрибута rel="alternate"

Атрибут rel="alternate" с указанием на мобильную версию сайта помогает мобильному роботу Яндекса понять, на какую версию перейти. Размещайте атрибут в элементе link внутри элемента head. Например:

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/" />

В качестве значения атрибута media используется строка запроса медиа CSS, которая определяет, при каких условиях мобильный робот будет выбирать альтернативный URL. Значение из примера обычно указывают, когда условием является показ на мобильном устройстве.

Вопросы и ответы про мобильные сайты

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

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

Как избежать дублирования контента?

Основная и мобильные версии сайта воспринимаются мобильным роботом Яндекса как отдельные сайты и индексируются отдельно друг от друга.

Чтобы помочь мобильному роботу правильно определить версию сайта, укажите на страницах основного сайта соответствующие URL мобильной версии. Например, с помощью атрибута rel="alternate" в элементе link: 

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page.html"/>
Надо ли устанавливать редирект на мобильную версию сайта?

Вы можете перенаправлять пользователя с основного сайта на мобильную версию, учитывая User-agent устройства, с которого пользователь просматривает сайт.

Надо ли добавлять мобильную версию сайта в Вебмастер?
Вы можете добавить мобильную версию сайта в Яндекс Вебмастер, чтобы отслеживать статистику индексирования страниц.
Примечание. На адаптивность мобильным устройствам Яндекс проверяет основной домен и мобильный поддомен. Например, робот проверяет страницу example.com/page, затем по редиректу переходит на m.example.com/page. Если страница на мобильном поддомене проходит проверку, то страница example.com/page признается адаптированной для мобильных устройств. Подробнее см. Как Яндекс проверяет сайты на мобильную адаптивность.
Можно ли создать мобильную версию сайта в подкаталоге (папке)?

Можно. Чтобы робот связал десктопную и мобильную версии сайта, установите на все страницы десктопной версии редирект и атрибут rel="alternate", указывающий на страницы мобильной версии. При этом редирект с каждой страницы десктопной версии должен вести на аналогичную страницу мобильной версии.

Если это невозможно, используйте адаптивный дизайн или динамическую верстку.

Как сообщить роботу Яндекса о наличии адаптивной версии сайта?

Для сайтов с адаптивным дизайном используйте метатег <meta name="viewport" content="width=device-width, initial-scale=1">, чтобы указать область просмотра контента. Подробно см. в разделе Использование HTML-элементов.

Мобильная версия на поддомене стала неглавным адресом основной версии

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