Рекомендации по созданию сайтов, оптимизированных для смартфонов

Уровень подготовки веб-мастера: любой

Люди все чаще предпочитают пользоваться смартфонами, и все больше сайтов оптимизируют свой контент для просмотра на этих устройствах. С тех пор как мы последний раз ^[1] говорили о дизайне сайтов для мобильных платформ, нам удалось значительно улучшить поддержку их содержания. Так, ещё в декабре 2011 года был запущен робот Google для мобильных сайтов ^[2], который обрабатывает именно такой контент.
Сегодня мы хотим дать вам рекомендации по созданию и оптимизации сайтов, чтобы они одинаково хорошо отображались как на обычном компьютере, так и на смартфоне.

Советы по разработке сайтов

Ниже приведены краткие рекомендации, более подробную информацию можно найти здесь ^[3]. Как мы недавно сообщали ^[4], этот сайт доступен теперь и на русском.
В случае с сайтами, предназначенными для смартфонов, Google поддерживает три различных конфигурации:
1. Сайты с адаптивным веб-дизайном. Подразумевается, что на разных устройствах открываются одни и те же URL. Код HTML при этом не меняется, а адаптация страницы к определенной платформе обеспечивается за счет CSS. Google рекомендует использовать эту конфигурацию.
2. Сайты, которые на любых платформах задействуют один и тот же набор URL, но при этом обычным компьютерам и мобильным устройствам динамически предоставляется разный код HTML и CSS.
3. Контент для различных устройств размещается на отдельных сайтах.

Адаптивный веб-дизайн

В этой технологии используются медиа-запросы CSS3. Всем устройствам предоставляется один и тот же HTML-код страницы, но ее отображение изменяется различными стилями CSS, выбираемыми с помощью медиа-запросов. Подробнее об адаптивном дизайне читайте в посте «Адаптивный дизайн на основе медиа-запросов» ^[5] и в наших рекомендациях ^[6].
Вот некоторые преимущества адаптивного дизайна:

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

Отдельный код HTML для различных устройств

Так как во многих ситуациях применение адаптивного дизайна невозможно, веб-сайты могут содержать код HTML, который предназначен для определенных устройств и размещен на одном URL (динамический показ) или на разных (например, www.example.com ^[7] и m.example.com).
Если вы применяете динамический показ, настоятельно рекомендуется использовать HTTP-заголовок Vary. Это решение позволяет задействовать кэширующие серверы, и наши алгоритмы учитывают, что контент меняется в зависимости от клиентских приложений, запрашивающих страницу. Кроме того, так можно сообщить нам, что для сканирования должен использоваться робот Google для мобильных сайтов. Подробнее об этом можно узнать здесь ^[6].
Существует несколько способов реализовать отдельную конфигурацию сайта для мобильных устройств. Рекомендуем указывать алгоритмам Google с помощью комментариев, что ваши страницы для обычного компьютера и мобильного устройства эквивалентны. Другими словами, в новых комментариях описывается взаимосвязь между двумя версиями контента, которые должны рассматриваться как одно и то же, но для разных платформ.
С помощью этих комментариев мы обнаружим содержание для смартфонов, а наши алгоритмы распознают структуру контента – и сайт будет лучше выглядеть в результатах поиска.

Заключение

Эта запись – лишь краткое изложение наших рекомендаций по созданию сайтов, оптимизированных для смартфонов ^[3]. Ознакомьтесь с полной версией и выберите для своего веб-ресурса подходящую конфигурацию. Как обычно, если у вас есть дополнительные вопросы, их можно задать на нашем Справочном форуме для веб-мастеров ^[8].

Автор: HabrAndrey

Источник ^[9]