Телефоны среднего класса и планшеты
Планшеты
При оптимизации сайта для мобильных устройств следует принимать во внимание и планшеты. Специальных рекомендаций мы не даем, но предлагаем несколько советов по созданию веб-страниц, которые подойдут для любых устройств.
Адаптивный дизайн
Мы рекомендуем всем переходить на адаптивный дизайн. В этом случае сервер вашего сайта будет передавать одинаковый 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="URL for the current page" />
Разные 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 для смартфонов, придерживайтесь наших стандартных рекомендаций.