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

Планшеты

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

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

Мы рекомендуем всем переходить на адаптивный дизайн. В этом случае сервер вашего сайта будет передавать одинаковый HTML-код на все устройства, используя при этом разные стили CSS, чтобы адаптировать страницы для компьютеров, смартфонов и планшетов.

Если сайт создан по методике адаптивного дизайна, протестируйте его работу на разных планшетах, чтобы убедиться, что он отображается правильно. Как и смартфоны, планшеты могут различаться по размеру и разрешению экрана.

Контент для конкретного устройства

Сайт может предоставлять разным устройствам веб-страницы с различающимся кодом HTML, CSS, JavaScript и т. д. Эти страницы могут иметь один и тот же URL (такая конфигурация называется динамическим показом), либо для каждой страницы может создаваться отдельный адрес.

Если у вас есть версии сайта для компьютеров и смартфонов, а страницы для планшетов не предусмотрены, то владельцы последних скорее предпочтут вариант для компьютеров.

Если для планшетов у вас созданы специальные страницы, воспользуйтесь следующими рекомендациями по настройке сайта:

  • Динамический показ. Для пользователей компьютеров, смартфонов и планшетов используются одни и те же URL с разным кодом HTML (и CSS) в зависимости от агента пользователя. Как мы уже упоминали в рекомендациях по сайтам, адаптированным для смартфонов, настоятельно рекомендуется использовать HTTP-заголовок Vary.
  • Отдельные URL для планшетов. В этом случае рекомендуется разрешить роботу Googlebot сканировать URL для планшетов, указав эквивалентные URL для компьютеров при помощи тегов link с атрибутом rel="canonical".

Мобильные телефоны среднего класса

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