JavaScript 解析: 検索エンジンにもっとリアルなウェブページを見せましょう

長い間、ウェブマスターはウェブページの動的な動作を実装するために JavaScript を使用することを選択してきました。ページの応答を高速化したり、ウェブサイトのトラフィックを減らしたり、リンクを非表示にしたり、広告を埋め込んだりするなど、そうする理由はさまざまです。初期の検索エンジンには対応する処理能力がなかったため、このような Web ページのインデックス作成で問題が発生することが多く、貴重なリソースが含まれない可能性があり、不正行為も発生する可能性がありました。

JavaScript 解析を導入する目的は、上記 2 つの問題を解決することです。その結果、検索エンジンは、ユーザーが Web ページを開いたときに実際に目にする効果をより明確に理解できるようになります。たとえば、一部のウェブサイトでは、ウェブページの HTML からユーザーのコメントや評価などの情報を抽出し、ページを開いたときに JavaScript や AJAX を使って動的に表示します。この時点では、初期の検索エンジンが処理できるページコンテンツが欠落しているため、ページのインデックス値の判断にさらに影響します。

JavaScript 解析を導入するには、その設計と実装、解析速度、システムの他の側面への影響などの要素を考慮する必要があります。この記事では、いくつかの典型的なケースを使用して、Web ページの JavaScript 解析システムを設計および実装する方法を分析し、そのようなシステムが検索エンジンの他の部分に与える影響と役割について簡単に紹介します。

1. 発見ページリンク

一般的に、ページリンクは HTML の A タグの形で存在し、リンク URL は href 属性でマークされます。ただし、実際には、より「動的な」アプローチを選択する Web サイトもあります。一般的なアプローチは 2 つあります。1 つは A タグを動的に記述または調整する方法で、もう 1 つはユーザーがクリックしたときにイベントをトリガーして、デフォルトのリンクの開き方を変更する方法です。

1. リンクラベルを動的に書き込んだり調整したりする

抽象的に言えば、Web ページでこの効果、および後述する他の効果を実現することは、象を冷蔵庫に入れることに非常に似ており、書き込み/変更の対象を見つける (象を見つける)、書き込み/変更するコンテンツを準備する (冷蔵庫のドアを開ける)、書き込み/変更を実行する (入れる) という 3 つのステップに分けられます。

これらの 3 つのステップは JavaScript にマッピングされ、ページ要素の配置、データの準備、ページの変更という 3 セットの標準ブラウザ関数を順番に呼び出します。そして、JavaScript 解析の仕事は、同じようにそのような機能を提供し、ウェブマスターの JavaScript コードによって呼び出されたときに、対応するコンテンツと動作を自然に検出することです。

分析のこの時点では、実装する必要がある機能は基本的に決定されており、その中でもより単純なものは次のとおりです。

document.getElementById // 配置

document.getElementsByTagName // 配置

document.getElementsByClassName // 配置

node.[firstChild/nextSibling/previousSibling/parentNode] // 配置

document.[createElement/createTextNode] // リンクを作成する

node.[appendChild/insertBefore/innerHTML=?] // コンテンツを書き込む

element.getAttribute、element.setAttribute // 属性を設定する

element.href = ? // 属性を設定する

書き込む内容は、JavaScript で配列などの形式で保存したり、AJAX を使用して動的に読み込むこともできます。前者は JavaScript 言語の組み込み関数であるため、ここでは繰り返しません。後者は別のトピックであり、後で具体的に説明します。

2. クリックするとイベントが発生し、デフォルトのリンクの開き方が変更されます。

これを行う理由はさまざまです。リンクを非表示にするため、ポップアップウィンドウを実装するため、プログラムで URL を連結するため、リンクを開く必要があるかどうかを確認するためなど、ページによってはこれを行うことがあります。しかし、これらすべての理由は、クリックイベントを追加するという同じ実装方法に対応しています。

クリックイベントを追加する方法は 3 つあります。

Aタグのhref属性を「javascript:func(...)」の形式に設定します。

Aタグのonclick属性をonclick="js_code"に設定する

my_link_node.addEventListener('click', func, false) などのイベントバインディング関数を呼び出します。

これら 3 つの方法をサポートすること自体は比較的簡単です。注意が必要なのは、このようなクリックイベントをトリガーする方法と、トリガーされた後にリンク先の URL をインターセプトする方法です。

イベントをトリガーするには、まずすべての可能なクリックイベントを収集し、それらを 1 つずつトリガーする必要があります。ただし、各クリックをトリガーするには、実際にトリガーする前に、そのクリックがまだ存在するかどうかを確認する必要があります。これは、前のクリックイベントによって現在のクリックが削除されている可能性があるためです。

URL をインターセプトするには、まず location.href = ?、window.open などの関連するページジャンプ関数を実装する必要があります。そして、一連のフラグを設定することで、クリックとページジャンプが関連づけられ、目的の URL が取得されます。

2. 動的ページコンテンツ

ページ上の動的コンテンツは、ページの読み込み速度を上げ、ウェブサイトの技術的な柔軟性を高める手段です。変更されるコンテンツ（コメント、評価など）を抽出し、ページを静的と動的の 2 つの部分に分割できます。静的コンテンツは、キャッシュなどの方法を使用してページの表示を高速化し、ウェブサイトのトラフィックを削減できます。動的コンテンツは、生成しやすいシンプルな形式という利点があり、トラフィックも節約できます。

一方、動的コンテンツは、広告や不正なコンテンツを読み込むための重要な手段でもあります。最も一般的な方法は、iframe への書き込みですが、これは初期の検索エンジンにとっては非常に隠されています。

技術的なレベルでは、動的なページコンテンツに必要な作業は、従来の「document.write」メソッドを追加した以外は、前のセクション「A タグの動的な書き込みまたは調整」とほぼ同じです。

このメソッドは最も初期の JavaScript 関数の 1 つであり、HTML コードの一部をページに直接書き込むために使用され、現在でも広く使用されています。初期の検索エンジンはすべてこの方法をサポートしていましたが、この方法は基本的に文字の一致に限定されており、JavaScript 文字列を記述する最も直接的な方法しかサポートしていませんでした。少し複雑なテキスト連結には無力でした。しかし、JavaScript の解析では、このコードは結局言語仕様に準拠している必要があるため、テキストの結合、条件判断、難読化されたコードなど、さまざまな状況に完全に対応して対応できます。

ここで議論する必要がある点の 1 つは、ネストされた document.write、つまり document.write を介して SCRIPT タグを書き込み、そのタグ内に別の document.write があることです。この種の問題は、ジャンプ不正ページでよく見られます。これに対応するには、JavaScript 解析だけでなく、HTML パーサーがネストされた HTML 書き込み関数の処理もサポートする必要がありますが、ここでは分析しません。

上記の方法により、ウェブページのメイン情報、広告、その他の補助情報などが公開され、ウェブマスターの意図をよりよく理解できるようになります。

3. Webページジャンプ

場合によっては、Web ページのリダイレクトはページ効果を実現するために必要なオプションですが、不正行為に使用される可能性もあります。技術的には、次の 2 つの方法で表示されます。

ページジャンプ機能を直接呼び出す

検索エンジンUA、リファラー等のページジャンプ機能を呼び出します。

ここでの認識を実現するために、ページジャンプ機能：場所オブジェクトを実装することが中心となります。これは技術的には唯一の JavaScript ジャンプ関数であるため、ページの JavaScript がどのように記述され、難読化されているかに関係なく、最終的にはこの関数が呼び出されます。したがって、異なるページのジャンプコードは異なって見えますが、識別するのは簡単です。

IV. AJAXについて

AJAX は非常に一般的な Web テクノロジです。基本的には、Web ページの表示中にインターネットからデータ (HTML など) を動的に取得し、処理した後に表示することを意味します。

このテクノロジーの場合、基本的な作業は XMLHttpRequest オブジェクトの実装ではなく、検索エンジンクローラーアーキテクチャへの影響にあります。ご存知のとおり、クローラーはページをクロールし、リンクをたどって、1 つずつクロールするように設計されています。クローラーの作業は主に、クロールのスケジュール設定とクロールの圧力の制御に重点を置いています。クローラー自体は比較的単純で、通常、クロール直後に JavaScript を実行して AJAX データをクロールする機能はありません。したがって、AJAX をサポートするには技術的なアップグレードが必要です。

グラバーの分析は本論文の範囲を超えているため、興味のある読者は他の関連文献を参照してください。

要約する

これまでのケース分析を通じて、JavaScript 解析を実装するために必要な基本的な作業をまとめました。さらに、いくつかの基本的な構成を追加することで、比較的完全なシステムを形成できます。ここで再度整理し、3 つの部分に分けます。

1. HTML パーサーに JavaScript 言語エンジンを埋め込みます。言語エンジンは、V8 や SpiderMonkey などの成熟したオープンソースソリューションにすることができます。

2. 必要な機能を実装します。詳細については、W3C の関連する HTML および DOM 仕様を参照してください。

3. 当然の結果として、JavaScript 解析で「解析」する必要があるソースコードである、いわゆる .js ファイルを含める必要があります。

この記事で紹介した関数は、JavaScript の一般的な関数の一部にすぎません。検索エンジンがページを実際に認識できるようにするには、他の必要な関数をさらに実装する必要があります。また、HTML、CSS、画像などのリソースのサポートも必要です。

最後に、JavaScript を使用したいウェブマスター向けに、この記事では次の提案をしています。

1. 検索エンジンに組み入れるのに役立たない、過度に複雑なJavaScriptテクニックは使用しないでください。

2. .jsファイルの組み込みをブロックしないでください。そうしないと、JavaScriptの解析能力が制限されます。

3. サイトの静的部分と動的部分を合理的に分割する

元のタイトル: JavaScript 解析: 検索エンジンに Web ページをよりリアルに見せる