Планшеты
При оптимизации сайта для мобильных устройств следует принимать во внимание и планшеты. Специальных рекомендаций мы не даем, но предлагаем несколько советов по созданию веб-страниц, которые подойдут для любых устройств.
Адаптивный дизайн
Мы рекомендуем всем переходить на адаптивный дизайн. В этом случае сервер вашего сайта будет передавать одинаковый HTML-код на все устройства, а для адаптации страниц для компьютеров, смартфонов и планшетов будут использоваться разные стили CSS.
Если сайт создан по методике адаптивного дизайна, протестируйте его работу на разных планшетах, чтобы проверить, правильно ли выполняется его отрисовка. Как и смартфоны, планшеты могут различаться по размеру и разрешению экрана.
Контент для конкретного устройства
Сайт может предоставлять разным устройствам веб-страницы с различающимся кодом HTML, CSS, JavaScript и т. д. Эти страницы могут иметь один и тот же URL (такая конфигурация называется динамическим показом), либо для каждой страницы может создаваться отдельный адрес.
Если у вас есть версии сайта для обычных компьютеров и смартфонов, а страницы для планшетов не предусмотрены, то пользователи планшетов скорее предпочтут вариант для компьютеров.
Если для планшетов у вас созданы специальные страницы, воспользуйтесь следующими рекомендациями по настройке сайта:
- Динамический показ. Для пользователей компьютеров, смартфонов и планшетов используются одни и те же URL с разным кодом HTML (и CSS) в зависимости от агента пользователя. Как мы уже упоминали в рекомендациях по сайтам, адаптированным для смартфонов, настоятельно рекомендуется использовать HTTP-заголовок Vary.
- Отдельные URL для планшетов. В этом случае рекомендуется позволить роботу Googlebot сканировать URL для планшетов, а также использовать атрибут
rel="canonical"для каждого такого веб-адреса, чтобы указать эквивалентный URL для компьютеров.
Мобильные телефоны среднего класса
На сайтах для смартфонов мы рекомендуем использовать адаптивный дизайн. Однако, поскольку мобильные телефоны среднего класса не поддерживают запросы CSS @media, веб-мастерам приходится применять динамический показ или создавать отдельные URL для страниц с контентом, адаптированным для таких устройств.
Мы также рекомендуем добавить на каждую страницу, подходящую для показа на мобильных телефонах среднего класса, тег <link rel="alternate" media="handheld"> с учетом приведенных ниже инструкций.
Далее описывается, как реализовать каждую из этих конфигураций.
Динамический показ
Чтобы настроить динамический показ контента для обычных телефонов по тому же URL, что и для других устройств, используйте такую же методику, как при настройке сервера для поддержки смартфонов. Сервер должен поддерживать HTTP-заголовок ответа Vary: User-Agent. Также изучите распространенные неполадки при распознавании агентов пользователя. Кроме того, добавьте на свою страницу следующий тег:
<link rel="alternate" media="handheld" href="[current page URL]" />
Разные URL
Чтобы реализовать отображение страниц с разными URL на компьютерах, смартфонах и мобильных телефонах среднего класса, веб-мастера могут воспользоваться любой из трех доступных конфигураций. Подробные сведения об этом доступны в разделе, посвященном оптимизации сайтов для мобильных устройств.
Конфигурация с разными URL для каждого типа устройств
Предположим, что на сайте используются следующие форматы адреса для разных платформ:
http://www.example.com/page-1– для пользователей компьютеров;http://m.example.com/page-1– для пользователей смартфонов;http://phone.example.com/page-1– для пользователей телефонов среднего класса.
В этом случае мы рекомендуем использовать перечисленные ниже атрибуты, которые помогут нашей системе увидеть взаимосвязь между одинаковыми страницами для разных устройств.
На страницу www.example.com/page-1 добавьте следующий фрагмент:
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" />
<link rel="alternate" media="handheld" href="http://phone.example.com/page-1" />
На страницу m.example.com/page-1 добавьте следующий фрагмент:
<link rel="canonical" href="http://www.example.com/page-1" />
На страницу phone.example.com/page-1 добавьте следующий фрагмент:
<link rel="canonical" href="http://www.example.com/page-1" />
Конфигурация с разными URL для компьютеров и мобильных устройств
При этой конфигурации на компьютерах будет отображаться страница с одним URL, а на всех мобильных платформах, включая смартфоны и мобильные телефоны среднего класса, – с другим. Пример:
http://www.example.com/page-1– для пользователей компьютеров;http://m.example.com/page-1– для пользователей смартфонов и мобильных телефонов среднего класса.
В этом случае атрибуты для сайта http://www.example.com/page-1 будут выглядеть так:
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" />
<link rel="alternate" media="handheld" href="http://m.example.com/page-1" />
На страницу m.example.com добавьте следующий тег:
<link rel="canonical" href="http://www.example.com/page-1" />
Атрибут rel="canonical" необходимо добавить на все страницы, предназначенные для мобильных телефонов среднего класса и смартфонов.
Сервер должен поддерживать заголовок HTTP Vary: User-Agent в ответах на запросы. Этот элемент сообщает роботу Googlebot и системам кеширования, что ответ сервера может быть различным в зависимости от агента пользователя. Робот Googlebot для мобильных сайтов также учитывает эту информацию.
Конфигурация с отдельным URL для мобильных телефонов среднего класса
В этом случае страница с одним адресом будет отображаться для всех компьютеров и смартфонов (при этом используется адаптивный веб-дизайн или динамический показ), а на мобильных телефонах среднего класса появится контент с другим адресом. Пример:
http://www.example.com/page-1– для пользователей компьютеров и смартфонов;http://m.example.com/page-1– для пользователей телефонов среднего класса.
В этом случае атрибуты для сайта http://www.example.com/page-1 будут выглядеть так:
<link rel="alternate" media="handheld" href="http://m.example.com/page-1" />
А для сайта http://m.example.com/page-1 – вот так:
<link rel="canonical" href="http://www.example.com/page-1" />
Переадресация и HTTP-заголовок Vary
Если посетители вашего обычного сайта автоматически перенаправляются на его мобильную версию и наоборот (в зависимости от устройства), то нужно настроить сервер так, чтобы он добавлял в ответ HTTP-заголовок Vary.
Файлы Sitemap
Если вы используете файлы Sitemap для мобильных телефонов среднего класса и альтернативных URL для смартфонов, придерживайтесь наших стандартных рекомендаций.