Уровень подготовки веб-мастера: любой
Люди все чаще предпочитают пользоваться смартфонами, и все больше сайтов оптимизируют свой контент для просмотра на этих устройствах. С тех пор как мы последний раз говорили о дизайне сайтов для мобильных платформ, нам удалось значительно улучшить поддержку их содержания. Так, ещё в декабре 2011 года был запущен робот Google для мобильных сайтов, который обрабатывает именно такой контент.
Сегодня мы хотим дать вам рекомендации по созданию и оптимизации сайтов, чтобы они одинаково хорошо отображались как на обычном компьютере, так и на смартфоне.
Советы по разработке сайтов
Ниже приведены краткие рекомендации, более подробную информацию можно найти здесь. Как мы недавно сообщали, этот сайт доступен теперь и на русском.
В случае с сайтами, предназначенными для смартфонов, Google поддерживает три различных конфигурации:
1. Сайты с адаптивным веб-дизайном. Подразумевается, что на разных устройствах открываются одни и те же URL. Код HTML при этом не меняется, а адаптация страницы к определенной платформе обеспечивается за счет CSS. Google рекомендует использовать эту конфигурацию.
2. Сайты, которые на любых платформах задействуют один и тот же набор URL, но при этом обычным компьютерам и мобильным устройствам динамически предоставляется разный код HTML и CSS.
3. Контент для различных устройств размещается на отдельных сайтах.
Адаптивный веб-дизайн
В этой технологии используются медиа-запросы CSS3. Всем устройствам предоставляется один и тот же HTML-код страницы, но ее отображение изменяется различными стилями CSS, выбираемыми с помощью медиа-запросов. Подробнее об адаптивном дизайне читайте в посте «Адаптивный дизайн на основе медиа-запросов» и в наших рекомендациях.
Вот некоторые преимущества адаптивного дизайна:
- На всех устройствах открываются одни и те же URL, которые проще использовать, ссылаться на них и делиться ими. Кроме того, так нам легче индексировать ваш контент.
- Google может обнаруживать ваш контент более оперативно, поскольку не нужно сканировать страницы различными роботами Googlebot, чтобы найти и проиндексировать все содержание.
Отдельный код HTML для различных устройств
Так как во многих ситуациях применение адаптивного дизайна невозможно, веб-сайты могут содержать код HTML, который предназначен для определенных устройств и размещен на одном URL (динамический показ) или на разных (например, www.example.com и m.example.com).
Если вы применяете динамический показ, настоятельно рекомендуется использовать HTTP-заголовок Vary. Это решение позволяет задействовать кэширующие серверы, и наши алгоритмы учитывают, что контент меняется в зависимости от клиентских приложений, запрашивающих страницу. Кроме того, так можно сообщить нам, что для сканирования должен использоваться робот Google для мобильных сайтов. Подробнее об этом можно узнать здесь.
Существует несколько способов реализовать отдельную конфигурацию сайта для мобильных устройств. Рекомендуем указывать алгоритмам Google с помощью комментариев, что ваши страницы для обычного компьютера и мобильного устройства эквивалентны. Другими словами, в новых комментариях описывается взаимосвязь между двумя версиями контента, которые должны рассматриваться как одно и то же, но для разных платформ.
С помощью этих комментариев мы обнаружим содержание для смартфонов, а наши алгоритмы распознают структуру контента – и сайт будет лучше выглядеть в результатах поиска.
Заключение
Эта запись – лишь краткое изложение наших рекомендаций по созданию сайтов, оптимизированных для смартфонов. Ознакомьтесь с полной версией и выберите для своего веб-ресурса подходящую конфигурацию. Как обычно, если у вас есть дополнительные вопросы, их можно задать на нашем Справочном форуме для веб-мастеров.
Автор: HabrAndrey
