Поисковая оптимизация мобильных сайтов для других устройств

Планшеты

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

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

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