よく使うコード:無限スクロール

LINEで送る
Pocket

無限スクロールを入れるとユーザビリティは良くなりますよね。
特にモバイルでは、タップよりも上フリックでどんどん下に行くのが直感的ですから。
FacebookやTwitter、Pinterest、Tumblrでも実装されているあれです。

jQueryのinfinite scrollプラグインを使えばあっという間にできてしまいます。

Infinite scroll has been called autopagerize, unpaginate, endless pages. But essentially it is pre-fetching content from a subsequent page and adding it directly to the user’s current page.


Infinite scroll has been called autopagerize, unpaginate, endless pages. But essentially it is pre-fetching content from a subsequent page and adding it directly to the user’s current page.

jQuery本体はjQuery公式サイトから、infinite scrollプラグインはGitHubの配布ページからダウンロードしてきます。
GitHubではページ右下の「Download Zip」からダウンロードできます。

この2つをWebサイトで読み込みます。
コンテンツの最後、body閉じタグの前が一般的です。

    //コンテンツ終わり
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery.infinitescroll.min.js"></script>
    //その他のjavascript読み込み
  </body>
</html>

基本的には以下の3つのオプションを設定するだけです。
navSelector:次に読み込む要素を囲む要素
nextSelector:次に読むこむ要素自体を囲む要素
itemSelector:表示させたい要素

$(function(){
  $('#content').infinitescroll({
    navSelector  : "nav",              // ナビゲーション要素を指定
    nextSelector : "nav a",            // ナビゲーションの「次へ」の要素を指定
    itemSelector : "#content div.post" // コンテンツ要素を指定します。
  });
});

htmlは以下のように書きます。

<div id="content">
  <div class="post">.....</div>
  <div class="post">.....</div>
  <div class="post">.....</div>
</div>
<nav>
  <a href="/posts?page=2">次へ</a>
</nav>

navSelectorオプションで指定した$(‘nav’)は非表示になります。
nextSelectorオプションで指定した$(‘nav a’)のhrefから次ページをAJAXでとってきます。
itemSelectorで指定した$(‘#content div.post’)を次ページからとってきて、$(‘#content’)要素に追加していきます。

簡単ですね。

ところで、海外SEO情報ブログのKenichi Suzukiさんが「世界で最も美しくSEOに適した無限スクロールを実装するサイト、QUARTZ (qz.com)」を紹介してくれています。

そのサイトは、ニュースメディアサイトの QUARTZ です。

QUARTZ

「百聞は一見にしかず」で、実際に QUARTZ に訪問して見てください。

注目してほしいのはブラウザに表示されるURLです。

無限スクロールで下がっていくと、今あなたが見ている記事に対応したURLに自動的に切り替わります。
下方向だけでなく上に戻ればまたそれに対応してURLが変わります。
titleタグももちろん切り替わります。

個別のURLをブラウザのアドレスバーに入れれば、直接そのコンテンツを閲覧できます。
そして、そこから無限スクロールが始まります。

記事に与えられた個別のURLは、そのURLできちんとGoogleにインデックスされています。海外SEO情報ブログ

これはすごいですね。
URLを変えながら無限スクロールを実現しています。

ここまでしなくてもinfinite scrollでもnextSelectorでページごとのURLをGoogleに教えているから十分にSEOとして考慮しているのですけどね。
海外SEO情報ブログでも推奨されている方法です。

無限スクロールからリンクされている個々のアイテム(記事やコンテンツなど)を検索エンジンが確実にクロールできるように、利用しているシステムが、無限スクロールとともにページネーションしたページも作成できるように必ずしておく(無限スクロールで、1つのURLに収めるのではなく、分割して複数のページに分けるということ)。海外SEO情報ブログ
LINEで送る
Pocket

コメントを残す