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

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

Три способа адаптации сайта

Вот сравнительная таблица способов адаптации сайта для экранов разных размеров.

Конфигурация URL остается неизменным HTML остается неизменным
Адаптивный дизайн Да Да
Динамический показ Да Нет
Разные URL Нет Нет
  1. Адаптивный дизайн. Сервер отправляет один и тот же HTML-код всем устройствам (компьютерам, планшетам, мобильным телефонам, невизуальным браузерам), но отрисовка сайта выполняется по-разному в зависимости от размера экрана. Google рекомендует использовать адаптивный дизайн, поскольку с ним проще всего работать.

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

  3. Разные URL. В зависимости от типа устройства выбираются разные варианты кода и разные URL. Система пытается определить тип устройства пользователя, а затем перенаправляет на нужную страницу при помощи переадресации HTTP и HTTP-заголовка Vary.

Google не отдает предпочтения каким-либо форматам URL, если страницы и все ресурсы на них доступны всем агентам пользователя Googlebot.

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

Обязательные действия

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

  1. Сообщите Google, что страница рассчитана на мобильные устройства (или имеет аналог, предназначенный для них). Тогда Google сможет безошибочно направлять пользователей, выполняющих поиск с мобильных устройств, на ваши страницы.
  2. Ресурсы должны быть доступны для сканирования. Не блокируйте поисковым системам доступ к ключевым файлам сайта (включая объявления), от которых зависит отрисовка страниц, в файле robots.txt. Если робот Googlebot не имеет доступа к коду CSS, JavaScript или изображениям страницы, мы не сможем определить, как она будет отображаться в мобильном браузере. То есть Google может не распознать, что страница адаптирована для мобильных устройств, и показать ее пользователям таких устройств неправильно.
  3. Избегайте типичных ошибок, которые мешают пользователям мобильных устройств. Например, не используйте неподдерживаемые форматы видео (Flash и другие) для основного контента на странице. Мобильные страницы, неудобные для выполняющих поиск пользователей, могут опускаться в рейтинге результатов или появляться в результатах мобильного поиска с предупреждением. Подробную информацию об этом вы найдете в разделе "Типичные ошибки".

Особенности разных устройств

Мобильные устройства. В этом документе под мобильными устройствами понимаются смартфоны (iPhone, Android и Windows Phone). Мобильные браузеры, как и компьютерные браузеры, поддерживают большое количество функций HTML5, но их окна меньше, и в них обычно по умолчанию используется вертикальная ориентация.

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

Мультимедийные телефоны. Браузеры этих устройств могут отрисовывать страницы, соответствующие стандартам XHTML, поддерживают разметку HTML5, а также JavaScript/ECMAscript, но могут не поддерживать некоторые API расширений в стандарте HTML5. К этой категории относятся телефоны, способные принимать сигналы сетей 3G и не являющиеся смартфонами.

Мобильные телефоны среднего класса. Их браузеры не могут отрисовывать обычные веб-страницы со стандартным HTML-кодом. В частности, это браузеры, которые поддерживают только cHTML (iMode), WML, XHTML-MP и т. д.