DeepCrawlではページレンダリングサービス（PRS）の機能を使ってJavaScriptで作成されたサイトをクロールすることもできます。これによりJavaScriptサイトやPWAなどの技術的な健全性を分析することができます。

ページレンダリングサービス（PRS）

DeepCrawlは最新の検索エンジンのようにJavaScriptを実行する、ページレンダリングサービスを提供しています。これにより、JavaScriptのライブラリやフレームワークを用いてレンダリングすることで、クライアント側にあるリンクやコンテンツを発見することができます。
ページのレンダリングサービスはJavaScriptのレンダリングについて最新のGoogle Chromeを使っています。セキュリティの観点、また最新のWebテクノロジーを利用するため、DeepCrawlでは、Google Chromeのリリースの度にレンダリングエンジンを更新し続けています。
Google Chromeがサポートしている最新の機能については、 referring to chromestatus.com を参照するか、 caniuse.comの機能比較をご利用ください。

JavaScriptレンダリングに関するDeepCrawlのPRSとGoogleボットの違い

At Google I/O 2019, でGoogleのウェブマスターのトレンドアナリストであるMartin Splitt氏が、GoogleボットのWebレンダリングサービス（WRS）ではページのレンダリングのために最新の安定したChromeを使っていると発表しました。
この発表が意味するところは、DeepCrawlのページレンダリングサービス（PRS）とGoogleボットのWRSはウェブのレンダリングについて最新の安定したChromeを使っているということです。
PRSはGoogleボットやWRSのようにページを読み込み、レンダリングを行うように設計されており、かつ両者は最新の安定したChromeを使っていることを考えると、PRSとGoogleのレンダリング手法や能力にほとんど乖離がないと言えます。
最新の安定したChromeがサポートする全ての機能に関して、chromestatus.com を参照いただくか、または caniuse.comにて機能の比較をされることをおすすめします。
WRSやGoogleボットについての詳細な情報は以下のリンクをご利用ください。

JavaScriptレンダリングに関するDeepCrawlのPRSとBingの違い

Bingは、BingボットがJavaScriptを発見した場合にはレンダリングを行うと公式に発表しています。またBingのクロールチームは、2019年10月10月にWebブラウザである最新のEdgeを使っているあらゆるウェブページのレンダリングを行うことを公表しました。これは、今後Bingのクローラーが最新のEdgeを使ってレンダリングを行うことを意味しています。
Bingボットがページをレンダリングできるかより深く理解するには、Bing mobile-friendly test toolを使ってみてください。これはBingボットと同じレンダリングエンジンを使っており、テストに最適です。

PRSはDeepCrawl上でどのように機能するか

DeepCrawlはクラウドベースのサイトクローラーであり、サイトやウェブアプリのリンクに従い、ページ毎のテクニカルSEOデータの概要を把握するのに役立ちます。
このページレンダリングサービスはDeepCrawl内で以下のように機能します。

開始URLとURLのデータソースがプロジェクト設定にて追加される
プロジェクト設定に基づき、開始URLからクロールが開始される
PRSを使って開始URLが読み込まれる
PRSがページを読み込み、サーバーが反応してページがロードされるまで最大10秒間待つ
PRSはカスタムスクリプトインジェクションが実行されるまで最大５秒間待つ
ページが反応してロードされ、カスタムスクリプトが実行されると、クローラーがHTMLのローデータとレンダリングされたHTMLをクロールするレンダリングされたHTMLは分解され、SEOの指標がクローラーに蓄積される
レンダリングされたHTMLが解析され、SEOメトリクスが保存されます。
ページのレンダリングされたHTML内にある全てのリンクがクロールのスケジューラに追加される
DeepCrawlは上記で追加されたURLをクロールし続ける
クロールのスケジューラは、同じクロール階層（クロール深度）にある全てのWebドキュメントが検出されるまで待機してから、次の階層のクロールを開始できるようにします。これは下階層のページがクロールキューにある場合も同様です。
クローラーにより読みこまれた全てのSEOの指標は、SEOデータを処理し、DeepRankなどの指標を算出するエンジンに送られる
このエンジン部分がデータ分析を終えると、レポートAPIにデータが共有され、DeepCrawl内のレポートが作成される

このプロセスにより、文章オブジェクトモデル（DOM）をクロールし、レンダリングすることが可能になり、結果的にJavaScriptのフレームワークやライブラリに依存するサイトのクロールができるようになります。

DeepCrawlでJavaScriptレンダリングを設定する方法

DeepCrawlでJavaScriptレンダリングの設定を行うには、DeepCrawlでJavaScriptレンダリングを設定する方法を参照してください。

JavaScriptサイトが最適なリンク構造に合致する必要があることは、PRSが確実にそのサイトを見つけてクロールするために最も重要です。

PRSがサイトを確実にクロールできるようにする

PRSを使ってサイトをクロールする前に、以下の仕様をご確認ください。

PRSとアンカーリンク

JavaScriptサイトが最適なリンク構造に合致する必要があることは、PRSが確実にそのサイトを見つけてクロールするために最も重要です。
DeepCrawlはhref属性をもつHTMLの要素である場合に限り、JavaScriptによって作成されたリンクを検出し、それに従います。
DeepCrawlが従うリンクの例：

<a href=”https://break-hearts-not-links.com”>
<a href=”/get/to/the/crawler.html”>

PRSが従わない（デフォルトでは）リンクの例：

<a routerLink=”I/am/your/crawler.html”>
<span href=”https://example.com”>
<a onclick=”goto(‘https://example.com’)”>

これは現行で最善のSEO対策と、Googleがサーチコンソールのヘルプドキュメントにて推薦している内容に合致しています。

PRSと動的コンテンツ

ユーザーとのインタラクションが必要なHTMLの要素はPRSによりレンダリングされないことにご注意ください。これはユーザーがクリックしたり同意するまでDOMに現れない重要なナビゲーションやコンテンツの一部は、DeeoCrawlがクロールできないことを意味しています。
PRSが認識しない動的要素の例：

Onclicのイベント
onmouseoverやonmouseoutのEvents
ページ要素の遅延読み込み

上記のようなデフォルトで設定されている動きは、まさにGoogleがページが読み込まれたあとに各イベントに対して取る動きに合致しています。
GoogleによるJavaScriptの処理方法の詳細については、次をご覧ください。

PRSはクロール時に”市民権がない”

PRSがページをクロールするとき、デフォルト設定では、PRSに”市民権”がありません。これは以下のことを意味しています。

それぞれのページがレンダリングされるとローカルに保存されているデータは削除される
HTTPクッキーはページがレンダリングされるときは受け取られない

これは、ユーザーにクッキーのダウンロードを要求するあらゆるコンテンツがPRSによってレンダリングされないことを意味しています。
これは、GoogleのWebレンダリングサービスの仕様と合致しています。

PRSが許可リクエストを拒否する

ユーザーの許可を求めるあらゆるコンテンツは、デフォルト設定では、ページレンダリングサービスにより拒否されます。例えば以下のようなものが該当します。

Camera API
Geolocation API
Notifications API

これはGoogle’sのWebレンダリングサービスが許可リクエストを処理する方法に合致しています。

PRSの静的な地理的IPアドレスのクロール

PRSは特定の静的な地理的IPアドレスのクロールを行うことができません。レンダリング中のクローラーからのあらゆるリクエストは52.5.118.182のIPアドレス経由であり、これはアメリカのIPアドレスとなります。
もしクロールを実行するためにホワイトリスト化する必要があれば、このIPアドレスをホワイトリストに追加してください。　

PRSとDNSのカスタマイズ

カスタマイズされた任意のDNS設定では現状クロールすることはできません。

PRSがJavaScriptのリダイレクトに従う

PRSはJavaScriptのリダイレクトを検出し、それに従います。これらは通常のリダイレクトのように扱われ、DeepCrawlのレポートの中の、設定 > リダイレクト > JavaScriptのリダイレクトにて表示されます。
DeepCrawl JavaScript report

PRSは状態の変化を検出できない

デフォルト設定ではPRSはサイトの状態変化を検出することができません。もしサイトが状態の変化を利用していれば、PRSは”カスタムスクリプト”にて以下のスクリプトを追加することにより、これらの変化を適切なロケーションの変化に変えることでこれらを検出することができます。

PRSが特定のインターフェースや能力を無効にする

PRSはGoogle Chromeの以下のようなインターフェースや機能を無効化します。

インデックスされたデータベースやWebSQLのインターフェース
Service Workers
WebGLインターフェースが無効化されている場合

これは、特定のインターフェースやレンダリング能力に関して、GoogleのWebレンダリングサービスの仕様と合致しています。

PRSが分析と広告スクリプトをブロックする

PRSはデフォルトでは一般的な分析と広告スクリプトをブロックします。これは、PRSが通常のChromeを利用しており、多くの分析、広告、その他トラッキングスクリプトをクロール時に実行するためです。PRSを利用してクロールする際に分析データが膨大になるのを防ぐため、DeepCrawlではこれらのスクリプトをデフォルトでブロックするようにしております。
分析スクリプトがブロックされる
DeepCrawlがデフォルトでブロックする分析ツールのトラッキングコードのリストは以下のとおりです。

*//*.google-analytics.com/analytics.js
*//*.google-analytics.com/ga.js
*//*.google-analytics.com/urchin.js
*//*stats.g.doubleclick.net/dc.js
*//*connect.facebook.net/*/sdk.js
*//platform.twitter.com/widgets.js
*//*.coremetrics.com/*.js
*//sb.scorecardresearch.com/beacon.js
quantserve.com
service.maxymiser.net
cdn.mxpnl.com
statse.webtrendslive.com
*//s.webtrends.com/js/*

広告スクリプトがブロックされる
DeepCrawlがデフォルトでブロックする広告トラッキングコードのリストは以下のとおりです。

*//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
*//*.2mdn.net/ads/*
*//static.criteo.net/js/ld/*.js
*//widgets.outbrain.com/outbrain.js
*//*.g.doubleclick.net/*
*//c.amazon-adsystem.com/aax2/apstag.js
*//cdn.taboola.com/libtrc/dailymail-uk/loader.js
*//ib.adnxs.com/*
*://*.moatads.com/*/moatad.js
track.adform.net

カスタム分析または広告スクリプトをブロックする

コンテンツのレンダリングにとって重要ではないカスタムのスクリプトはどのようなものであれ、ブロックすべきです。スクリプトをブロックするには、設定 > スパイダー設定 > JavaScriptレンダリング >カスタム拒否にて行ってください。
deepcrawl custom js rejection

PRSのスクリプトインジェクションのカスタマイズを許可

レンダリング時、PRSはカスタムスクリプトがページにインジェクトされるのを許可します。このユニークな機能により追加的な分析やWebページの操作が可能となります。
PRSはカスタムスクリプトが以下のように追加されることを許可します。

“外部のJavaScriptソース“に10以内のJavaScriptのURLを追加する
”カスタムJavaScript”にスクリプトを追加する

カスタムインジェクションを利用してページに追加されたデータを抽出するには、アウトプットをページに追加した上で、カスタム抽出機能を利用する必要があります。
このページレンダリング機能によりユーザーが以下のことが可能になります。

要素をページのDOMへと書き換える
各ページのChromeによる読み込み時間を分析して抽出する
仮想クロールを作成し、DeepCrawlの動きを変える

詳しくはこちらをご覧ください。

よくある質問

なぜJavaScriptのクロールが機能しないのでしょうか？

PRSの技術的仕様をご確認いただき、貴社サイトがJavaScriptのSEO原則に従っているか確認してください。
サイトがJavaScriptのSEO原則に従っていれば、debugging blocked crawlsやcrawling issue guidesをお読みいただくようおすすめしております。
もしサイトがまだクロールできない場合、弊社のサポートチームへご連絡ください。

PRSを使ったサイトのクロールはどのような速さにすると良いのでしょうか？

これはお持ちのWebサーバーやサイトの技術的な側面に依存します。
クロールのスピードが早すぎると、DeepCrawlが大量のリクエストを行うためサイトのサーバーに負荷がかかりすぎる可能性があります。これは、PRSがページをロードするとき、JavaScriptやCSS、画像といった複数のソースをリクエストするためです。
弊社では、スピードの設定を検証するためにサンプルクロールを実行することをおすすめしております。これによりお使いのサーバーがPRSに対応しているかを確認することができます。
setting crawl limits DeepCrawl
もしどのようなスピードにすべきかわからない場合、こちらのカスタマーサポートサービスへお問い合わせください。

AJAXのクロールスキームを使ってクロールするには？

この記事を執筆している時点でDeepCrawlはAJAXのクロールスキームをサポートしております。詳しい設定方法などは、60-second DeepCrawl AJAX crawling guide をご覧ください。
DeepCrawlはAJAXのクロールスキームをサポートしていますが、Googleがこのクロールスキームへのサポートを縮小すると公式に発表したことにご留意ください。
GoogleもBingもJavaScriptで生成されたコンテンツがクロールされ、インデックスされるため、近頃は動的レンダリングをおすすめしているようです。もしサイトがAJAXのクロールスキームに基づいている場合、このGoogleの提供する動的レンダリングという新しいソリューションがJavaScriptを使ったサイトのクロールとインデックスに役立ちます。

PRSのタイムアウト上限は？

レンダリングのタイムアウト期間の上限は１ページにつき15秒であり、２つに分ける事ができます。

PRSには１つのページが反応し、コンテンツがロードされる時間として10秒のタイムアウト上限があります。
加えて、追加のカスタムスクリプトのロード時間として５秒のタイムアウト上限があります。

ページが15秒のタイムアウト時間内にレンダリングを完了しない場合、PRSは処理のためにその時点でページにロードされたコンテンツを使用します。
ページレンダリングサービスは、サーバーが10秒以内に応答する限り、常にカスタムスクリプトを判断します。（例：1バイト目までの時間）
これはもしページがレンダリングに20秒かかるのであれば、15秒の時点でレンダリングされたコンテンツを使用するという意味であり、その後のレンダリングは含まれないということです。
もしサーバーがDeepCrawlからの最初のリクエストへの応答に14秒かかるのであれば、そのページのスナップショットを取る前に、1秒分のみレンダリングに適用されることを意味しています。

JavaScriptのパフォーマンスがPRSのクロール速度に影響するのでしょうか？

はい、サイトのパフォーマンスが遅い場合、PRSは遅い速度でクロールを行います。
ページが遅いか判断するためにGoogle LighthouseやPageSpeed といったツールを使って、サイトにある遅いページを検出してください。

※※画像※※

”render_timed_out”エラーとは？

render_timed_outエラーが発生した場合、DeepCrawlがそのページをレンダリングするとサーバーが15秒というタイムアウト上限内で全く応答しないということを意味しています。
このエラーはHTTPレスポンスヘッダーやHTMLのbodyタグがまったくない場合にのみ発生します。
このエラーメッセージがクロールの最中に何度も発生する場合、サーバーがクローラーへの応答をしていない可能性があります。これは膨大なリクエストにサーバーが対応しきれなかったことを意味しており、クロール速度を落として実行することが重要となります。

ページレンダリングサービスのフィードバック

DeepCrawlではページレンダリングサービスが基幹となる機能であると考えており、これによりDeepCrawlはChromeページロード時間などの新しい機能を次々と追加することができます。DeepCrawlへのご要望やアイデアがあれば、いつでもご連絡ください。

ページのレンダリング：Javascriptサイトのクロールとレンダリング

ページレンダリングサービス（PRS）

JavaScriptレンダリングに関するDeepCrawlのPRSとGoogleボットの違い

JavaScriptレンダリングに関するDeepCrawlのPRSとBingの違い

PRSはDeepCrawl上でどのように機能するか

DeepCrawlでJavaScriptレンダリングを設定する方法