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

ナビゲーションをスキップする

Top ＞ JavaScript ＞ jQuery ＞プラグイン＞ 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対策つきの無限スクロールを実装することにより、追加されたコンテンツをインデックスに登録させる方法を紹介します。

１．はじめに

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

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

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

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

defunkt / jquery-pjax

jimyi / jquery_bottom

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

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

２．pushStateとは

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

３．サンプル

サンプルを作りました。

サンプル

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

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

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

４．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ページ目のコンテンツがすべて後続のコンテンツで上書きされてしまうのでやめました。

５．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(){})

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

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

６．その他

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

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

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

７．参考サイト

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

Ajaxページでは“#”（ハッシュ）よりも“pushState”を使ったほうがGoogleのSEOに楽かも
https://github.com/defunkt/jquery-pjax ※https://github.com/falsandtru/jquery.pjax.jsではないので注意
pjaxマニュアル ※falsandtru版
AjaxでもURLを更新して履歴を作れるHTML5のpushState試してみた
pjaxとflagmentの使い方（静的サイトでも手軽にpjax！）

Posted by yujiro このページの先頭に戻る

小粋空間 - a cheap joke and a play on words site