SEO - Мобильные версии сайта и их типы

Прежде чем приступать к обзору мобильного SEO, убедитесь, что Ваш сайт корректно отображается на мобильных устройствах. Зайдите в Меню → Дополнительные инструменты → Инструменты разработчика (Ctrl+Shift+I) и в левом верхнем углу переключите на мобильный вид:

или нажмите сочетание клавиш Ctrl+Shift+M

Вы можете просмотреть ваш сайт при любых разрешениях экрана мобильного устройства (1), при этом задачей оптимизации сайта под мобильные устройства является корректное отображение необходимых разделов сайта на маленьких экранах мобильных устройств (2).

Также, быстро оценить как выглядит дизайн вашего сайта под различные разрешения можно здесь:

https://mattkersley.com/responsive/

Далее выполните проверку оптимизации вашего сайта под мобильные устройства:
https://search.google.com/test/mobile-friendly
Выделяют три основных метода предоставления контента под мобильные устройства.

1. Адаптивный (респонсивный) дизайн. Сервер отправляет один и тот же код HTML всем устройствам (обычным компьютерам, планшетам, мобильным телефонам, невизуальным браузерам), но этот код отображается по-разному (т.е. адаптируется) в зависимости от размера экрана. Google рекомендует использовать именно этот вариант. Адаптивный дизайн основан на сетчатой структуре макета сайта, которая динамически настраивается, чтобы соответствовать всем размерам экрана.

2. Динамический дизайн. Это такая настройка дизайна сайта, которая использует один и тот же URL-адрес, но выполняет разные версии кода HTML и CSS в зависимости от устройства пользователя. Заголовки указывают браузерам как отображать контент и помогают Googlebot быстрее обнаруживать ваш мобильный сайт. Эта версия предоставления контента позволяет делать “облегченные” представления страниц для мобильных устройств, например, при очень “загруженных” страницах в настольном представлении. В некоторых случаях это очень полезно.

3. Отдельный Урл. В этом представлении для разных типов устройств используются разные варианты кода и разные URL. Система пытается определить тип устройства пользователя, а затем перенаправляет на нужную страницу при помощи переадресации HTTP и HTTP-заголовка Vary. Здесь очевидным недостатком является необходимость выделить дополнительные ресурсы для поддержки отдельного URL-адреса.

Google поддерживает различные настройки сайтов под мобильные устройства, но адаптивный дизайн - их рекомендуемая конфигурация. Наличие одного URL-адреса позволяет Google сканировать и индексировать страницы намного эффективнее.

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

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

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

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

Метатег viewport содержит инструкции для браузера по корректировке размеров и масштабированию страницы с учетом ширины экрана устройства. Если этого элемента нет, мобильные браузеры по умолчанию показывают страницу для экрана компьютера (ширина ее обычно составляет 980 пикселей, но это значение может отличаться у разных устройств). Затем мобильные браузеры пытаются оптимизировать содержание, увеличивая шрифты и либо масштабируя содержание по размеру экрана, либо показывая только часть контента, которая помещается на экране.

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

Если у вас есть адаптивные изображения, используйте < picture >.

Google рекомендует использовать адаптивный дизайн по следующим причинам:

  1. Пользователям удобнее делиться вашим контентом, если для него используется единый URL.
  2. В этом случае алгоритмы Google точнее индексируют параметры страницы, а не регистрируют разные ее версии.
  3. Создание одной адаптивной страницы занимает меньше времени, чем создание нескольких вариантов одного содержания.
  4. Снижается вероятность типичных ошибок, характерных для мобильных сайтов.
  5. Не требуется переадресация, что сокращает время загрузки. Кроме того, при переадресации с применением агентов пользователя часто возникают ошибки.
  6. Экономия ресурсов при сканировании сайта роботом Googlebot. Агент пользователя Googlebot может просканировать страницу с адаптивным дизайном за один раз. В противном случае пришлось бы выполнять сканирование всех версий контента. Такое повышение эффективности сканирования позволяет Google точнее индексировать содержание вашего сайта и отражать его в поиске.

В процессе создания сайтов для мобильных устройств особое внимание нужно уделять коду JavaScript, который адаптирует содержание сайта для различных размеров экрана. Обычно код JavaScript используется для выбора объявления или разрешения изображений, которые отображаются в браузере пользователя:

  • Адаптация с помощью JavaScript. В этом случае для всех устройств используется один и тот же код HTML, JavaScript и CSS. Код JavaScript может менять форматирование и механизмы работы страницы в зависимости от устройства. Если на веб-сайте используется JavaScript, Google рекомендует выбирать именно эту конфигурацию.
  • Комбинированное определение условий. В этой конфигурации используется как JavaScript, так и функция определения типа устройства сервером. В результате на разных платформах отображается разный контент.
  • Динамическое использование JavaScript. В этом случае всем устройствам отправляется один HTML-код, но код JavaScript отправляется с URL, который динамически предоставляет разные варианты этого кода для разных устройств.

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

Например, на странице всегда используется один и тот же код HTML с элементом < script >, который запрашивает код JavaScript с внешнего URL. Все устройства, с которых отправляется запрос на этот адрес, получают одинаковый код JavaScript, но при его обработке выявляются и учитываются характеристики устройства. В результате форматирование страницы может быть изменено. Например, на ней будет показываться изображение или объявление, оптимизированное именно для смартфонов, а не для компьютеров.

Эта конфигурация очень тесно связана с адаптивным дизайном. Кроме того, для нее не нужно использовать HTTP-заголовок Vary, поскольку адреса страницы и объектов не поддерживают динамический показ контента. Это очень важное преимущество, так что если на вашем сайте используется JavaScript, то рекомендуем выбрать именно эту конфигурацию.

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

Например, внешний вид контента на сайте меняется в зависимости от того, как его просматривает пользователь: на компьютере или смартфоне. Для этого веб-ресурс может использовать код JavaScript, который определяет параметры экрана, а затем передает их на сервер. Тот, в свою очередь, отправляет на устройство измененный код. Как правило, код JavaScript сохраняет параметры устройства в файле cookie, который сервер считывает при последующих посещениях с этого устройства.

Поскольку сервер отправляет в ответ на запрос разные варианты кода HTML с учетом агента пользователя, комбинированное определение условий можно отнести к типу конфигураций с динамическим показом. При запросе URL, предоставляющего разные коды HTML, на сайте должен быть HTTP-заголовок Vary: User-agent.

Динамический показ JavaScript. При этой конфигурации всем устройствам предоставляется один и тот же код HTML с элементом < script >, указывающим на внешний файл JavaScript, содержание которого может быть различным в зависимости от агента пользователя. Таким образом, код JavaScript предоставляется динамически. В этом случае Google рекомендует реализовать отправку файла JavaScript с помощью HTTP-заголовка Vary: User-agent. Тогда робот Googlebot и системы веб-кэширования будут знать, что код JavaScript может различаться в зависимости от агента пользователя, и Googlebot просканирует файл соответствующим образом.

Динамический дизайн (показ) - это конфигурация, при которой сервер отправляет в ответ на запрос определенного URL различные варианты кода HTML и CSS. При выборе нужного варианта система ориентируется на агент пользователя. При этом не всегда очевидно, что мобильные устройства получают другой код (мобильный контент может быть “скрыт”). Поэтому рекомендуется, чтобы сервер предлагал системе выполнить сканирование также с помощью робота Googlebot для смартфонов. Для этого можно воспользоваться HTTP-заголовком Vary.

При динамическом показе для разных устройств используются разные варианты кода, но один URL.

HTTP-заголовок Vary обладает двумя полезными и важными характеристиками:

1. Он сообщает кеширующим серверам интернет-провайдеров, что при принятии решения о показе страницы из кеша необходимо учитывать агент пользователя. Без HTTP-заголовка Vary система может ошибочно показать пользователям мобильных устройств версию HTML-страницы для компьютеров и наоборот.

2. Этот заголовок помогает роботу Googlebot быстрее находить контент, оптимизированный для мобильных устройств, поскольку он учитывается при сканировании URL адаптированных страниц.

HTTP-заголовок Vary содержится в ответе сервера на запрос. Вот пример такого обмена:

GET /page-1 HTTP/1.1
Host: www.example.com
(...rest of HTTP request headers…)

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(...rest of HTTP response headers…)

Заголовок Vary сообщает браузеру, что содержание ответа будет зависеть от агента пользователя, запросившего страницу. Если ваш сервер уже использует HTTPзаголовок Vary, то вы можете добавить в соответствующий список элемент User-Agent.

При определении агентов пользователя могут происходить ошибки. Вот типичные причины этого:

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

Данные агента пользователя могут не совпадать со сведениями в списке, и нередко браузер компьютера определяется как приложение для мобильного устройства и наоборот. По этой же причине планшеты зачастую распознаются сайтами как смартфоны. Определяя браузер посетителя, выполняйте поиск строк, свойственных именно приложениям для смартфонов. Например, ищите не только слово Android, характерное для мобильных приложений в целом, но и слово Mobile.

Еще одна причина проблем с определением браузеров - маскировка. Чтобы опознать браузер, сайт ищет в строке агента пользователя название устройства с целью определить его тип или класс. Настраивать сайт на обнаружение робота Googlebot не следует. Все агенты пользователя Googlebot интерпретируются сайтом как определенные мобильные устройства, и он должен работать с этими роботами точно так же, как и с этими устройствами. Например, Googlebot для смартфонов определяется как браузер iPhone, и обслуживать его запросы нужно так же, как и запросы пользователя iPhone (переадресация, оптимизированный контент и т.д.).

Отдельный URL для мобильной версии сайта. В этой конфигурации содержание для компьютеров находится на странице с одним URL, а аналогичный контент, оптимизированный для мобильных устройств, располагается по другому адресу. Как правило, в таких случаях страницы для компьютеров размещаются в домене www.example.com, а соответствующие страницы для мобильных устройств - в домене m.example.com. Google не отдает предпочтения тому или иному формату URL.

Главное требование - страницы должны быть доступны для агентов пользователя Googlebot.

В этой конфигурации содержание для компьютеров отличается от содержания для мобильных устройств (иногда к ним относят и планшеты), и эти варианты кода находятся по разным URL. Чтобы Google лучше распознавала URL, предназначенные для мобильных устройств, необходимо использовать атрибуты:

Чтобы Google лучше распознавала URL, предназначенные для мобильных устройств, необходимо использовать атрибуты:

1. Разместите на каждой странице для компьютеров специальный тег link с атрибутом rel=”alternate”, который будет вести на соответствующую страницу мобильного сайта. Это поможет роботу Googlebot найти контент, оптимизированный для мобильных устройств.

2. На странице для мобильных устройств добавьте тег link rel=”canonical” со ссылкой на соответствующую обычную страницу

Google поддерживает два способа добавления таких атрибутов: в HTML-коде страниц и в файлах Sitemap.

Предположим, что URL обычной страницы - http://example.com/page-1,
а URL соответствующей страницы для мобильных устройств - http://m.example.com/page-1 .

Тогда на обычной странице (http://example.com/page-1) добавьте следующий код:

<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://m.example.com/page-1”>

На странице для мобильных устройств (http://m.example.com/page-1) используйте такие атрибуты:

<link rel=”canonical” href=”http://example.com/page-1”>

В URL, который размещен на странице мобильного сайта и указывает на аналог этой страницы с обычным форматированием, необходимо добавить тег rel=”canonical”.

Google поддерживает добавление атрибутов rel=”alternate” на страницы для компьютеров с помощью файлов Sitemap.

Пример:

< ? xml version=”1.0” encoding=”UTF-8” <urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9” xmlns:xhtml=”http://www.w3.org/1999/xhtml”> <url> <loc>http://example.com/page-1</loc> <xhtml:link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://m.example.com/page-1”/> </url> </urlset>

При этом тег rel=”canonical” для URL страницы мобильного сайта обязательно нужно добавить непосредственно в код HTML этой страницы.

На странице для компьютеров могут использоваться следующие атрибуты тега:

  • Атрибут rel=”alternate” означает, что тег указывает на альтернативный URL для этой страницы.
  • В качестве значения атрибута media используется строка медиа-запроса CSS, в которой указывается, при каких условиях Google должен использовать альтернативный URL.
  • Атрибут href указывает, где находится альтернативный URL: в данном случае это страница в домене m.example.com.

Эти атрибуты помогают Googlebot найти ваш контент и определить взаимосвязь между обычными и мобильными страницами сайта. Когда вы используете разные URL для одного и того же контента в различных форматах, атрибуты сообщают системе, что эти два URL содержат одинаковый контент и их следует считать одним объектом, а не двумя. Если обычная и мобильная версии страницы интерпретируются как независимые объекты, то в результатах Поиска на ПК могут присутствовать оба URL. В таком случае их рейтинг будет ниже, чем, если бы роботу Googlebot было известно об их взаимосвязи. Также при выборе этой конфигурации обратите внимание на следующее:

  1. Если вы используете атрибуты rel=”alternate” и rel=”canonical”, то каждой обычной странице должна соответствовать только одна мобильная и наоборот.
  2. Тщательно проверяйте параметры переадресации: убедитесь, что обычные страницы случайно не перенаправляют пользователя на одну и ту же страницу с другим содержанием.
  3. Если вы решили создать отдельный сайт для мобильных устройств, избегайте распространенных ошибок, например в переадресации мобильных пользователей.

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

Робот Googlebot поддерживает следующие способы переадресации:

  • переадресация с помощью HTTP;
  • переадресация с помощью JavaScript

Переадресация с помощью HTTP обычно используется для перенаправления на URL для конкретных устройств. Как правило, она выполняется с учетом агента пользователя, указанного в заголовках HTTP-запроса. Переадресация должна соответствовать альтернативному URL, указанному в атрибуте rel=”alternate” целевой ссылки или в файле Sitemap.

В этом случае неважно, возвращает ли сервер при переадресации код статуса 301 или 302. Однако, по возможности рекомендуется использовать код 302.

Переадресация с помощью JavaScript. Если возникают сложности с настройкой переадресации с помощью HTTP, то для перенаправления пользователей можно использовать JavaScript. Для этого нужно задать соответствующий URL с помощью тега link rel=”alternate”. Необходимо обеспечить приемлемое для пользователя время реакции, поскольку перед выполнением переадресации происходит скачивание страницы, а затем синтаксический анализ и запуск кода JavaScript.

Существует множество способов такой переадресации. Например, можно обрабатывать запросы контента, которые уже используются на сайте. Для этого подойдет функция JavaScript matchMedia().

На разных веб-сайтах применяются разные правила переадресации.В одних случаях она действует только для пользователей мобильных устройств, которые посещают обычную версию сайта (однонаправленная переадресация), а где-то пользователи перенаправляются и с мобильной версии на обычную (двунаправленная переадресация).

Робот Googlebot поддерживает оба варианта. Выбирайте тот, который больше подойдет пользователям. Самое главное - чтобы перенаправление выполнялось без ошибок и открывались нужные страницы. Если переадресация будет реализована некорректно, некоторые пользователи вообще не увидят нужный контент. Кроме того, рекомендуется задавать правила переадресации так, чтобы пользователи при желании могли обходить их, то есть просматривать обычную версию сайта на мобильных устройствах и наоборот.



Copyright 2018 SEO-MOB.ru