Google クローラーはどのように JavaScript をクロールしますか?

国内のブラウザや検索ツールはクローラーを使用して Web ページの情報をクロールしていることはわかっていますが、Google クローラーはどのようにして Javascript をクロールするのでしょうか?今日は徹底的な研究とディスカッションをしてみましょう。

Google のクローラーが JavaScript をクロールする方法をテストしました。その結果、次のことがわかりました。

Google は JavaScript を処理できないと思いますか?もう一度考えて。 Audette Audette 氏は、彼と同僚が Google によってどのような種類の JavaScript 機能がクロールされ、組み込まれるかをテストした一連のテストの結果を共有しました。

簡単に言うと

1. 私たちは一連のテストを実施し、Google がさまざまな方法で JavaScript を実行および組み込むことができることを確認しました。また、Google がページ全体をレンダリングして DOM を読み取り、動的に生成されたコンテンツを含めることができることも確認しました。

2. DOM 内の SEO シグナル (ページ タイトル、メタ ディスクリプション、カノニカル タグ、メタ ロボット タグなど) がすべて注目されます。 DOM に動的に挿入されたコンテンツもクロールして含めることができます。さらに、場合によっては、DOM が HTML ソース コード ステートメントよりも優先されることもあります。これにはさらに多くの作業が必要ですが、これは私たちがテストしたいくつかの作業のうちの 1 つです。

はじめに: Google は JavaScript を実行し、DOM を読み取ります

2008 年の時点で、Google は JavaScript のクロールに成功していましたが、おそらく特定の方法に限定されていました。

今日明らかになったのは、Google がクロールして含める JavaScript の種類を戦略化できただけでなく、ウェブ全体のレンダリングにおいて (特に過去 12 ～ 18 か月で) 大きな進歩を遂げたということです。

Merkle の SEO 技術チームは、Google クローラーがクロールして含めることができる JavaScript イベントの種類をよりよく理解したいと考えていました。調査の結果、驚くべき結果が見つかり、Google はさまざまな JavaScript イベントを実行できるだけでなく、動的に生成されたコンテンツも含めることができることが確認されました。どうやって？ Google は DOM を読み取ることができます。

DOMとは何ですか?

多くの SEO 担当者は、ドキュメント オブジェクト モデル (DOM) が何なのかを理解していません。

ブラウザがページをリクエストすると何が起こり、DOMはどのように関与するのか。

Web ブラウザーで使用する場合、DOM は基本的に、データ (HTML や XML など) をマークアップおよび構造化するためのアプリケーション プログラム インターフェイス、つまり API です。このインターフェイスを使用すると、Web ブラウザでそれらを組み合わせてドキュメントを作成できます。

DOM は、構造体の取得方法と操作方法も定義します。 DOM は言語に依存しない API (特定のプログラミング言語やライブラリに関連付けられていない) ですが、JavaScript および動的コンテンツの Web アプリケーションでよく使用されます。

DOM は、Web ページをプログラミング言語に接続するインターフェイス、または「ブリッジ」を表します。 HTML を解析して JavaScript を実行した結果が DOM です。 Web ページのコンテンツはソース コード (だけではありません) ではなく、DOM です。これは非常に重要です。

DOM インターフェイスを介して JavaScript がどのように動作するか。

私たちは、Google が DOM を読み取って信号を解析し、タイトル タグ、ページ テキスト、ヘッド タグ、メタ アノテーション (例: rel = canonical) などのコンテンツを動的に挿入できることを発見して興奮しました。詳細はそこで読むことができます。

この一連のテストと結果

どのような JavaScript 関数がクロールされて含まれるのかを知りたいため、Google Crawler 上で一連のテストを別途作成しました。コントロールを作成することで、URL アクティビティを独立して理解できるようにします。以下に、いくつかの興味深いテスト結果を詳しく説明します。これらは 5 つのカテゴリに分類されます:

JavaScript リダイレクト

JavaScript リンク

コンテンツの動的挿入

メタデータとページ要素の動的挿入

rel = “nofollow” を使用した素晴らしい例

例: Google クローラーの JavaScript を理解する能力をテストするために使用されるページ。

1. JavaScript リダイレクト

最初に、さまざまな方法で表現された URL の結果はどうなるのかをテストしました。 2 つのテストには window.location オブジェクトを選択しました。テスト A は絶対パス URL を使用して window.location を呼び出しますが、テスト B は相対パスを使用します。

結果: リダイレクトは Google によってすぐに追跡されました。インデックス作成の観点からは、これらは 301 として解釈されます。最終 URL は、Google インデックス作成のリダイレクト URL を置き換えます。

その後のテストでは、信頼できる Web ページ上でまったく同じコンテンツを使用し、JavaScript を使用して同じサイトの新しいページへのリダイレクトを完了しました。そして、元の URL は Google の上位クエリの最初のページにランクされます。

結果: 案の定、リダイレクトは Google によって追跡されましたが、元のページはインデックスに登録されませんでした。新しい URL が含まれ、同じクエリ ページ内の同じ位置にすぐにランク付けされます。これは私たちにとって驚くべきことであり、ランキングの観点から見ると、JavaScript リダイレクトが (場合によっては) 永続的な 301 リダイレクトとよく似た動作をすることを示しているようです。

次回、クライアントが Web サイトの JavaScript リダイレクト移動を望んでいる場合、おそらく答える必要はないか、「やめてください」と答える必要はありません。これは移籍順位シグナルの関係がありそうなので。この結論を裏付けるものは、Google ガイドラインからの引用です:

JavaScript を使用してユーザーをリダイレクトすることは、法的行為となる可能性があります。たとえば、ログインしているユーザーを内部ページにリダイレクトする場合、JavaScript を使用してこれを行うことができます。 JavaScript またはその他のリダイレクト方法を再確認するときは、サイトがガイドラインに従い、その意図を考慮していることを確認してください。 Web サイトへの 301 リダイレクトが最適ですが、Web サイト サーバーにアクセスできない場合は、JavaScript リダイレクトを使用できることに注意してください。

2. JavaScript リンク

複数のエンコード方法を使用して、さまざまなタイプの JS リンクをテストしました。

ドロップダウン メニューのリンクをテストします。これまで、検索エンジンはこのタイプのリンクを追跡できませんでした。 onchange イベント ハンドラーが追跡されるかどうかを判断したいと考えています。重要なのは、これは特定のタイプのみを強制するものであり、上記の JavaScript リダイレクトを強制するのではなく、他の変更の影響を認識する必要があることです。

例: Google Work ページの言語選択ドロップダウン メニュー。

結果: リンクは完全にクロールされ、追跡されました。

一般的な JavaScript リンクもテストしました。以下は最も一般的な JavaScript リンクのタイプですが、従来の SEO ではプレーン テキストが推奨されます。これらのテストには、JavaScript リンク コードが含まれます。

外部の href キーと値のペア (AVP) に基づいて動作しますが、タグ内で動作します (「onClick」)

内部 AVP に基づいて動作します (「javascript:window.location」)

動作on a タグの外側ですが、href

内で AVP ("javascript: openlink()") を呼び出します

結果: リンクは完全にクロールされ、追跡されます。

次のテストは、上でテストした onchange などのイベント ハンドラーをさらにテストすることです。具体的には、マウス移動イベント ハンドラーを利用し、イベント ハンドラー関数 (この場合は onmousedown と onmouseout) が起動された場合にのみ実行されるように URL 変数を非表示にします。

結果: リンクは完全にクロールされ、追跡されました。

リンクの構築: Google が JavaScript を実行できることはわかっていますが、コード内の変数を読み取ることができるかどうかを確認したいと考えています。したがって、このテストでは、URL 文字列を構成する文字を連結します。

結果: リンクは完全にクロールされ、追跡されました。

3. コンテンツを動的に挿入する

明らかに、これらが重要なポイントです: テキスト、画像、リンク、ナビゲーションを動的に挿入します。高品質のテキスト コンテンツは、検索エンジンが Web ページのトピックとコンテンツを理解するために不可欠です。動的な Web サイトが普及したこの時代において、その重要性は疑いの余地がありません。

これらのテストは、2 つの異なるシナリオでテキストを動的に挿入した結果を確認するように設計されています。

1. 検索エンジンが動的に挿入されたテキストをカウントできるかどうかをテストします。テキストはページの HTML ソース コードから取得されます。

2. 検索エンジンが、ページの HTML ソースの外部 (外部 JavaScript ファイル内) から動的に挿入されたテキストをカウントできるかどうかをテストします。

結果: どちらの場合も、テキストがクロールされて含まれ、そのコンテンツに基づいてページがランク付けされました。いいね！

これについて詳しく知るために、JavaScript で書かれたクライアント側のグローバル ナビゲーションをテストしました。ナビゲーション内のリンクは document.writeIn 関数を通じて挿入され、完全にクロールおよび追跡できることを確認しました。 Google は、従来の静的 Web ページと同様に、AngularJS フレームワークと HTML5 History API (pushState) を使用して構築された Web サイトを解釈し、レンダリングしてインデックスを作成し、ランク付けできることに注意してください。これが、Google クローラーが外部ファイルや JavaScript を取得するのをブロックしないことが重要である理由であり、おそらく Google が Ajax 対応 SEO ガイドラインからそれを削除している理由でもあります。ページ全体をレンダリングするだけで済むのに、HTML スナップショットが必要な人がいるでしょうか?

テストの結果、コンテンツの種類に関係なく、結果は同じであることがわかりました。たとえば、画像は DOM に読み込まれた後にクロールされて組み込まれます。 data-vocabulary.org 構造データを動的に生成し、それを DOM に挿入することでブレッドクラムを作成するテストも行いました。その結果は？ 正常に挿入されたブレッドクラムは、検索エンジンの結果ページに表示されます。

現在、Google が構造化データを形成するために JSON-LD マークアップを使用することを推奨していることは注目に値します。将来的にはこれをベースにしたものがさらに増えると思います。

4. メタデータとページ要素を動的に挿入します

SEOにとって重要なさまざまなタグをDOMに動的に挿入します:

タイトル要素

メタ説明

メタロボット

正規タグ

結果: すべてのケースで、タグはクロールされ、HTML ソース コード内の要素と同じように動作しました。

優先順位を理解するのに役立つ興味深い補完的な実験です。矛盾するシグナルがある場合、どちらが勝ちますか?ソース コードに noindex タグと nofollow タグがあり、DOM に noindex タグと follow タグがある場合はどうなりますか? HTTP x-robots 応答ヘッダーは、このプロトコルの別の変数としてどのように動作しますか?これは将来の包括的なテストの一部となります。ただし、私たちのテストによると、競合が発生した場合、Google は DOM を優先してソース コード内のタグを無視します。

5. rel="nofollow" を使用した重要な例

ソース コードと DOM のリンク レベルで表示される nofollow 属性を Google がどのように処理するかをテストしたいと考えました。したがって、nofollow を適用せずにコントロールを作成します。

nofollow については、ソース コードと DOM によって生成されたアノテーションを個別にテストします。

ソースコード内の nofollow は期待どおりに機能します (リンクはたどられません)。ただし、DOM の nofollow は失敗します (リンクはたどられ、ページは含まれます)。なぜ？ DOM 内の href 要素の変更が遅すぎるため、Google はリンクをクロールする準備ができており、rel="nofollow" を追加する JavaScript 関数を実行する前に URL をキューに入れます。ただし、href = "nofollow" の a 要素が DOM に挿入された場合、nofollow とリンクは同時に挿入されるため追跡されます。

結果

これまで、あらゆる種類の SEO の推奨事項は、可能な限り「プレーンテキスト」コンテンツに焦点を当てることでした。また、動的に生成されたコンテンツ、AJAX、JavaScript リンクは、主要な検索エンジンの SEO に悪影響を与える可能性があります。どうやら、これは Google にとってもはや問題ではないようです。 JavaScript リンクは通常の HTML リンクのように動作します (これは表面上のものであり、舞台裏で何が起こっているのかはわかりません)。

JavaScript リダイレクトは 301 リダイレクトと同様に扱われます。

動的に挿入されたコンテンツは、rel canonical アノテーションなどのメタタグであっても、HTML ソース コード内であっても、最初の HTML が解析された後に JavaScript がトリガーされて DOM を生成するときにも、同じように扱われます。

Google は、ページを完全にレンダリングし、ソース コードだけでなく DOM を理解できることに依存しています。本当にすごいですね！ (Google クローラーがこれらの外部ファイルと JavaScript を取得できるようにすることを忘れないでください。)

Google は、他の検索エンジンを置き去りにして、驚くべき速度で革新を続けています。他の検索エンジンでも同様のイノベーションが見られることを期待しています。 Web の新時代において競争力を維持し、大幅な進歩を遂げるためには、HTML5、JavaScript、および動的 Web サイトのサポートが向上することを意味します。

SEOについては、上記の基本的な概念やGoogleの技術を理解していない人は、現在の技術に追いつくためによく勉強して学ぶ必要があります。 DOM を考慮に入れないと、シェアの半分を失う可能性があります。

関連する推奨事項:

配列を走査するための JavaScript メソッドの概要

JavaScript はどのように配列を作成するのでしょうか?

JavaScriptを始めるための基本チュートリアル

以上がGoogle クローラーはどのように JavaScript をクロールしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。