ホームページ > 記事 > ウェブフロントエンド > JavaScript の History API により、検索エンジンが AJAX をクロールできるようになります。
JavaScript の History API により、検索エンジンが AJAX をクロールできるようになります。
- WBOYオリジナル
- 2016-05-16 15:27:311272ブラウズ
Facebook フォト アルバムを閲覧しているときに、ページが部分的に更新されると、アドレス バーのアドレスも変更され、ハッシュ方式ではないことに気づきましたか。ウィンドウのグローバル変数として、HTML5 履歴のいくつかの新しい API を使用します。HTML4 の時代では、履歴は新しいものではありません。私たちがよく使うのは、history.back() とhistory.go() です。
私は、2 日前に Discourse の創設者の 1 人である Robin Ward 氏の解決策を目にするまで、それを行う方法はないと常に考えていました。そして、私は驚かずにはいられませんでした。
Discourse は Ajax に大きく依存するフォーラム プログラムですが、Google がコンテンツを含めることを許可する必要があります。その解決策は、ポンド記号の構造を放棄し、History API を採用することです。
いわゆる History API とは、ページを更新せずにブラウザのアドレス バーに表示される URL を変更することを指します (正確には、Web ページの現在のステータスを変更します)。ここでは、上のボタンをクリックして音楽の再生を開始する例を示します。次に、下のリンクをもう一度クリックして、何が起こるか見てみましょう。
アドレスバーの URL が変更されましたが、音楽の再生は中断されません。
History API の詳細な紹介は、この記事の範囲外です。簡単に言うと、その機能はブラウザの History オブジェクトにレコードを追加することです。
window.history.pushState(状態オブジェクト, タイトル, URL);
上記のコマンド行により、アドレス バーに新しい URL が表示されます。 History オブジェクトの PushState メソッドは 3 つのパラメータを受け取ります。最初の 2 つのパラメータは null にすることができます。
window.history.pushState(null, null, newURL);
現在、すべての主要なブラウザーがこの方法をサポートしています: Chrome (26.0)、Firefox (20.0)、IE (10.0)、Safari (5.1)、Opera (12.1)。
これがロビン・ウォードのメソッドです。
まず、History API を使用してハッシュ マーク構造を置き換え、各ハッシュ マークが通常のパスを持つ URL になり、検索エンジンがすべての Web ページをクロールできるようにします。
Example.com/1
example.com/2
example.com/3
次に、Ajax 部分を処理し、URL に基づいてコンテンツをクロールする JavaScript 関数を定義します (jQuery が使用されていると仮定します)。
function anchorClick(link) {
var linkSplit = link.split('/').pop();
$.get('api/' + linkSplit, function(data) {
$('#content').html(data);
});
}
マウスのクリックイベントを再定義します。
$('#container').on('click', 'a', function(e) {
window.history.pushState(null, null, $(this).attr('href'));
anchorClick($(this).attr('href'));
e.preventDefault();
});
ユーザーがブラウザの「進む/戻る」ボタンをクリックすることも考慮に入れてください。このとき、History オブジェクトの Popstate イベントがトリガーされます。
window.addEventListener('popstate', function(e) {
anchorClick(location.pathname);
});
上記の 3 つのコードを定義すると、ページを更新せずに通常のパス URL と AJAX コンテンツを表示できます。
最後にサーバー側の設定を行います。
ポンド記号構造が使用されていないため、各 URL は異なるリクエストになります。したがって、サーバーは、404 エラーを防ぐために、これらすべてのリクエストに対して次の構造を持つ Web ページを返す必要があります。
<html> <body> <section id='container'></section> <noscript> ... ... </noscript> </body> </html>
上記のコードを注意深く見てください。noscript タグが見つかります。これが秘密です。
検索エンジンに含めてほしいすべてのコンテンツを noscript タグに入れます。この場合、ユーザーはページを更新しなくても AJAX 操作を実行できますが、検索エンジンには各 Web ページのメイン コンテンツが含まれることになります。