今や少し下火になってきている無限スクロール、昔はホットだった。Facebookが使ってるんだし俺らも使おうぜ！ってな感じで、その実装方法が乱れ飛んだのも今は昔。
で、この技術、SEOに最適な実装方法というのがある。Googleが2014年末に投稿したブログに従えば、ちょっと気をつけて実装しないといけないってことが分かる。
今回はその方法を解説する。まずはjScrollというjQueryプラグインで無限スクロールを実装する方法を解説し、これをSEOに最適化させる方法へ続く。
プロジェクト作り
jScrollのダウンロード
まずはGithubからjScrollをダウンロードする。
pklauzinski/jscroll: jScroll Infinite Scrolling Plugin for jQuery
落としてきたファイル一式から『jquery.jscroll.min.js』を取り出してこのようなプロジェクトを作ろう。
index.htmlの中身
index.htmlは、jQueryとローカルの２つのjsファイルを使うよう設定する。
※test-jscroll.jsは空でOK
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>test jscroll</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" /> <script type="text/javascript" src="js/jquery.jscroll.min.js" /> <script type="text/javascript" src="js/test-jscroll.js" /> </head> <body> </body> </html> |
jScrollの使い方
記事でjScrollを使ってみる
まずは一番簡単にjScrollを使ってみる。
想定として、ブログやWebマガジンの記事を無限スクロールさせることを考える。マーケティングマガジンのDIGIDAYなんかで使われている、記事の最後まで来たら自動で次の記事が読み込まれるアレだ。
記事を作る
記事の構成を極力簡単にするため、ヘッダーと文章、次の記事へのリンクがあるものを作る。先ほどのindex.htmlのbodyにこう書こう。
|
1 2 3 4 5 6 7 |
<body> <div class="scroll"> <h1>page 1</h1> <p>page 1's content</p> <a href="page2.html">next page</a> </div> </body> |
最上位のdivに指定しているscrollクラスは、無限スクロールさせる対象だということをjScrollに教えるために使う。
2ページ目の追加
最後のaタグで次の記事へのリンクを貼ったので、そのファイルをプロジェクトに追加しよう。
1ページ目の構成と同じく、page2.htmlの内容もできるだけ簡単にする。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>test jscroll</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="js/jquery.jscroll.min.js"></script> <script src="js/test-jscroll.js"></script> </head> <body> <div class="scroll"> <h1>page 2</h1> <p>page 2's content</p> <a class="next" href="page3.html">next page</a> </div> </body> </html> |
ローディング表示の確認のために２ページ目にもaタグを作ったけれど、page3.htmlは追加しなくてOK。次のページが見つからない場合、jScrollはずっとローディング表示をする。
jScrollを使う
最後に、jScrollを使って無限スクロールさせるコードをtest-jscroll.jsに記述しよう。やることは簡単で、HTMLの実行が終わった段階でscrollクラス経由で無限スクロールを設定するだけだ。
|
1 2 3 |
$(function(){ $('.scroll').jscroll(); }); |
記事の構成が簡単すぎて無限スクロールになっているかわかりづらいけれど、index.htmlをブラウザで開いて、1ページ目の下に2ページ目が表示されていれば上手く行っているってことだ。
次へのリンクの指定なしにjScrollが動くワケ
無限スクロールする部分は指定したけれど（scrollクラス）、次へのリンクであるaタグは指定しなかった。この指定が無い時、無限スクロール範囲の最後のaタグを探すようにjScrollが作られているおかげだ。
実際は明示的に次へのリンクを指定したい向きもあると思う。それを含めて、応用的な使い方を解説していこう。
応用的jScrollの使い方
次の記事へのリンク指定
さて、明示的に次の記事へのリンクを持つaタグを指定する場合、無限スクロール範囲を指定したようにセレクターでaタグをjScrollで知らせてあげる。
index.htmlとpage2.htmlのaタグにnextクラスを付けよう。
|
1 |
<a class="next" href="page2.html">next page</a> |
これをjScrollに伝える部分はこうだ。test-jscroll.jsへ記述する。
|
1 2 3 4 5 |
$(function(){ $('.scroll').jscroll({ nextSelector: 'a.next' }); }); |
再度、index.htmlを表示してみよう。先ほどと同じように1ページ目と2ページ目が連なって表示されていれば成功だ。
ローディングアニメーションとテキストの指定
今回の例だと記事が短すぎて読み込みが一瞬で終わるけれど、実際は読み込み完了にすこし時間が掛かるはず。そんな時にローディング中ということを示すアニメーションとテキストを表示することができる。
今回はアニメーションの変わりにFont Awesomeのローディングアイコンを使うため、まずはCDNからアイコンを取得するようにする。このlinkタグをhead内に書こう。
|
1 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> |
ローディングアイコンとテキストの指定は、次の記事へのリンクを指定した時と同じく、.jscroll()を使う際に伝えてあげる。
|
1 2 3 4 5 6 |
$(function(){ $('.scroll').jscroll({ nextSelector: 'a.next', loadingHtml: '<i class="fa fa-spinner">Now Loading...</i>' }); }); |
他のカスタマイズ
コンテンツセレクターや、無限スクロールする回数の指定など、jScrollは他にも色々とカスタムできる。詳しくはこちら。すべて、.jscroll()を使う際に指定する。
SEOに最適な無限スクロールをjScrollで
ここからは、Googleが推奨する形で無限スクロールを実装する方法を考える。やっと本題でR。
全体像はGoogleブログを見て頂くとして、ここでは記事について必要な無限スクロールの作法を解説する。
Official Google Webmaster Central Blog: Infinite scroll search-friendly recommendations
pushStateによるブラウザの履歴の更新
Googleブログの記事では、無限スクロールを次々にページを捲っていく事と同じとしている。つまり、ユーザーが自ら次の記事へのリンクをクリックしているのと同じということだ。
そのため、無限スクロールで記事が表示される度にブラウザの履歴（URL）を更新しなければいけない。これは、スクロールでページを戻った時も同じだ。すなわち、スクロールでページを進んだり戻ったりする度にURLを更新すればいい。
ここでHTML5のHISTORY APIに含まれるpushStateの出番だ。これを使って、1記事の表示が完了する毎にブラウザの履歴を更新する。
ロジックとしては、各記事が表示された時にURLを更新するようにする。今回は手っ取り早く、記事のh1タグが画面に表示された時に更新処理を走らせるようにした。
inviewのダウンロード
まずは、要素が表示されたことを検知できるjQueryプラグイン inview を入れる。
Githubのレポジトリからダウンロードし、jquery.inview.min.jsをプロジェクトのjsフォルダに置こう。
inviewを使う
index.htmlおよびpage2.htmlのhead内にinviewを使う記述をする。
|
1 |
<script src="js/jquery.inview.min.js"></script> |
URLを更新するために、各記事のh1要素にページ毎のURLを持たせ、inviewで使うクラスを付ける。この例の <your-url> は各自の環境のURLに置き換えてほしい。
|
1 2 3 4 5 |
<h1 class="top-of-page" data-url="<your-url>/index.html">page 1</h1> ~~~ <h1 class="top-of-page" data-url="<your-url>/page2.html">page 2</h1> |
URLを更新する部分はこうなる。top-of-pageを持つh1要素すべてに対し、条件が合えばpushStateを使ってURLを更新している。test-jscroll.jsに追記しよう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(function(){ $('.top-of-page').each(function() { $(this).on('inview', function(event, isInView, visiblePartX, visiblePartY) { if (isInView) { var nextUrl = $(this).attr('data-url'); var needUpdateUrl = window.location.href !== nextUrl; if (needUpdateUrl) { window.history.pushState(null, null, nextUrl); } } }); }); $('.scroll').jscroll({ nextSelector: 'a.next', loadingHtml: '<i class="fa fa-spinner">Now Loading...</i>' }); }); |
各記事へ直接アクセスできるようにする
今回は2つのページを用意し、無限スクロールで2ページ目を表示するようにした。この2ページ目に直接アクセスした時でも、正しくページが表示されるようにと推奨されている。
今回のプロジェクトで言えば、<your-url>/page2.htmlにアクセスし、なんら問題なくコンテンツが表示されればいい。
ちゃんとした無限スクロールは意外と面倒
このように、SEOに配慮した無限スクロールを実装するのは手間が掛かるもの。だからなのか、流行りが終わったからなのか、無限スクロールを目にする機会は減った。これから無限スクロールを使おうとするプロジェクトでは、適宜考えて使っていきたい。
jQueryをきちんと学びたいWebデザイナーの方へ
![[Buildほか] 2016年に開催されるマイクロソフトのイベント](https://clickan.click/wp-content/uploads/2015/10/typewriter-1-340x226.jpg)
2 Responses
だかつ
情報、ありがとうございます。SEOに最適な無限スクロール、やってみました。
Firefoxが、１,２,３,４ページと順に読み込みながら表示されては消えていき、
読み込み終了時には、１（index）と４ページしか表示されませんでした。
IEは、確認してませんが、
未対応なブラウザもありますか？
toach
試して頂いてありがとうございます＾＾ Chromeでのみ確認していますので、Firefoxは何らかの調整が必要そうですね。