Главная / Блог / Динамическая мобильная версия сайта

Динамическая мобильная версия сайта

Методы создания динамического мобильного сайта
548
30-06-2017 12:00
Запрет на сканирование JavaScript или CSS-файлов в robots.txt вашего сайта может навредить алгоритмам отображения и индексации вашего контента, что может привести его к неоптимальному ранжированию. Именно такое предупреждение дает вебмастерм Google Webmaster Blog. А теперь давайте разбираться с тем, какие же есть варианты создания динамического сайта.

Google проверяет и индексирует ваш сайт с помощью “паука” под названием Googlebot. Также существует мобильная версия этого бота - Googlebot MobileВ идеале, Googlebot находит десктопные страницы для пользователей компьютеров, а Googlebot Mobile обнаруживает оптимизированные страницы для мобильных устройств.


Наглядный пример, как в идеале Google должен индексировать ваш сайт 

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


Если файлы JS и CSS заблокированы, то Googlebot не сможет корректно обработать и отразить мобильный контент

Чтобы правильно обрабатывать и отображать ваши оптимизированные мобильные страницы и контент на них, необходимо предоставить доступ Googlebot к файлам JS и CSS. Если сайт, по мнению Google, будет считаться не адаптированным под мобильные устройства, то вы лишаете себя одного из фактора ранжирования и возможного попадания в ТОП серпа.

Компания Google рекомендует следующие распространенные конфигурации использования JavaScript для оптимизации под смартфоны:
  • Адаптация с помощью JavaScript;
  • Комбинированное определение условий;
  • Динамическое использование JavaScript.

Адаптация с помощью JavaScript (Javascript Adaptive)


Принцип работы адаптации с помощью JavaScript

В таком подходе для всех пользователей (десктопных и мобильных) отправляется одинаковый контент посредством одного HTML, JavaScript и CSS. Код JS подстраивает сайт под нужные устройства в зависимости от их характеристик.

Особенности адаптации с помощью JavaScript:
  • Автоматически определяется роботом Google;
  • Не нужно использовать HTTP-заголовок Vary;
  • Предпочтительный метод Google;
  • Для всех пользователей всегда отображается одинаковый контент;
  • Возможна долгая загрузка сайта на мобильных устройствах.

Комбинированное определение условий (Combined detection)


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

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

На основании вышесказанного Google относит эту конфигурацию к динамическому показу. Для правильного определения варианта кода HTML необходимо использовать HTTP-заголовок Vary: User-agent.

Особенности комбинированного определения условий:
  • Google относит этот тип к динамическому показу;
  • Нужно использовать HTTP-заголовок Vary;
  • Невозможно автоматическое определение роботом Google;
  • Отображение уникального контента для различных устройств;
  • Влияние на скорость загрузки мобильной версии сайта;
  • Полный контроль над DOM с помощью JavaScript.

Динамический показ JavaScript (Dynamically-served JavaScript)

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


Наглядный пример реализации динамического показа с помощью JavaScript

Все устройства получают одинаковый HTML-код с тегом <script>, который указывает на внешний JavaScript, содержимое которого может отличаться в зависимости от User-agent.

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

Особенности динамического показа JavaScript:
  • Google относит этот тип к динамическому показу;
  • Нужно использовать HTTP-заголовок Vary;
  • Невозможно автоматическое определение роботом Google;
  • Отображение уникального контента для различных устройств;
  • Влияние на скорость загрузки мобильной версии сайта.

Заключение

Сервис uMobilizer при создании мобильных версий сайта использует технологию комбинированного определения условий. А какой вы используете вариант конфигурации на своем сайте?

Оригинальный материал (перевод и адаптация) и используемые в статье изображения - Javascript & mobile SEO.