Как сканировать сайты JavaScript

  1. Попытка сканирования сайта JavaScript без рендеринга
  2. Как сканировать сайты JavaScript с помощью Sitebulb
  3. Что это за время рендеринга?
  4. Пример тайм-аута рендеринга
  5. Рекомендуемое время рендеринга
  6. Побочные эффекты сканирования с помощью JavaScript
  7. Как обнаружить JavaScript-сайты
  8. Брифинг для клиентов
  9. Попытка ползать
  10. Ручная проверка
  11. Дальнейшее чтение

Сканирование веб-сайтов в 2018 году не так просто, как это было несколько лет назад, и это в основном связано с ростом использования сред JavaScript, таких как Angular, React и Meteor.

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

Однако, если вы попытаетесь сканировать веб-сайт, созданный с помощью Angular, таким образом, вы не добьетесь большого успеха (в буквальном смысле). Чтобы «увидеть» HTML веб-страницы (а также содержимое и ссылки внутри нее), сканер должен обработать весь код на странице и фактически отобразить содержимое.

Google обрабатывает это в двухэтапном подходе , Первоначально они сканируют и индексируют на основе статического HTML («первая волна» индексации). Затем, когда у них есть ресурсы, доступные для визуализации страницы, они выполняют вторую волну индексации на основе визуализированного HTML.

Попытка сканирования сайта JavaScript без рендеринга

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

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

Рассматривать страница продукта для их самого популярного продукта. С Chrome -> Inspect мы можем увидеть h1 на странице:

Однако, если мы просто просмотрим исходный код на этой странице, h1 не будет видно:

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

Таким образом, если вы попытаетесь сканировать этот веб-сайт традиционным способом (используя «HTML Crawler»), все данные, которые обычно извлекает сканер, по существу невидимы для него. И вот что вы получите:

И вот что вы получите:

Одна страница.

Если бы Google пришел на свою первую волну индексации, все, что они нашли бы, это одна страница. И одна страница с очень маленьким на этом, в этом.

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

По сути, сканер должен притвориться браузером, позволить загружать весь контент, и только потом идти и анализировать HTML.

Вот почему вам нужен современный сканер, такой как Sitebulb, установленный в режиме Chrome Crawler, для сканирования таких сайтов.

Как сканировать сайты JavaScript с помощью Sitebulb

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

По умолчанию для сканера используется HTML Crawler, поэтому вам нужно использовать раскрывающийся список, чтобы выбрать Chrome Crawler. В некоторых случаях Sitebulb обнаружит, что сайт использует инфраструктуру JavaScript, и предупредит вас об использовании Chrome Crawler (и предварительно выберет его для вас, как на рисунке ниже).

В некоторых случаях Sitebulb обнаружит, что сайт использует инфраструктуру JavaScript, и предупредит вас об использовании Chrome Crawler (и предварительно выберет его для вас, как на рисунке ниже)

В этих случаях появится новая опция настроек - «Render Timeout».

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

Что это за время рендеринга?

Время ожидания рендеринга - это, по сути, то, как долго Sitebulb будет ждать завершения рендеринга, прежде чем делать «снимок HTML» каждой веб-страницы.

Джастин Бриггс опубликовал пост, который является отличным учебником по обработка контента JavaScript для SEO , который поможет нам объяснить, где подходит время рендеринга.

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

Период 'Render Timeout', используемый Sitebulb, начинается сразу после # 1, Первоначального запроса. Итак, по сути, тайм-аут рендеринга - это время, которое нужно ждать, пока все загрузится и отобразится на странице. Скажем, у вас задано время ожидания рендеринга 4 секунды, это означает, что на каждой странице есть 4 секунды для завершения загрузки всего содержимого и вступления в силу всех последних изменений.

Все, что изменяется через эти 4 секунды, не будет записано и записано Sitebulb.

Пример тайм-аута рендеринга

Я продемонстрирую на примере, наши друзья снова в Бейли из Шеффилда , Если я сканирую сайт без тайм-аута рендеринга, я получаю в общей сложности 30 URL. Если я использую 5 секундный тайм-аут, я получу 51 URL, почти вдвое больше.

(Аудит с 1 URL-адресом для сканирования, если вы помните, был от сканирования с помощью HTML-сканера).

Более подробно об этих двух обходах Chrome было найдено еще 14 внутренних URL-адресов HTML с 5-секундным таймаутом. Это означает, что в аудите без тайм-аута рендеринга контент, содержащий ссылки на эти URL-адреса, не был загружен, когда Sitebulb сделал снимок.

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

В этом случае было очень важно установить время рендеринга, чтобы Sitebulb мог видеть весь контент.

Рекомендуемое время рендеринга

Понимание того, почему существует тайм-аут рендера, на самом деле не помогает нам решить, на что его устанавливать. Мы просмотрели в Интернете подтверждение от Google о том, как долго они ждут загрузки контента, но мы нигде не нашли его.

Однако мы обнаружили, что большинство людей сходятся во мнении, что 5 секунд обычно считаются «правильными». Пока мы не увидим что-то конкретное от Google или не сможем провести еще несколько собственных тестов, мы будем рекомендовать 5 секунд для времени ожидания рендеринга.

Но все это покажет вам приблизительное значение, которое может видеть Google . Если вы хотите сканировать ВСЕ материалы на своем сайте, вам необходимо лучше понять, как на самом деле отображается содержимое на вашем сайте .

Для этого мы вернемся к консоли Chrome DevTools. Щелкните правой кнопкой мыши страницу и нажмите «Проверить», затем выберите «Сеть» на вкладках в консоли и перезагрузите страницу. Я расположил док справа от моего экрана, чтобы продемонстрировать:

Я расположил док справа от моего экрана, чтобы продемонстрировать:

Следите за графиком водопада, который строится, и временем, записанным в сводной панели внизу:

Следите за графиком водопада, который строится, и временем, записанным в сводной панели внизу:

Итак, мы записали 3 раза здесь:

  • DOMContentLoaded: 727 мс (= 0,727 с)
  • Нагрузка: 2,42 с
  • Финиш: 4,24 с

Вы можете найти определения «DOMContentLoaded» и «Load» из изображения выше, которое я взял из поста Джастина Бриггса. Время «Finish» - это именно то время, когда контент полностью отображается и все изменения или асинхронные сценарии завершены.

Если содержание веб-сайта зависит от изменений JavaScript, вам действительно нужно подождать время «Завершить», поэтому используйте это как практическое правило для определения времени ожидания рендеринга.

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

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

Побочные эффекты сканирования с помощью JavaScript

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

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

На самом деле, с точки зрения отчетности, буквально нет никакой разницы:

И на самом деле есть несколько недостатков при сканировании Chrome Crawler, например:

  1. Сканирование с помощью Chrome Crawler означает, что вам нужно извлекать и отображать каждый отдельный ресурс страницы (JavaScript, изображения, CSS и т. Д.), Что требует больше ресурсов как для локального компьютера, на котором работает Sitebulb, так и для сервера, на котором находится веб-сайт. размещен на.
  2. Как прямой результат # 1 выше, сканирование с помощью Chrome Crawler выполняется медленнее, чем с помощью Crawler HTML, особенно если вы установили длительное время ожидания рендеринга. На некоторых сайтах и ​​с некоторыми настройками может потребоваться больше времени на 6-10 X.

Таким образом, если вам не нужно сканировать с помощью Chrome Crawler, поскольку веб-сайт использует структуру JavaScript или если вы специально хотите посмотреть, как веб-сайт реагирует на сканер JavaScript, имеет смысл сканировать с помощью HTML Crawler по умолчанию.

Как обнаружить JavaScript-сайты

Для краткости я использовал фразу «сайты JavaScript», где я на самом деле имею в виду «сайты, которые зависят от контента, представленного JavaScript».

Скорее всего, тип веб-сайтов, с которыми вы сталкиваетесь, будет использовать одну из самых популярных платформ JavaScript, такую ​​как:

  • угловатый
  • реагировать
  • встраивать
  • позвоночник
  • Вью
  • метеор

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

Брифинг для клиентов

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

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

Попытка ползать

Начинать процесс аудита с помощью Chrome Crawler на самом деле не будет стоить вам слишком много времени, поскольку даже на самых «нишевых» веб-сайтах имеется более одного URL.

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

Это, безусловно, стоит иметь в виду, если вы типа «запусти и забудь», или вы склонны оставить Sitebulb на ночь с очередью сайтов для аудита… к утру вы будете горько разочарован.

Ручная проверка

Вы также можете использовать инструменты Google, чтобы помочь вам понять, как веб-сайт создан. Используя Google Chrome, щелкните правой кнопкой мыши в любом месте веб-страницы и выберите «Проверить», чтобы открыть Консоль Chrome DevTools ,

Затем нажмите F1, чтобы открыть настройки. Прокрутите вниз, чтобы найти отладчик, и отметьте «Отключить JavaScript».

Прокрутите вниз, чтобы найти отладчик, и отметьте «Отключить JavaScript»

Затем оставьте консоль DevTools открытой и обновите страницу. Содержимое остается неизменным или все исчезает?

Вот что происходит в моем примере с Бэйли из Шеффилда:

Заметили что-нибудь пропавшее?

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

Дальнейшее чтение

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