* РБК — новости

* *

Мы проверили, как Googlebot сканирует Javascript и вот что мы узнали

  1. TL; DR
  2. Введение: Google выполняет Javascript и читает DOM
  3. Что такое ДОМ?
  4. Серия тестов и результатов
  5. 1. JavaScript перенаправляет
  6. 2. Ссылки JavaScript
  7. 3. Динамически вставленный контент
  8. 4. Динамически вставленные метаданные и элементы страницы
  9. 5. Важный пример с rel = ”nofollow”
  10. Ветви

TL; DR

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

2. SEO сигналы в DOM (заголовки страниц, метаописания, канонические теги, теги мета-роботов и т. Д.) Соблюдаются. Содержимое, динамически вставляемое в DOM, также можно сканировать и индексировать. Кроме того, в некоторых случаях сигналы DOM могут даже иметь приоритет над противоречивыми утверждениями в исходном коде HTML. Это потребует дополнительной работы, но это имело место для нескольких наших тестов.

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

Еще в 2008 году Google успешно сканировал JavaScript , но, вероятно, ограниченным образом.

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

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

Что такое ДОМ?

Слишком мало SEO-специалистов понимают Объектная модель документа или ДОМ.

Что происходит, когда браузер запрашивает веб-страницу, и как используется DOM.

Как используется в веб-браузерах, DOM - это, по сути, интерфейс прикладного программирования, или API, для разметки и структурированных данных, таких как HTML и XML. Это интерфейс, который позволяет веб-браузерам собирать структурированные документы.

DOM также определяет, как эта структура доступна и управляется. Хотя DOM является независимым от языка API (не привязанным к конкретному языку программирования или библиотеке), он чаще всего используется в веб-приложениях для JavaScript и динамического содержимого.

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

Как JavaScript работает с интерфейсом DOM.

Мы были в восторге от возможности Google читать DOM и интерпретировать сигналы и контент, которые были динамически вставлены, такие как теги заголовка, текст страницы, теги заголовков и метааннотации, такие как rel = canonical. Читайте дальше для получения полной информации.

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

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

  1. JavaScript перенаправляет
  2. JavaScript ссылки
  3. Динамически вставленный контент
  4. Динамически вставленные метаданные и элементы страницы
  5. Важный пример с rel = «nofollow»

Один из примеров страницы, используемой для проверки способности робота Googlebot понимать JavaScript.

1. JavaScript перенаправляет

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

Результат: Google быстро переадресовал. С точки зрения индексации они интерпретировались как 301 - URL-адреса конечного состояния заменяли перенаправленные URL-адреса в индексе Google.

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

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

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

Использование JavaScript для перенаправления пользователей может быть законной практикой. Например, если вы перенаправляете пользователей на внутреннюю страницу после их входа в систему, вы можете использовать JavaScript для этого. При изучении JavaScript или других методов перенаправления, чтобы убедиться, что ваш сайт соответствует нашим рекомендациям, примите во внимание намерение. Помните, что перенаправления 301 лучше всего подходят при перемещении вашего сайта, но вы можете использовать JavaScript-редирект для этой цели, если у вас нет доступа к серверу вашего сайта.

2. Ссылки JavaScript

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

Мы протестировали ссылки выпадающего меню. Исторически поисковые системы не могли последовательно переходить по ссылкам такого типа. Наш тест пытался определить, будет ли выполняться обработчик события onchange . Важно отметить, что это особый тип точки выполнения: мы просим взаимодействие, чтобы что-то изменить, а не принудительное действие, как перенаправления JavaScript выше.

Пример выпадающего выбора языка на странице Google для работы.

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

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

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

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

Нашим следующим тестом было изучение дополнительных обработчиков событий, таких как тест onchange выше. В частности, мы рассматривали идею перемещения мыши в качестве обработчика событий, а затем скрывали URL с переменными, которые выполняются только при запуске обработчика событий (в данном случае onmousedown и onmouseout ).

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

Связанные ссылки: мы знали, что Google может выполнять JavaScript, но хотели подтвердить, что они читают переменные в коде. В этом тесте мы объединили строку символов, которые создали URL после его создания.

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

3. Динамически вставленный контент

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

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

1. Проверьте способность поисковой системы учитывать динамически вставляемый текст, когда текст находится в исходном HTML-коде страницы.

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

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

Более подробно об этом мы протестировали глобальную навигацию клиента, кодированную на JavaScript, со всеми ссылками, вставленными с помощью функции document.writeIn , и подтвердили, что они были полностью просканированы и отслежены. Следует отметить, что этот тип функциональности Google объясняет, как сайты, созданные с использованием платформы AngularJS и API истории HTML5 (pushState), могут отображаться и индексироваться Google, ранжируя, а также обычные статические HTML-страницы. Вот почему так важно не блокировать Googlebot от доступа к внешним файлам и ресурсам JavaScript, а также, вероятно, почему Google отходит от своих поддержка Ajax для SEO методические рекомендации. Кому нужны снимки HTML, когда вы можете просто отобразить всю страницу?

Наши тесты обнаружили одинаковый результат независимо от типа контента. Например, изображения были просканированы и проиндексированы при загрузке в DOM. Мы даже создали тест, в котором мы динамически генерировали data-vocabulary.org структурированная разметка данных для хлебных крошек и вставил его в DOM. Результат? Успешные обрывки крошек в поисковой выдаче Google.

Примечательно, что Google сейчас рекомендует разметку JSON-LD для некоторых структурированных данных. Я уверен, что это еще не все.

4. Динамически вставленные метаданные и элементы страницы

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

  • Элементы заголовка
  • Мета описания
  • Мета роботы
  • Канонические метки

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

Интересный дополнительный тест поможет нам понять порядок старшинства. Когда существуют противоречивые сигналы, какой из них побеждает? Что произойдет, если в DOM следовать noindex, nofollow в исходном коде и noindex ? Как заголовок ответа HTTP-робота ведет себя как другая переменная в этом расположении? Это будет частью будущего комплексного тестирования. Однако наши тесты показали, что Google может игнорировать тег в исходном коде в пользу DOM.

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

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

Наш тест nofollow изолирует исходный код от сгенерированных DOM аннотаций.

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

Ветви

Исторически, рекомендации SEO были сосредоточены вокруг наличия «простого текста» контента, когда это было возможно. Динамически генерируемый контент, ссылки AJAX и JavaScript наносят ущерб SEO для основных поисковых систем. Очевидно, что это больше не относится к Google. Javascript-ссылки работают аналогично обычным HTML-ссылкам (по сути, мы не знаем, что происходит за кулисами в алгоритмах).

  • Перенаправления Javascript обрабатываются так же, как перенаправления 301.
  • Динамически вставляемый контент и даже мета-сигналы, такие как релевантные аннотации, обрабатываются эквивалентным образом в исходном HTML-коде или запускаются после анализа исходного HTML-кода в JavaScript в DOM.
  • Похоже, что Google полностью отображает страницу и видит DOM, а не только исходный код. Невероятно! (Не забудьте разрешить Google-боту доступ к этим внешним файлам и ресурсам JavaScript.)

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

Также оптимизаторы, которые не поспевают за основополагающими концепциями и возможностями Google, преуспели бы в том, чтобы изучить и развить свои консультации, чтобы отразить современные технологии. Если вы не принимаете во внимание DOM, возможно, вам не хватает половины изображения.

Мнения, выраженные в этой статье, принадлежат автору гостя и не обязательно относятся к Search Engine Land. Штатные авторы перечислены Вот ,


Об авторе

Как?
Что такое ДОМ?
Кому нужны снимки HTML, когда вы можете просто отобразить всю страницу?
Результат?
Когда существуют противоречивые сигналы, какой из них побеждает?
Как заголовок ответа HTTP-робота ведет себя как другая переменная в этом расположении?
Зачем?

Реклама

Популярные новости

Агентство по эскорт услугам
У многих слово «эскорт» ассоциируется с элитным сопровождением, дорогими машинами и длинноногими красавицами-моделями, которых богатые владельцы крупных фирм берут с собой на светские рауты в качестве

Агентство недвижемоти
Здравствуйте товарищи! С вами Саша Борисов! В своей прошлой статье « Пишу, пишу, а посетителей все нет и нет» я говорил о том, как писать статьи правильно, соблюдая все базовые правила seo

Франшиза страхового агентства
К Вашему вниманию франшиза страхового агентства — Точка Страхования. Основными направлениями деятельности являются реализация полисов ОСАГО и КАСКО. Что входит в франшизу• Техническая поддержка наших

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

Федеральное агентство по техническому регулированию
В 2003 году, 1 июля, вступил в действие ФЗ, определяющий основы технического регулирования. В рамках закона создана новая система установления норм для производственных процессов, продукции, услуг и работ.

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

Русское агентство новостей
Русское Агентство Новостей (РуАН) создано, как альтернатива разнузданному, повсеместному шабашу, развёрнутому в СМИ равнодушными, недалёкими, продажными и недружественными к нормальным людям персонажами,

Мегаполис сервис агентство недвижимости
Агентство недвижимости «Мегаполис Сервис», предлагает все виды риэлторских услуг на рынке недвижимости. Купля-продажа, обмен квартир, домов, комнат, земельных участков, коттеджей, коммерческой недвижимости.

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

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


Реклама

Календарь новостей

Реклама

Архив новостей

Реклама