Телефоны среднего класса и планшеты

Планшеты

При оптимизации сайта для мобильных устройств следует принимать во внимание и планшеты. Специальных рекомендаций мы не даем, но предлагаем несколько советов по созданию веб-страниц, которые подойдут для любых устройств.

Адаптивный дизайн

Мы рекомендуем всем переходить на адаптивный дизайн. В этом случае сервер вашего сайта будет передавать одинаковый 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 для смартфонов, придерживайтесь наших стандартных рекомендаций.