jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロールを実装する

jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロールを実装する

Posted at February 18,2014 1:55 AM
Tag:[jQuery, SEO]

jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロールを実装することにより、追加されたコンテンツをインデックスに登録させる方法を紹介します。

1.はじめに

Googleが推奨するSEOに適した無限スクロールの構成方法」で「無限スクロールのページにpushStateを実装する。(ことを推奨)」とあります。

同じページにサンプルへのリンクが掲載されていますが、自前の実装らしく、汎用的に使えるようなサンプルが紹介されているサイトはひとつもみつかりませんでした。

ということで、配布されているjQueryプラグインを組み合わせて、SEO対策つきの無限スクロールを実装してみたいと思います。

利用するjQueryプラグインはタイトルのとおり、jQuery.pjaxとjQuery.bottomの2つです。

jQuery.pjaxはAjaxにpushStateを実装したプラグイン、jQuery.bottomはスクロールによるbottomイベントを実装したプラグインです。

なお、ここで実装しているのは無限スクロールに対応したpushStateの実装のみで、ページネーションなどは割愛しています。

2.pushStateとは

「pushState」とはHTML5で追加された機能で、Ajaxによるページ読み込みを行った場合でもURLを閲覧履歴に追加し、ブラウザの「戻る」ボタンに対応させることができる仕組みです。

3.サンプル

サンプルを作りました。

サンプル
サンプル

スクロールすれば、50件単位でAjaxによるページ読み出しを行います。

読み出したあと、「戻る」ボタンでURLを順に戻すことができます。

こちらの環境(Windows Vista + Google Chrome)では動作確認できていますが、正常に動作しなかったらすいません。

4.HTML

サンプルのHTMLは次のような構造にしてみました。

まず最初にアクセスする親ページです(ファイル名はpage1.htmlなど)。一番最後のdiv要素「id="hoge2"」に次のページのコンテンツがAjaxで読み込まれます。

<h1>jQuery Bottom プラグインデモ</h1>
<p>一番下までスクロールすればコンテンツを追加表示します</p>
<div>テスト1</div>
<div>テスト2</div>
<div>テスト3</div>
<div>テスト4</div>
<div>テスト5</div>
…中略…
<div>テスト45</div>
<div>テスト46</div>
<div>テスト47</div>
<div>テスト48</div>
<div>テスト49</div>
<div>テスト50</div>
<div id="hoge2"></div>

次のページ(page2.html)の構造は次のとおりです。一番最後のdiv要素「id="hoge3"」に次のページのコンテンツがAjaxで読み込まれます。

<p>ページ2</p>
<div>テスト51</div>
<div>テスト52</div>
<div>テスト53</div>
<div>テスト54</div>
<div>テスト55</div>
…中略…
<div>テスト95</div>
<div>テスト96</div>
<div>テスト97</div>
<div>テスト98</div>
<div>テスト99</div>
<div>テスト100</div>
<div id="hoge3"></div>

3ページ目以降は2ページ目とほぼ同じです。最後のページには行末のid属性つきのdiv要素を付加しません。

当初、親ページの「id="hoge2"」のdiv要素にすべてのコンテンツを追加するようにしていたのですが、2ページ目のコンテンツがすべて後続のコンテンツで上書きされてしまうのでやめました。

5.jQuery

無限スクロールに対応するjQueryを親ページに実装します。

まず、script要素でjQuery、jquery.pjax.js、jquery.bottom-1.0.jsをインクルードします。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pjax.js"></script>
<script type="text/javascript" src="jquery.bottom-1.0.js"></script>

jQueryはparseHTML()が実装されているバージョン(多分1.8以上)が必要です。

スクロールでページを読み込む部分の実装は次のようになります。

<script type="text/javascript">
$(function() {
    var counter = 2;
    $(window).bottom({ proximity: 0.05 });
    $(window).on('bottom', function() {
        var obj = $(this);
        url = "http://user-domain/page" + counter + ".html";
        if (!obj.data('loading')) {
            obj.data('loading', true);
            $.pjax.defaults.scrollTo = false;
            $.pjax({
                url: url,
                container: '#hoge' + counter,
            });
            obj.data('loading', false);
            counter++;
        }
    });
});
</script>

counterはファイルとid属性値に使ってます。

var counter = 2;

jquery.bottomプラグインに関する実装は次の部分です。bottomイベントでif文のブロックが実行されます。実装の詳細は「TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」」を参照してください。

    $(window).bottom({ proximity: 0.05 });
    $(window).on('bottom', function() {
        …中略…
        if (!obj.data('loading')) {
            obj.data('loading', true);
            …中略…
            obj.data('loading', false);
        }
    });

jquery.pjaxに関する実装は次の部分です。

        url = "http://user-domain/page" + counter + ".html";
        …中略…
            $.pjax.defaults.scrollTo = false;
            $.pjax({
                url: url,
                container:'#hoge' + counter,
            });

Ajaxで取得するURLはcounterの値を利用して生成します。「user-domain」の部分は利用するドメインなどに適宜書き換えてください。

        url = "http://user-domain/page" + counter + ".html";

「$.pjax.defaults.scrollTo」で、ページがロードされたときにトップにスクロールバックするのを抑止します。

            $.pjax.defaults.scrollTo = false;

URL指定でページをAjaxで読み込み、containerプロパティで指定したid属性にコンテンツを出力します。

            $.pjax({
                url: url,
                container: '#hoge' + counter,
            });

以上です。

当初、counterのインクリメントなどを

$(document).on('pjax:complete', function(){})

の追加し、その中で行っていたのですが、スクロールが進むにつれてブロック内の処理が複数回実行されてしまう事象が発生したので、利用するのをやめました。

やり方は色々あると思いますが、正常に動作確認ができたのがこのパターンでしたので、叩き台にしてよりよいものを作ってください。

6.その他

このサンプルは「戻る」ボタンの対応のみで、コンテンツ自体も履歴に対応した内容を表示させる実装は(多分)ありません。

実装するには「popState」でイベントを取得し、コンテンツを切り替える処理を記述する必要があります。

あと今回の実装とはまったく関連ありませんが、元記事によれば、AjaxのURLのフラグメント「#」を「#!」に書き換えることでもGoogleが対応してくれるようです。

7.参考サイト

参考サイトは下記です。ありがとうございました。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)