AIN.UA » ТехноКак Google индексирует JavaScript: результаты тестов

Как Google индексирует JavaScript: результаты тестов

12730

Пока все переживали по поводу того, что же сделает Google с мобильной выдачей, специалисты из Merkle|RKG решили изучить еще один важный вопрос: как Google управляется с JavaScript? Они провели серию тестов, чтобы посмотреть, как различные функции JavaScript индексируются Google, а результаты изложили в статье на Search Engine Land. AIN.UA предлагает вам перевод ее тезисов. Редакция благодарит веб-девелопера Promodo Николая Тимурку за консультации при переводе.

  1. Мы провели серию тестов, которые подтвердили, что Google может выполнять и индексировать JavaScript, мы также доказали, что Google способен рендерить целую страницу и читать DOM, таким образом, индексируя динамически генерируемый контент.
  2. SEO-сигналы в DOM (названия страниц, мета-описания, мета-теги robots, теги canonical) принимаются во внимание. Контент, который динамически вносится в DOM, также доступен для индексирования. Более того, в некоторых случаях DOM-сигналы для Google важнее, чем информация в HTML, которая им противоречит.

Введение: Google выполняет Javascript и читает DOM

Еще в 2008 году Google успешно краулил JavaScript, но в несколько ограниченном виде. Сегодня ясно, что в Google не только расширили перечень типов JavaScript, который они краулят и индексируют, но и добились значительных успехов в рендере полной веб-страницы (особенно за последние 12-18 месяцев).

Наша SEO-команда хотела лучше разобраться в том, какие именно JavaScript-события способен отслеживать Googlebot. Нам удалось получить впечатляющие результаты, а также доказать, что Google не просто выполняет различные типы событий JavaScript, но и индексирует динамически генерируемый контент. Как? Google читает DOM.

Что такое DOM?

Немногие SEO-специалисты обладают пониманием того, как работает Document Object Model или же DOM. В браузерах DOM — это, по сути, API для разметки и структурированных данных, таких как HTML и XML. Это интерфейс, который дает браузеру возможность собирать структурированные документы.

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

DOM — это интерфейс, либо же «мост», который связывает веб-страницы и языки программирования. HTML парсится, JavaScript выполняется, а в результате получается DOM. Содержание веб-страницы — это не просто исходный код, это DOM. Иными словами, это важная штука.

js2Мы с удивлением обнаружили способность Google читать DOM и интерпретировать динамические сигналы и контент, такие как теги title, текст страницы, мета-аннотации, такие как rel=canonical. Ниже — подробное описание наших тестов.

Серии тестов и их результаты

Мы разработали и провели серию тестов, чтобы изучить, как различные функции JavaScript краулятся и индексируются «гуглботом». Несколько интересных результатов, которых нам удалось достичь, описаны ниже. Мы разделили их на пять категорий:

  • Редиректы JavaScript
  • JavaScript-ссылки
  • Динамическая подгрузка контента (Dynamically Inserted Content)
  • Динамическая загрузка мета-данных и элементов страницы
  • Пример с rel=“nofollow”

js3

1. JavaScript-редиректы

Сначала мы тестировали обычные JavaScript-редиректы, где URL был представлен различными способами. Выбранный нами метод — функция window.location. Мы провели два теста: тест А включал абсолютный URL, тест Б — относительный.

Результаты: Google быстро отследил результаты. Их распознали по схеме переадресации 301 — конечные URL заменили в индексе URL, с которых шли редиректы.

В последующем тесте мы задействовали оригинальную страницу и включили JavaScript-редирект на новую страницу на сайте, с точно таким же контентом. Оригинальный URL находился на первой странице выдачи по популярным запросам.

Результаты: Как и ожидалось, редирект отслеживался Google и оригинальная страница выпала из индекса. Новый URL был проиндексирован и тотчас же занял такую же позицию по тем же запросам. Это нас удивило, возможно, это означает, что иногда JavaScript-редиректы могут вести себя точно так же, как обычный 301 редирект с точки зрения поисковика.

В следующий раз, когда ваш клиент захочет внедрить JavaScript-редиректы для продвижения сайта, ваш ответ не обязательно должен звучать как «Пожалуйста, не надо!». Оказывается, это тоже может влиять на ранжирование. Это подтверждает и цитата из руководства Google:

«Использование JavaScript для переадресации пользователей вполне может применяться. К примеру, если вы переадресовываете пользователей на внутреннюю страницу, как только они залогинились, вы вполне можете пользоваться для этого JavaScript. Изучая JavaScript и другие методы переадресации, учитывайте, что 301 редирект лучше всего влияет на позиции вашего сайта, но вполне можно использовать и JavaScript для этой цели (к примеру, если у вас нет доступа к серверу вашего сайта)».

2. JavaScript-ссылки

Мы протестировали различные типы JavaScript-ссылок, написанные по-разному.

js4К примеру, ссылки выпадающего меню. Исторически поисковые машины неспособны отслеживать такие типы ссылок постоянно.

Результаты: Ссылки полностью краулились и отслеживались.

Мы также тестировали стандартные JavaScript-ссылки. Это — наиболее распространенные типы таких ссылок, которые SEO-специалисты обычно просят менять на простой текст. Они включали:

  • Функции за пределами href AVP, но в рамках тега (“onClick”)
  • Функции внутри href AVP (“javascript:window.location”)
  • Функции за пределами a, но вызываемые в пределах href AVP (“javascript:openlink()”) и так далее.

Результаты: Ссылки полностью краулились и отслеживались.

Наш следующий тест должен был проверить, как работают обработчики событий вроде тех, которые реагируют на движения мыши. Мы намеревались спрятать URL за переменными, которые выполняются только, когда задействуется обработчик событий (например, onMouseDown и onMouseOut).

Результаты: Ссылки полностью краулились и отслеживались.

Составные ссылки: мы знали, что Google может выполнять JavaScript, но хотели подтвердить, что он может читать и переменные внутри кода. В этом тесте мы составили последовательность символов, из которых создавался URL once it was constructed.

Результаты: Ссылки полностью краулились и отслеживались.

3. Динамически подгружаемый контент

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

  1. Проверить возможность поисковика принимать во внимание динамический текст, если текст находится на HTML-странице.
  2. Проверить способность поисковика принимать во внимание динамический текст, если он расположен вне HTML страницы (во внешнем JavaScript-файле).

Результаты: в обоих случаях текст краулился и индексировался, а страница росла в выдаче благодаря контенту. Что и требовалось!

Более того, мы протестировали навигацию клиента, которая написана на JavaScript, со всеми ссылками в функции document.writeIn, и подтвердили, что они также индексируются. Теперь понятнее, как сайты, созданные с использованием фреймворка AngularJS и HTML5 History API (pushState) индексируются Google и ранжируются не хуже обычных статических HTML-страниц.

Вот почему важно не блокировать гуглботу доступ к внешним файлам и JavaScript-ассетам, а также объясняет, почему Google постепенно уходит от AJAX в своих рекомендациях SEO. Кому нужны HTML-слепки, если можно просто рендерить целую страницу?

Наши тесты показали подобные результаты для разных типов контента.

4. Динамически подгружаемые мета-данные и элементы страницы

Мы динамически внедрили в DOM различные теги, важные для SEO:

  • Элементы title
  • Мета-описания
  • Мета-теги robots
  • Теги canonical

Результаты: Во всех случаях теги краулились, точно так же, как HTML-элементы в исходном коде.

Мы также обратили внимание на то, что происходит, когда гуглбот считывает противоречащие сигналы. Например, если таковые есть в исходном коде и в DOM? Вопрос еще требует последующего исследования, но предварительно тесты показали, что Google может не обратить внимания на тег в исходном коде и предпочесть ему тег в DOM.

5. Важный пример с rel=“nofollow”

Мы хотели проверить, как Google отреагирует на атрибут nofollow на уровне ссылок, помещенный в исходный код по сравнению с ним же, помещенном в DOM. Мы также создали контрольную страницу вообще без nofollow.

js5Nofollow в исходном коде сработал как и ожидалось (поисковая система не переходила по ссылкам). Nofollow в DOM не сработал (поисковый бот перешел по ссылке и страница была проиндексирована). Почему так случилось? Потому что модификация href-элемента в DOM произошла слишком поздно: Google уже прошел по ссылке и отметил URL, прежде чем была выполнена функция JavaScript, которая добавляет тег rel=“nofollow”. Однако, если целый элемент a href с тегом nofollow поместить в DOM, поисковый бот не пройдет по ссылке.

Выводы

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

Заметили ошибку? Выделите ее и нажмите Ctrl+Enter, чтобы сообщить нам.

2

Комментарии | 2

Поиск

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: