Как сканировать сайты JavaScript, AJAX, SPA и PWA

  1. Введение в сканирование JavaScript Исторически поисковые роботы, такие как Googlebot, не могли сканировать...
  2. Основные принципы JavaScript
  3. Совет Google по клиентскому JavaScript
  4. JavaScript SEO Решения
  5. Как определить сайты JavaScript
  6. ползком
  7. Клиент Q & A
  8. Отключить JavaScript
  9. Аудит Исходный код
  10. Аудит Оказанный Кодекс
  11. Панели инструментов и плагины
  12. Ручной аудит все еще требуется
  13. Как сканировать JavaScript с помощью SEO Spider
  14. 1) Настройте рендеринг на «JavaScript»
  15. 2) Проверьте ресурсы и внешние ссылки
  16. 3) Настройка User-Agent и размера окна
  17. 4) сканировать сайт
  18. 5) Мониторинг заблокированных ресурсов
  19. 6) Просмотр отображаемых страниц
  20. 7) Сравнить необработанный и визуализированный HTML
  21. 8) Настройте время ожидания AJAX
  22. Заключительные мысли

Введение в сканирование JavaScript

Исторически поисковые роботы, такие как Googlebot, не могли сканировать и индексировать контент, созданный динамически с помощью JavaScript, и могли видеть только то, что было в статическом исходном коде HTML.

Тем не менее, Google в частности развился, осуждая их старую схему сканирования AJAX Руководство по escape-фрагменту! URL-адреса и снимки HTML в октябре 15 года, и, как правило, способны отображать и понимать веб-страницы, как современный браузер.

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

Google открыто признает, что « трудно обрабатывать JavaScript, и не все сканеры поисковых систем способны обработать его успешно или сразу ».

Тем не менее, использование JavaScript возросло, и внедрение собственной платформы Google MVW JavaScript AngularJS, других платформ, таких как React и одностраничных приложений (SPA) и прогрессивных веб-приложений (PWA), находится на подъеме.

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

Традиционные сканеры веб-сайтов и SEO, которые используются для сканирования ссылок и контента веб-сайтов, могли сканировать только статический ответ HTML, пока мы не запустили первый в истории JavaScript рендеринг функциональность в нашей Screaming Frog SEO Spider программное обеспечение, поэтому JavaScript выполняется и DOM читается.

Мы интегрировали библиотеку проектов Chromium для нашего движка рендеринга, чтобы максимально эмулировать Google.

Google подтвердил, что они используют сервис веб-рендеринга (WRS) на основе Chrome 41 (М41). SEO Spider использует более позднюю версию Chrome, версия 64 на момент написания, но мы рекомендуем просмотреть точную версию в SEO Spider, нажав «Справка> Отладка» и прокрутив вниз до строки «Chrome Version».

Следовательно, хотя рендеринг, очевидно, будет похожим, он не будет точно таким же (есть некоторые аргументы, что сам Chrome 41 тоже не будет точно таким же)

Однако, как правило, WRS поддерживает те же функции и возможности веб-платформы, что и версия Chrome, которую он использует, и вы можете сравнить различия между Chrome 41 и 64 в CanIUse.com ,

Это руководство содержит следующие 3 раздела. Нажмите и перейдите к соответствующему разделу или продолжите чтение.

  1. 1) Почему нельзя слепо ползать с включенным JavaScript
  2. 2) Как определить JavaScript
  3. 3) Как сканировать сайты JavaScript

Если вы уже понимаете основные принципы JavaScript и просто хотите отсканировать веб-сайт JavaScript, перейдите прямо к нашему руководству по настройке Screaming Frog SEO Spider инструмент для сканировать сайты JavaScript , Или читайте дальше.

Почему нельзя слепо ползать с включенным JavaScript

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

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

Прежде всего, обход JavaScript выполняется медленнее и интенсивнее для сервера, так как все ресурсы (будь то JavaScript, CSS, изображения и т. Д.) Необходимо извлекать для отображения каждой веб-страницы. Это не будет проблемой для небольших сайтов, но для большого сайта с несколькими тысячами и более страницами это может иметь огромное значение.

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

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

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

Основные принципы JavaScript

Хотя Google обычно может сканировать и индексировать JavaScript, существуют некоторые основные принципы и ограничения, которые необходимо понимать.

  1. Все ресурсы страницы (JS, CSS, изображения) должны быть доступны для сканирования, визуализации и индексации.
  2. Google по-прежнему требует, чтобы чистые уникальные URL-адреса для страницы и ссылки были в правильных тегах привязки HTML (вы можете предложить статическую ссылку, а также вызвать функцию JavaScript).
  3. Они не кликают как пользователь и загружают дополнительные события после рендеринга (например, щелчок, наведение или прокрутка).
  4. Снимок отображаемой страницы создается за 5 секунд, поэтому к этому времени контент должен быть загружен, иначе он не будет проиндексирован для каждой веб-страницы.

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

Совет Google по клиентскому JavaScript

Важно помнить, что Google настоятельно рекомендует не полагаться исключительно на JavaScript, и рекомендовать развивается с прогрессивным улучшением построение структуры и навигации сайта с использованием только HTML, а затем улучшение внешнего вида и интерфейса сайта с помощью AJAX.

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

Это означает, что сканерам будет предоставлена ​​статическая HTML-версия веб-страницы для сканирования и индексации. Если у вас уже есть эта настройка, вы можете проверить эту функциональность, переключив пользовательский агент на робота Googlebot в SEO Spider.

Если у вас уже есть эта настройка, вы можете проверить эту функциональность, переключив пользовательский агент на робота Googlebot в SEO Spider

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

Хотя Google, как правило, может сканировать и индексировать JavaScript, существуют и другие соображения.

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

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

Другие поисковые системы, такие как Bing изо всех сил, чтобы сделать и индексировать JavaScript В масштабах собственного рендеринга Google используется более старая служба веб-рендеринга (Chrome 41), которая не поддерживает новые функции, а из-за хрупкости JavaScript довольно легко обнаруживать ошибки, препятствующие рендерингу и индексированию контента.

JavaScript SEO Решения

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

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

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

Многие JavaScript-фреймворки, такие как React или Angular Universal, допускают серверный и изоморфный рендеринг, который зачастую гораздо проще настроить, чем динамический, в то время как Безголовый хром может использоваться в качестве дополнительного решения для запуска JS, как это делается в браузере, и выкладывания его обратно в виде статического HTML.

Для дальнейшего чтения по SEO SEO, я настоятельно рекомендую руководство Джастина Бриггса на Основные принципы и SEO руководства по прогрессивные веб-приложения , Angular.JS, Универсальный Angular 2.0 и React.JS от Builtvisible. Я также рекомендую Бартоша Горалевича кусок о сканировании JavaScript, который затрагивает некоторые пункты этого руководства.

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

Как определить сайты JavaScript

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

Есть несколько способов узнать, построен ли сайт с использованием JavaScript-фреймворка.

ползком

Для многих это отправная точка, и вы можете просто начать сканирование веб-сайта со стандартной конфигурацией. По умолчанию SEO Spider будет сканировать, используя «старую схему сканирования AJAX», что означает, что JavaScript отключен, но старая схема сканирования AJAX будет соблюдена, если веб-сайт настроен правильно.

Если сайт использует JavaScript и настроен с URL-адресами с выделенным фрагментом (#!) И снимками HTML в соответствии со старой схемой сканирования AJAX от Google, то он будет просканирован, а URL-адреса появятся под Вкладка "AJAX" в SEO Spider. Эта вкладка содержит только страницы, использующие старую схему сканирования AJAX, а не все страницы, использующие AJAX.

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

Если сайт создан с использованием JavaScript, но не соответствует старой схеме сканирования или страницам предварительного рендеринга, то вы можете обнаружить, что только домашняя страница сканируется с ответом 200 OK и, возможно, парой файлов JavaScript и CSS, но не очень остальное.

Вы, вероятно, также обнаружите, что на странице практически нет «исходящих ссылок» на вкладке в нижней части инструмента, поскольку они не отображаются и, следовательно, не видны.

Вы, вероятно, также обнаружите, что на странице практически нет «исходящих ссылок» на вкладке в нижней части инструмента, поскольку они не отображаются и, следовательно, не видны

В приведенном выше примере экрана на вкладке «Исходящие ссылки» в SEO Spider отображаются файлы JS и CSS только на странице.

Клиент Q & A

Это действительно должно быть первым шагом. Один из самых простых способов узнать о веб-сайте - поговорить с клиентом и командой разработчиков и задать вопрос. Из чего построен сайт? Какую CMS он использует, или это на заказ?

Довольно разумные вопросы, и вы можете просто получить полезный ответ.

Отключить JavaScript

Вы можете отключить JavaScript в своем браузере и просматривать доступный контент. Это возможно в Chrome, используя встроенные инструменты разработчика, или, если вы используете Firefox, плагин панели инструментов веб-разработчика имеет те же функции. Доступен ли контент с отключенным JavaScript? Вы можете просто увидеть пустую страницу.

Вы можете просто увидеть пустую страницу

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

Аудит Исходный код

Простой, щелкнув правой кнопкой мыши и просмотрев необработанный исходный код HTML. Много ли на самом деле текста и HTML контента? Часто встречаются признаки и советы по использованию JS-фреймворков и библиотек. Можете ли вы увидеть содержимое и гиперссылки, отображаемые в вашем браузере в исходном коде HTML?

Вы просматриваете код до того, как он будет обработан браузером, и что будет сканировать SEO Spider, когда не в режиме рендеринга JavaScript.

Если вы запустите поиск и не сможете найти их в исходном коде, они будут динамически сгенерированы в DOM и будут видны только в отрендеренном коде.

Если вы запустите поиск и не сможете найти их в исходном коде, они будут динамически сгенерированы в DOM и будут видны только в отрендеренном коде

Если тело в значительной степени пусто, как в приведенном выше примере, это довольно четкое указание.

Аудит Оказанный Кодекс

Насколько отличается визуализированный код от статического HTML-источника? Щелкнув правой кнопкой мыши и используя «проверить элемент» в Chrome, вы можете просмотреть визуализированный HTML. Вы можете часто видеть имя JS Framework в отображаемом коде, например, «React» в приведенном ниже примере.

Вы можете часто видеть имя JS Framework в отображаемом коде, например, «React» в приведенном ниже примере

Вы обнаружите, что содержимое и гиперссылки находятся в отображаемом коде, но не в исходном HTML-коде. Это то, что увидит SEO Spider в режиме рендеринга JavaScript.

Нажав на открывающийся HTML-элемент, затем «copy> outerHTML», вы можете сравнить визуализированный исходный код с исходным.

Панели инструментов и плагины

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

Они не всегда точны, но могут предоставить некоторые ценные советы без особого труда.

Ручной аудит все еще требуется

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

Мы видим, что многие сайты электронной коммерции полагаются на JavaScript для загрузки продуктов на страницы категорий, что часто упускается веб-мастерами и SEO-специалистами, пока они не поймут, что страницы продукта не сканируются в ходе стандартного сканирования (без рендеринга).

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

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

Как сканировать JavaScript с помощью SEO Spider

После того, как вы определили JavaScript, который хотите сканировать, вам нужно настроить режим рендеринга SEO Spider на JavaScript, чтобы иметь возможность его сканировать.

Следующие 7 шагов должны помочь вам настроить обход в большинстве случаев.

1) Настройте рендеринг на «JavaScript»

Чтобы сканировать веб-сайт JavaScript, откройте SEO Spider, нажмите «Конфигурация> Spider> Рендеринг» и измените «Рендеринг» в «JavaScript» ,

Чтобы сканировать веб-сайт JavaScript, откройте SEO Spider, нажмите «Конфигурация> Spider> Рендеринг» и измените   «Рендеринг» в «JavaScript»   ,

2) Проверьте ресурсы и внешние ссылки

Обеспечить ресурсы, такие как изображений , CSS а также JS помечены под «Конфигурация> Паук».

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

Это конфигурация по умолчанию в SEO Spider, поэтому вы можете просто нажать «Файл> Конфигурация по умолчанию> Очистить конфигурацию по умолчанию», чтобы вернуться к этой настройке.

3) Настройка User-Agent и размера окна

Вы можете настроить как Агент пользователя в разделе «Конфигурация> HTTP-заголовок> Пользователь-агент» и размер окна нажав «Конфигурация> Паук> Рендеринг» в режиме рендеринга JavaScript в соответствии с вашими требованиями.

Это необязательный шаг, размер окна устанавливается в соответствии с размерами рабочего стола Googlebot в стандартной конфигурации. Ожидается, что Google скоро перейдет к индексу, ориентированному на мобильные устройства, поэтому, если вы проводите мобильный аудит, вы можете настроить SEO Spider так, чтобы он имитировал робота Googlebot для смартфонов.

4) сканировать сайт

Теперь введите или вставьте веб-сайт, который вы хотите сканировать, в поле «введите URL-адрес для паука» и нажмите «Пуск».

Теперь введите или вставьте веб-сайт, который вы хотите сканировать, в поле «введите URL-адрес для паука» и нажмите «Пуск»

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

5) Мониторинг заблокированных ресурсов

Следите за всем, что появляется под фильтром «Заблокированные ресурсы» на вкладке «Коды ответов». Вы можете взглянуть на правую панель обзора, а не кликать по вкладке. Если JavaScript, CSS или изображения заблокированы через robots.txt (не отвечает или не выдает ошибку), это повлияет на рендеринг, сканирование и индексацию.

txt (не отвечает или не выдает ошибку), это повлияет на рендеринг, сканирование и индексацию

Заблокированные ресурсы также можно просматривать для каждой страницы на вкладке «Rendered Page» рядом с отображаемым снимком экрана в нижней панели окна. В серьезных случаях, если сайт JavaScript полностью блокирует ресурсы JS, сайт просто не будет сканироваться.

В серьезных случаях, если сайт JavaScript полностью блокирует ресурсы JS, сайт просто не будет сканироваться

Если ключевые ресурсы, влияющие на визуализацию, заблокированы, разблокируйте их для сканирования (или разрешите им использовать custom robots.txt для сканирования). Вы можете протестировать различные сценарии, используя оба исключать и пользовательские функции robots.txt.

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

6) Просмотр отображаемых страниц

Вы можете просмотреть отрендеренную страницу, которую SEO Spider просканировал на вкладке «Отрисованная страница», которая динамически отображается в нижней части пользовательского интерфейса при сканировании в режиме рендеринга JavaScript. Это заполняет нижнюю панель окна при выборе URL в верхнем окне.

Просмотр отрендеренной страницы жизненно важен при анализе того, что может видеть современный поисковый бот, и особенно полезен при выполнении проверки при постановке, когда вы не можете использовать собственный Google Fetch & Render в Search Console.

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

Если вы настроили пользовательский агент и окно просмотра для смартфона Googlebot, вы можете точно увидеть, как каждая страница отображается на мобильном телефоне, например

Если вы обнаружите какие-либо проблемы на снимках экрана с отображаемой страницей, и это связано не с заблокированными ресурсами, вам может потребоваться изменить Тайм-аут AJAX или копание глубже в отрисованном исходном коде HTML для дальнейшего анализа.

7) Сравнить необработанный и визуализированный HTML

Возможно, вы захотите хранить и просматривать HTML и визуализированный HTML в SEO Spider при работе с JavaScript. Это можно настроить в «Конфигурация> Паук> Дополнительно» и отметив галочкой соответствующий хранить HTML & хранить визуализированный HTML опции.

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

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

8) Настройте время ожидания AJAX

Основываясь на ответах вашего сканирования, вы можете выбрать, когда снимок отрисованной страницы будет сделан, настроив ' Тайм-аут AJAX », который установлен на 5 секунд, в« Конфигурация> Паук> Рендеринг »в режиме рендеринга JavaScript.

Основываясь на ответах вашего сканирования, вы можете выбрать, когда снимок отрисованной страницы будет сделан, настроив '   Тайм-аут AJAX   », который установлен на 5 секунд, в« Конфигурация> Паук> Рендеринг »в режиме рендеринга JavaScript

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

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

Стоит отметить, что сканирование нашим программным обеспечением часто будет более ресурсоемким, чем регулярное сканирование Google с течением времени. Это может означать, что время ответа сайта обычно медленнее, и время ожидания AJAX требует корректировки.

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

Заключительные мысли

Приведенное выше руководство должно помочь вам определить веб-сайты JavaScript и эффективно сканировать их с помощью Screaming Frog SEO Spider инструмент в JavaScript рендеринг Режим.

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

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

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

Из чего построен сайт?
Какую CMS он использует, или это на заказ?
Доступен ли контент с отключенным JavaScript?
Много ли на самом деле текста и HTML контента?
Можете ли вы увидеть содержимое и гиперссылки, отображаемые в вашем браузере в исходном коде HTML?