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

Планшеты

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

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

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

Оставить отзыв о...

Текущей странице