最近、海外のブログなどでも「スマートフォン向けサイトでのSEO」というキーワードが出てくることが増えてきました。SEOは常に正解の分からない得体のしれないオカルトに満ちた世界ですが、それでも今までの様々な試行錯誤から「定石」のようなものは出てきています。
そうした「SEOの定石」と、モバイルサイトでの「ユーザビリティ」を極力両立させるポイントについて、年明けにSEARCH ENGINE LANDで良い記事(How To Improve Mobile Commerce SEO Using JQM)があがっていました。そちらを参考に他の情報を加えつつ、jQuery Mobileを活用したサイト構築について少しまとめてみます。
モバイル端末でのユーザビリティ
Webユーザビリティ研究の第一人者、ヤコブ・ニールセンのアラートボックスの記事(Defer Secondary Content When Writing for Mobile Users)によると、やはりモバイル端末上の画面でユーザを惹きつけるポイントはまずファーストビューでページの最も伝えたいポイントをアピールし、次により詳細な内容に誘導することです。
ファーストビューの重要性はデスクトップ向けサイトでも繰り返し言われる基本的なことで「何を今更」かもしれません。しかし、モバイル端末(たとえばiPhone 3GSサイズ)ではデスクトップに比べてページのコンテンツ内容把握が2倍難しい(Mobile Content Is Twice as Difficult)という調査もあり、従来以上に強く認識する必要のあるポイントです。そうでなくても、デスクトップスクリーンはワイドになっていっていて、情報は1ページに詰め込まれていく傾向が強くなっています。しかし、モバイル端末では(こちらもスクリーンの大型化は進んできているものの)過去のデスクトップ端末に比べても遙かに小さな画面です。
面白いのは、モバイル端末でのブラウジング目的の最たるものは「時間つぶし」であると予測されている(Optimizing a Screen for Mobile Use)にも関わらず、多くのユーザはテキスト量の多いサイトを見せられることに対してデスクトップ端末での閲覧以上に短気である(Mobile Content: If in Doubt, Leave It Out)ことです。この一見矛盾する2つの調査結果を、ニールセンは “Information foraging theory” と結びつけて、モバイルでのブラウジングは時間つぶしといっても時間を無駄にしたいわけではなく、むしろ少ないコストで多くの情報を得ることを目的としたゲーム感覚であって、そのためによりダイレクトな情報を欲するのではないかと推察しています。このことは、自分に当てはめても直観的に納得のいかないものではありません。
そうなると、モバイル端末向けページのあるべき姿が漠然と見えてきます。「ページあたりに情報量を詰め込みすぎず、それが何のコンテンツであるのかが一目でわかるような作りにすること」と「興味を惹いた後は、じっくりと時間をかけて読めるような内容のあるページにすること」という二律背反を解決するため、インデックス/検索結果ページ -> 概要ページ -> 詳細ページというような階層構造を明確にして、ユーザに「これは求めるコンテンツなのか」を早い段階で素早く判断させてやることでしょう。そして、携帯端末向けだからといって情報を削ぎ落してしまうのではなく、最終的には充分な情報を腰を据えて得られる満足度の高いページを用意することです。
たとえば、Amazonは昨年末からモバイル端末向けページをマイナーチェンジしました。従来1ページにおさめられていた商品ページを複数に分割しています。
つまり、最初の商品ページでは概要やユーザ評価、在庫の有無などを極力素早く見せておき、プロダクトについて更に詳細な情報が知りたい場合は、更にもうひとつ次のページ(ページの名前が「商品詳細」と「説明&詳細」なのは、苦労の後が見えますが)で閲覧できるという具合です。
SEO
では、こうした構造をSEO的な観点から見ると、どうでしょう。これは、少し微妙なところです。
ページあたりの情報量を少なくしてコンテンツの視認性を優先した場合、そのページのキーワード量は当然ながら減ってしまいます。先ほどのAmazonを例にとっても、該当する製品を探しているユーザをランディングさせたいのは購入機能のある「商品詳細」ページであるはずです。しかし実のところ、製品名をダイレクトに検索しているのでない限り、製品に関連した検索に強いのは「説明&詳細」ページの方でしょう。あるいは、それらをひとまとめにした旧来型の「詰め込み」ページの方が強くなると考えられます。
もちろん、インデックス量が増えるメリットも無いわけではないですし、ページ単位でなくサイト単位での強さは依然として保つことが出来ます。Amazonくらいの規模であれば、大きな意味でサイトを受け皿にして、そこからユーザビリティの良いサイトでユーザを誘導することに注力する方針で問題無いでしょう。しかし、これから地位を確立していかなければならないサイトにとって、30位くらいのページが複数できることよりも10位以内に入るようなページが1つ出来ることの方が遙かに重要です。そうした目的において、キーワードや被リンクの分散しやすいページ構造は望ましいものとは言い難いものです。
このように、モバイル端末向けサイトにおいてもSEOとユーザビリティは(歴史上何度も繰り返されてきたように)相反するものになってしまいそうです。しかしこうした問題を解決する方法が、あるいはjQuery Mobileには備わっているかもしれません。
複数ページテンプレートの活用
jQuery Mobileのページ機構では、通常のシングルページテンプレートの他に、複数のページを単一ファイルにまとめたテンプレートを用いることも可能です。これは次のような構造でつくられます。
<body>
<!-- 最初のページ -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar">bar</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- 2番目のページ -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm the second in the source order so I'm hidden when the page loads.
I'm just shown if a link that references my ID is beeing clicked.</p>
<p><a href="#foo">Back to foo</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
このページは、JavaScriptの動作しない環境では単一の大きなページに見えます。GoogleやYahooなど検索エンジンのクローラーから見ても、全体でひとつのページに見えるはずです。
つまり、たとえば前述のAmazonにおける「商品詳細」と「説明&詳細」ページを単一のテンプレートに入れてしまえば、ユーザビリティとしては動作を保ったまま、検索エンジンに対してはキーワードの揃った有意義なページとして見られる可能性が高いということです。
階層化リストビューの活用
同様に、jQuery Mobileのリストビューを活用することでSEOとユーザビリティを両立させることに近づけるかもしれません。この時に使用するのは、階層化リストビューです。
jQuery Mobileでは、HTMLのリスト(ul, ol)をネストさせることで1ファイルでありながら自動的に複数のページをジェネレートし、ドリルダウン式のページ構造を実現することが可能になっています(詳しくは日本語リファレンス、あるいは近日発売の拙著参照)。これも、前述の理由と同様に、検索エンジンに対して情報を1ファイルに集約させつつ、ユーザには断片化されたページを案内することでユーザビリティを保つことが出来るようになるはずです。
期待と注意点
ただし、この方法にも注意が必要です。元来複数ページテンプレートはSEO目的で用意されたわけではないためでもありますが、ファイル内のページ間リンクがアンカーの形式であるにも関わらず、実際にはリンク先のページ内アンカーが存在していない問題があります。たとえばGoogleに対しては “Google Section” の概念が適用されてくれることを期待しているため、これはやはり解決すべき問題です。そのためには、ベースとなるHTMLにはアンカーを記述しておき、jQueryが発動する環境ではpageinitイベントでアンカーを削除するような工夫が望ましいかもしれません。
実際、そうした動作をするプラグインなどを作ることは容易です。あるいはjQuery Mobileのコアライブラリに組み込むことも出来るでしょう。今のところそうした動きを聞かないのは、やはりSEOの何が正解で、現実的にどの程度の効果があるのか不透明であるためだと思われます。ここで書いたことも、あくまで「期待」であり、「確実にそうなる」わけではないことをご理解ください。
特に複数ページテンプレートについては、リンクの貼り方などサイト構築方法自体が特殊になるため、当初自分は「jQuery Mobile黎明期の機能」であり、あまり使うべきでない構造と捉えていました。今月発売になる「jQuery Mobileポケットリファレンス」でも、そのように紹介しています。しかし、今回SEOの観点から改めて考えた際に、この形式にも充分な利用価値がある可能性があると感じるようになりました。よく「jQuery Mobileは重い」と誤解を与える原因となるAjaxページロードを避ける目的以外にも、特定プロダクトのKiller Mini Site構築手法として活用できるかもしれません。
次は改めて、この複数テンプレートによるミニサイト構築について書きたいと思います。
jQuery Mobile ポケットリファレンス
Related posts:
- [jQuery Mobile] ActionSheetプラグイン
- [jQuery Mobile] BartenderプラグインでフッタをiOSアプリ風にする
- [jQuery Mobile] ベータ2 リリースノート
- [jQuery Mobile] Markup Cheat Sheet
- [jQuery Mobile] 1時間でミニサイトをつくる
