このページの本文へ

「SEO的に優れた無限スクロールの実装方法」Googleからのアドバイス

2014年02月14日 02時16分更新

記事提供:SEMリサーチ

  • この記事をはてなブックマークに追加
本文印刷

米Googleは2014年2月13日、検索エンジンフレンドリーな無限スクロール(Infinite Scroll)の導入方法についてのアドバイスを公式ブログに掲載した。John Mueller, Maile Ohyed, Joachim Kupkeの3人による上級者向けの投稿だ。

本記事では、翻訳ではなく、軽く Google のアドバイスの要点を押さえつつ、私個人の意見を述べていく。


無限スクロールとは

Twitter や Facebook でも導入されているので既にお馴染みかもしれないが、画面を下にスクロールした時に自動的に次のコンテンツを読み込んでいく仕組みのこと。サイト制作者であればjQueryのinfinite scrollプラグインはご存じだろう。

3年ほど前から、米国の不動産や旅行カテゴリのウェブサイトで無限スクロールの導入が流行したことがある。3年前はちょうど Google が重複コンテンツやページネーションの処理について仕様を変更していた時期に重なる。

不動産や旅行カテゴリは、1つ1つのカテゴリ/サブカテゴリで、膨大な数の商品アイテムを一覧ページでユーザーに提示する必要があるが、これを Google に効率よくインデックスさせる、あるいは、重要なページを確実に Google に(優先的に)インデックスさせるためには、いっそのこと無限スクロールを導入してしまえば解決出来ることが多かったことが遠因にあると考えられる。

eコマースサイトであれば、商品によって価格、色、サイズ、etc. と多数の属性を持ち、それぞれの条件にあわせて様々な切り口で検索結果一覧を提示する(ファセットナビゲーション)必要もあるわけだが、これをSEO的にきれいに処理するのは大変な作業である。あまり重要性が高くない領域(≒インデックスされなくても良い領域)に無限スクロールを導入することで、その他の余計なSEOの作業が不要となるというわけだ。


無限スクロールとSEOの問題

無限スクロールの例)

Apple Mac Pro
https://www.apple.com/jp/mac-pro/

Une journée en Renault ZOE
http://www.zoe.renault.fr/

Apple Mac Pro のように、読み込まれる情報全体で1つのページを構成しており、1つ1つの情報が固有のURLを持たない、または検索にヒットする必要性が高くないケースにおいては特に検索エンジン対策において心配する必要はない。Mac Pro の特徴や仕様に関連する検索キーワードの誘導先は常に /jp/mac-pro/ であることに、(Apple者のブランドコミュニケーションの視点を考えても)特に問題はないだろう。

一方、Google が課題として認識しているケース(こうした技術的な記事を公式ブログで公開した背景にある意図)は、ニュースメディアやeコマースサイトなど、無限スクロールで読み込まれる1つ1つのリンクがクローラにより巡回される必要がある場合だ。

例えばeコマースサイトのあるカテゴリ目次ページに来訪した時に、仮に無限スクロールで合計200の商品アイテムが読み込まれる場合、ウェブマスターはこの200の商品詳細ページが Google にインデックスされることを希望するし、それは検索利用者にとっても Google にとっても検索体験を高める上で重要なことだ。

しかし、クローラ(googlebot)は必ずしも無限スクロールを適切に処理できるわけではない、人間が行う動作 - 画面下部までスクロールや「もっと見る」ボタンをクリックする - といった行動を完璧にエミュレートできるわけではないので、正常にクローリングが行われない可能性がある。

無限スクロールを採用したウェブサイトで、かつ(無限スクロールで次々読み込んでいく)コンテンツとそのリンク先までを適切に検索エンジンに登録してもらうためには、ウェブマスターが検索エンジンに配慮した開発を行う必要がある。


解決方法:プログレッシブエンハンスメント

検索エンジンフレンドリーな設計においては、「プログレッシブエンハンスメント」(Progressive Enhancement)の考え方を念頭に置くと良い。『提供するコンテンツは同じだけれども、来訪者の制約にあわせて提示の方法を変える』、つまり、Googlebot は何世代も前の、基本機能しか有しない古いブラウザとして扱えるようにサイトを設計すれば良い。

具体的には、従来のようにページネーション(ページ送り)のナビゲーションを提示する、という極めてシンプルな解決策を用意する。


クローリングさせるページ分割のベストプラクティス

Google は次のような技術的なアドバイスを紹介している。

  1. 無限スクロールで読み込ませるコンテンツを(ページ)分割する
  2. 分割したページ1つ1つに固有のURLを割り当てる。category?name=fun-items&page=1 や fun-items?lastid=567 は望ましいが、fun-items#1 はあまり薦めない(※ 適切にインデックスされない場合がある)
  3. 割り当てたURLは2週間後も(理論上は)同じコンテンツが表示されるようにする、つまり、$テーマやカテゴリ、絶対日時$の記事/商品一覧 というURLであれば問題ないが、$○日前$のページといった具体に相対的な時間指定でURLを指定するのはNG
  4. 検索にヒットした時に、価値あるコンテンツで構成されるURLを生成せよ、例えば「結婚式のアドバイス」「デジタル一眼レフカメラの選び方」といった具合
  5. rel=next and rel=prev を使っても良い
  6. replaceState/pushState を使っても良い

基本的には、よくある【1 2 3 4 5 6 7 8 9 10 ... 30 ... 100 ... 最後】といったページネーションを行えば良い。今回は、主として検索エンジンにクローリングさせることを重視して(しかし度を過ぎてはいけないよう) 設計すれば良いので、1ページあたりの情報掲載数は20~50と多めにしたり、扱う情報のアーカイブ価値が高いのであれば過去のものもクロールできるようページネーションのリンク先を工夫すれば良い。

あるいは、ニュースメディアであれば「○年○月の記事一覧」という括り(Googleは推奨していないが)でも過去のアーカイブ記事へ巡回させるという目的は果たせるので、Mashableのような年月日別のリンク先を作成して、1つ1つのニュース記事もインデックスされるように配慮しても良いだろう(※ Mashable は無限スクロールを採用している)。

本件においては重複コンテンツの処理は Google に丸投げで構わないので、Google が推奨する "rel=next and rel=prev" は個人的には推奨しない。言い換えれば、rel=next and rel=prev を導入してウェブマスターが Google にシグナルを送信しなければならないような状況を招くのであれば、それは検索エンジンに配慮した無限スクロールの要件定義がおかしいことを疑った方が良い。「プログレッシブエンハンスメント」を前提にしつつも、実務上は工数負荷とコスト、効果のバランスを考えて、誰得かわからないアノテーションは導入せずに済ませてみることをまずは考えてみて欲しい。


Infinite scroll search-friendly recommendations [Google Webmaster Central Blog]
http://googlewebmastercentral.blogspot.jp/2014/02/infinite-scroll-search-friendly.html


#
Google が「上級者向け」と書いてある通り、これは上級者向けです。私は通常の講演やセミナーにおいて絶対に取り上げない話題の1つです。なぜなら、無限スクロールのSEO要件定義と設計はケースバイケースなので、説明のしようがないからです。Google はおそらく「一般的なeコマースサイト」を念頭においてブログを執筆しているようですが、本文で紹介した Mac Pro のように、このアドバイスが適用できないケースは山のようにあります。

基本は「古いブラウザが読み込めるようにする」「情報は同じだけれど環境や制約によって見せ方や作法を変える」というプログレッシブ・エンハンスメントを意識して設計すればいいのですが、SEO 的にはあれこれちょっといじりたいわけですよね。ええ。

Web Professionalトップへ

WebProfessional 新着記事