「シングルページ構造」（シングルページアプリケーション）を採用するウェブサイトが増えています。
Web サイト全体には Web ページが 1 つだけあり、Ajax テクノロジーを使用してユーザー入力に基づいてさまざまなコンテンツを読み込みます。
このアプローチの利点は、優れたユーザー エクスペリエンスを提供し、トラフィックを節約できることです。欠点は、AJAX コンテンツが検索エンジンによってクロールできないことです。たとえば、Web サイトがあるとします。
リーリーユーザーはハッシュマーク構造のURLを通じてさまざまなコンテンツを見ることができます。
リーリーただし、検索エンジンは example.com のみをクロールし、シャープ記号を無視するため、コンテンツのインデックスを作成することはできません。
この問題を解決するために、Googleは「ポンド記号+感嘆符」の構造を提案しました。
リーリーGoogle が上記のような URL を見つけると、別の URL を自動的にクロールします。
リーリーこの URL に AJAX コンテンツを配置する限り、Google はそれを含めます。しかし、問題は、「シャープ記号 + 感嘆符」が非常に醜くて扱いにくいことです。 Twitter はかつて
を置く場所にこの構造を持っていました リーリーが
に変更されました リーリーその結果、利用者からの苦情が相次ぎ、わずか半年で廃止されました。
それでは、より直感的な URL を維持しながら、検索エンジンが AJAX コンテンツをクロールできるようにする方法はあるのでしょうか?
私は、2 日前に Discourse の創設者の 1 人である Robin Ward 氏の解決策を目にするまで、それを行う方法はないと常に思っていましたが、驚きを禁じえませんでした。
Discourse は Ajax に大きく依存するフォーラム プログラムですが、Google がコンテンツを含めることを許可する必要があります。その解決策は、ポンド記号の構造を放棄し、History API を採用することです。
いわゆるHistory APIとは、ページを更新せずにブラウザのアドレスバーに表示されるURLを変更することを指します（正確には、Webページの現在のステータスを変更します）。ここでは、上のボタンをクリックして音楽の再生を開始する例を示します。次に、下のリンクをもう一度クリックして、何が起こるか見てみましょう。
アドレスバーのURLは変更されましたが、音楽の再生は中断されません。
History API の詳細な紹介は、この記事の範囲を超えています。簡単に言うと、その機能はブラウザの History オブジェクトにレコードを追加することです。
リーリー上記のコマンド行により、アドレス バーに新しい URL が表示されます。 History オブジェクトの PushState メソッドは 3 つのパラメータを受け取ります。最初の 2 つのパラメータは null にすることができます。
リーリー現在、すべての主要なブラウザーがこの方法をサポートしています: Chrome (26.0 以降)、Firefox (20.0 以降)、IE (10.0 以降)、Safari (5.1 以降)、Opera (12.1 以降)。
これがロビン・ウォードのメソッドです。
まず、History API を使用してハッシュ マーク構造を置き換え、各ハッシュ マークが通常のパス URL になり、検索エンジンがすべての Web ページをクロールできるようにします。
リーリー次に、Ajax 部分を処理し、URL に基づいてコンテンツをクロールする JavaScript 関数を定義します (jQuery が使用されていると仮定します)。
リーリーマウスのクリックイベントを再定義します。
リーリーユーザーがブラウザの「進む/戻る」ボタンをクリックすることも考慮に入れてください。このとき、History オブジェクトの Popstate イベントがトリガーされます。
リーリー上記の 3 つのコードを定義すると、ページを更新せずに通常のパス URL と AJAX コンテンツを表示できます。
最後にサーバー側の設定を行います。
シャープ記号構造が使用されていないため、各 URL は異なるリクエストになります。したがって、サーバーは 404 エラーを防ぐために、これらすべてのリクエストに対して次の構造を持つ Web ページを返す必要があります。
リーリー上記のコードを注意深く見てください。noscript タグが見つかります。これが秘密です。
検索エンジンに含めてほしいすべてのコンテンツを noscript タグに入れます。この場合、ユーザーはページを更新しなくても AJAX 操作を実行できますが、検索エンジンには各 Web ページのメイン コンテンツが含まれることになります。
新しいサイトの場合、Baidu がサイトを含めるのに時間がかかります。さらに、宣伝のために他の Web サイトに移動し、「Hongjian Double Salary」にアンカー リンクを作成すると、リンク アドレスがあなたの Web サイトを直接指すことになります。これはバックリンクの問題です。
あとは待つだけです...
一般的に、Google がそれを含めた後は、Baidu の方が速いでしょう。
まず、Web サイトとディレクトリに robots.txt ファイルを作成します。ロボットとは何ですか? 検索エンジンがスパイダー プログラムを使用して、インターネット上の Web ページに自動的にアクセスし、Web ページの情報を取得することを意味します。スパイダーが Web サイトにアクセスすると、まず Web サイトのルート ドメインに robots.txt というプレーン テキスト ファイルがあるかどうかを確認します。このファイルは、Web サイト上でスパイダーのクロール範囲を指定するために使用されます。 Web サイトに robots.txt を作成し、ファイル内で検索エンジンに含めたくない Web サイトの部分を宣言したり、検索エンジンに特定の部分のみを含めるよう指定したりできます。 robots.txt ファイルを使用する必要があるのは、検索エンジンにインデックスを付けたくないコンテンツがサイトに含まれている場合のみです。検索エンジンに Web サイト上のすべてのコンテンツを含めたい場合は、robots.txt ファイルを作成しないでください。robots.txt ファイルを作成した後も Web サイトのコンテンツは検索されますが、Web ページ上のコンテンツは検索されない場合があります。取得、インデックス付け、表示が行われ、Baidu の検索結果に表示されるのは、他の Web サイトからの関連する Web ページの説明だけです。検索エンジンが検索結果にサイトのスナップショットを表示しないようにし、ページのみをインデックスに登録するには、ページの
メタ タグを配置します。 "robots" content="noarchive"> 他の検索エンジンがスナップショットを表示できるようにし、Baidu だけがスナップショットを表示できないようにするには、次のタグを使用します。 robots.txt ファイル 「robots.txt」ファイルには、空白行で区切られた 1 つ以上のレコードが含まれます (CR、CR/NL、または NL で終了)。各レコードの形式は次のとおりです: "
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
