■SEOに適した無限スクロールの導入
FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール（英: Infinite Scrolling）ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富なギャラリー的なサイトではよく見かけます。
しかし、よく見られるjQueryを使ったシンプルな無限スクロールはコンテンツをすべて１つのHTMLファイル上に記述しておいて、スクロールするたびに「display:block」と「display:none」を使って表示させていく、というものです。人が見る分にはこの形でも良いでしょうが、Googlebot に対してとなると話が変わってきます。
| ご自身のサイトのニュース フィードやピンボードで、ユーザーの利便性を考えて無限スクロールを使用している方もいらっしゃるでしょう。しかし、Googlebot に対してとなると話が変わってきます。無限スクロールでは、クローラーがユーザーの行動（スクロールやボタンを押してさらにアイテムを読み込むなど）を常にエミュレートできるとは限らないため、フィードやギャラリー内のすべてのアイテムにアクセスできないことがあります。クローラーがアクセスできないコンテンツは、検索結果に表示されることもないでしょう。 無限スクロール ページからリンクされている個別のアイテムを検索エンジンがクロールできるようにするには、無限スクロールを分割した一連のページ群を生成するようにしましょう。 |
作例
■push Stateによるブラウザの履歴の更新
push Stateとは？
| push Stateとは、HTML5でサポートされるAPIです。 ページを遷移せずHTML（の一部）を変えた場合でもブラウザに履歴を残し、また一意のURLを割り当てることが可能です。 HTMLの中身が変わってもAjaxはページを遷移しないのでURLが同じままです（#以下が入れ替わるだけで一意のURLとして処理しない）。 ブラウザの戻るボタンを押しても前のコンテンツを再び表示させることはできません。本当に前のページに戻ってしまいます。なのでGoogleは、クロール・インデックスできるように特殊な仕様をサポートしてくれたわけです。しかしpushStateを使えば、Ajaxで変化させたそれぞれのコンテンツに対してユニークなURLを割り当てられるのです。 つまり検索エンジンにとってクロール・インデックスしやすくなります。 |
JavaScriptが切れている状態でも手動でページ遷移出来るような設定も取り入れ、検索エンジンとの相性を考慮した無限スクロールにカスタマイズしましょう。
以上の内容を踏まえて、今回は検索エンジンが処理しやすい無限スクロールを作っていきましょう。
今回のポイント
- ajaxを使ったシームレスなページ遷移
- HTML5のAPIを使い、各ページにユニークなURLやタイトルを最適化する事が出来る。（ブラウザの制限のため、一部NG）
- 無限スクロールページを、JavaScript が無効でもアクセス可能な形にする。
- 各コンテンツページにはトップページに自動的に戻るリダイレクト機能を実装
- 相対パスはNGなのでルートパスを使用すること
- SPA(Single Page Application)の元となる考え方を理解する
今回の注意点
- パスは全てルートパス
- タイトルは必ずページ毎に設定する
- トップページに「トップに戻るボタン」を設置
- footerは最後のページに設置
※特にページのタイトルの最適化は非常に大事です。通常の無限スクロールは1枚のhtmlファイルに無数のコンテンツが記述されていますが、今回のようにhtmlファイルを細分化する事で、コンテンツに応じたより細かいタイトルやURLの設定が可能になります。
★ajax
【IT用語】 Ajaxとは？初心者向けに豊富な画像で仕組みを解説 | Pikawaka
★API
APIとは「Application Programming Interface（アプリケーション・プログラミング・インターフェイス）」の略語であり、「ある1つの機能に特化したプログラムで共有可能なもの」や「ソフトウェアの機能を共有する仕組み」のことです。よく使う機能がAPIとして用意されていれば、わざわざ一からプログラムを組む必要はありません。必要に応じてAPIを利用し、効率的に開発を進められます。
★SPA(Single Page Application)
ブラウザによるページ遷移を行うことなく、単一のWebページでコンテンツの切り替えを行うことで、ユーザーのUXが向上します。JavaScriptフレームワーク（Angular、Vue.js、Reactなど）で作成される事が多いです。
| <script> $(‘#container’).cleverInfiniteScroll({ contentsWrapperSelector: ‘#container’, contentSelector: ‘.wrapper’, nextSelector: ‘#next’, }); </script> |
Javascriptによるリダイレクト
Javascriptによるリダイレクトの方法もあるので、試してみましょう。
| setTimeout(“redirect()”, 0); function redirect(){ location.href=’../index.html’; } |