JavaScriptサイトのクロールとレンダリング

DeepCrawlでのJavaScriptサイトレンダリング機能リリース

DeepCrawlには、JavaScriptのレンダリング機能があります。検索エンジンが行っているように、サイトのJavascriptを解析し、クロールすることができます。
JavaScriptレンダリングが有効なクロールでは、スクリプトによってページに挿入もしくは修正されたコンテンツとリンクの分析を行うことが可能です。
また、クロールで行えることを劇的に改善する機能が他にもいくつかあります。

Javascriptレンダリングの有効化

レンダリングの実行には、まず、契約中のサブスクリプションへアドオンの購入が必要となります。
有効化されたら、クロールの詳細設定の[JavaScriptのレンダリングを有効にする]をクリックするだけで、レンダリングを実行することができます。

アナリティクス、広告スクリプト、その他特定のスクリプトを、レンダリングから除外することができます。

DeepCrawlのレンダラはページのレンダリングのためにGoogle Chromeの市販パッケージ版を使用しているので、
クロール実行中に数多くのアナリティクス、広告スクリプト、その他トラッキングスクリプトを解析します。 DeepCrawlが検出したものを登録するため、クロールの結果、データが膨大になります。

デフォルトでは、DeepCrawlはGoogleアナリティクス、Googleアドセンス、Googleアドエクスチェンジなど一般的なアナリティクスや広告スクリプトを除外してクロールしますが、実行の必要が無いスクリプトは必ず除外設定を行うことが重要です。 これは、プロジェクトの詳細設定で、「任意のJavaScriptを拒否」にURLやURLパターンを追加することで設定できます。
スクリプトの除外設定をRobots.txtファイルに依存するのではなく、重要なファイルの除外は、すべてレンダラー側で設定するようにしましょう。

JavaScriptのカスタム設定

追加的な分析とページ処理のため、DeepCrawlにはJavascriptライブラリや任意のコードを追加できる機能があります。
この機能を使うことで、以下が可能になります。

  • ライブ環境に移行する前にJavascriptとコンテンツの変更点を検証する。
  • テスト用ソリューションを使用する。
    例：ウェブコンテンツのアクセシビリティガイドライン(WCAG)に則ったテスト、モバイルフレンドリーテスト、特定のページ要素の結合テスト
  • クロールに影響する可能性のある要素を削除する。

Javascriptのカスタム設定を行うには、「外部のJavaScriptソース」にURLを10件まで追加し、「JavaScriptのカスタマイズ」にコードを追加してください。

分析を完了させ、DeepCrawlでその結果を参照または抽出したい場合、ページ上の要素へアウトプットを記述した上で、「カスタム抽出」でこれを抽出してください。
例えば、新しいspan要素を宣言し、分析結果のアウトプットをそれに代入してください。

var newSpan = document.createElement("span"); newSpan.innerText = "WCAGOUTPUT:"+JSON.stringify(wcag_test)+":WCAGOUTPUT" document.body.appendChild(newSpan);


その後、正規表現を使って抽出してください。

<span>WCAGOUTPUT:(.*?):WCAGOUTPUT</span>

この手順で、どんな高度な分析も抽出もカスタマイズして行うことができます。
例えば、複数の要素に基づいてページのテンプレートをテストする場合、CSSのセレクタでテスト項目を確認し、DeepCrawlが抽出する値を出力することができます。

var body_css = document.body.className var price_element = document.querySelectorAll("#price_tag") var page_type = "unknown" if(body_css == "product_css" && price_element.length==1){ page_type = "product" } if(body_css == "product_css" && price_element.length>1){ page_type = "category" } if(body_css == "generic" && price_element.length>0){ page_type = "homepage" } if(body_css == "generic" && price_element.length==0){ page_type = "help_section" } var newSpan = document.createElement("span"); newSpan.innerText = "PAGETYPEOUTPUT:"+page_type+":PAGETYPEOUTPUT" document.body.appendChild(newSpan);

その後、正規表現を使って抽出してください。

<span>PAGETYPEOUTPUT:(.*?):PAGETYPEOUTPUT</span>

レンダリングに関するFAQ

JavaScriptレンダリングを使用したクロールには、通常のクロールよりも時間がかかるのでしょうか？

レンダリングが有効なクロールが通常のクロールより実行時間が掛かかるのには、多くの要因があります。
・ページに対してすべての関連したリソースをダウンロードし、解析し、読み込みを完了させる必要があるため、レンダリングを使うクロールにはより時間が掛かります。
例えば読み込み時間が1秒以内のページが、その複雑性に応じてレンダリングに数秒掛かります。
・通常、ページはリソースとデータに複数リクエストを送信するため、レンダリングが有効なクロールを実行するとサーバーの負荷が高くなります。クロール率が高い場合、このような追加読み込みは、こうした負荷に十分対応できる基盤がないサイトのページ速度を下げてしまいます。

レンダリングタイムアウトとは何ですか？

レンダリングタイムアウトとは、DeepCrawlがページのレンダリング完了まで10秒待機し、10秒経過後は、それまでに読み込んだ内容を分析範囲に指定することを指しています。これは通常、ページを無期限に’alive’に保つ分析用heartbeat scriptが存在する場合に発生します。

レンダリングエンジンは何を使用していますか？Googleのものと同じですか？

本記事の執筆時点では、DeepCrawlはレンダリングにGoogle Chromeと同じバージョンを使用しています。

サイトでGoogleタグマネージャーを使ってDoubleclick floodlightやその他スクリプトを使用した時、DeepCrawlの指標のいくつかが使えなくなってしまいました。

Googleタグマネージャーは、外部リソースをページに追加するのではなく、時折ページ内部にDeepCrawlのレンダラがブロックできないiframeを生成する動きをします。iframeのsrcで指定されたURLがブロックされていても、iframe要素は生成されます。

ページヘッダー内で<iframe> は有効なタグではないので、DeepCrawlのクローラー（と検索エンジンのクローラー）は<head> タグが終了したと見なしてしまいます。そのため、canonical、rel=alternate、meta noindexなど<head>に続いている要素がページのbody要素に存在すると見なされ、無視されてしまいます。

この問題の普遍的なな修復方法としては、Googleタグマネージャーの設定を変更して、検索エンジンのクローラーのユーザーエージェントが巡回してきた時に、DoubleClick Floodlightタグがページに追加されないようにする方法があります。

応急対策としては、DeepCrawlの[JavaScriptのカスタマイズ]機能を使用して、レンダリング中にヘッダーからiframe要素を取り除く方法があります。この方法では他のクローラーが抱える課題を解決することはできませんが、DeepCrawlの分析からはiframeを除くことができます。

以下のスクリプトをプロジェクトの詳細設定の[JavaScriptのカスタマイズ]に追加してください。

document.head.querySelectorAll('iframe').forEach(function(e){e.remove()})

静的なIP、GeoIP、カスタムDNSはレンダリングでは利用できません

プロキシとDNSのChomeによる処理方法のため、JavaScriptレンダリングが有効なクロールでは、通常のクロールで実行できるような特定の静的IPをクロールできません。代わりに、レンダリングが有効なクローラーから発生するすべてのリクエストは、IPアドレス52.5.118.182から送信されます。クロールするにあたり、DeepCrawlをホワイトリストに登録する必要がある場合は、このIPアドレスをご使用ください。プロジェクトにすでに存在している静的IPは、Javascript、画像、CSSファイルなどのページ以外のリソースを取得目的で使用される可能性はあります。カスタムDNS設定は現在レンダリングにおいて適応されません。DNSとレンダリングの制限に関する詳細につきましては、社内のアカウント管理者にお問い合わせください。

カスタムスクリプトの追加とはどのようなものでしょうか？

外部カスタムスクリプトを10個まで追加することができます。これらはページがロードされるタイミングで挿入されます。ページと追加リソースは10秒間のページタイムアウトまでに完全にロードされ、レンダリングされなくてはなりません。カスタムスクリプトの文字列はページがレンダリングされた後に挿入され、5秒まで実行が許可されています。挿入されるスクリプトはすべて同時に実行される必要があります。これは、レンダリングは非同期関数によるコールバックを待機しないということです。カスタムスクリプトの挿入を使用する場合、DeepCrawlはすべてのスクリプトが実行された後にページのDOMのスナップショットを作成します。これは、カスタムスクリプトにより実行された全ての変更内容がDeepCrawlのレポートに反映されることを意味しています。

DeepCrawlはJavaScriptのリダイレクトを検出しますか？

はい。DeepCrawlはJavaScriptによって生成されたリダイレクトを検出し、レポートします（例：window.location="/newpage"）。ただし、ページの状態変更を検出することはできません。状態変更とは、ページのURLが変化したように見えるが、実際には全く変化していない場合のことを指します。Webサイトがステータス変更を利用している場合、プロジェクト設定に次のカスタムスクリプトを追加してDeepCrawlが状態変更を正式なページ変更に変換する設定を行うことにより、状態変更を検出することができます。

if(window.history.state.startingURL!=window.location){window.location=document.location}

デフォルトでどのアナリティクスと広告スクリプトがブロックされていますか？

広告スクリプトのブロックとアナリティクスのブロックを有効化すると、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/*

広告スクリプト
*//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

問題が解決しませんか？ お問い合わせ お問い合わせ