上級]この記事では、PC向けページをモバイルサイトで分割するときの構成のベストプラクティスについて考えてみます。先週、スマホ向けサイト作成セミナーを実施した際に何人もの受講者から次のような質問を受けました。スマホサイトではPCサイトのページを複数に分けて提供しています。このとき、検索エンジンに対する設定はどうしたらいいでしょうか?理由はさておき、PC向けサイトではもともと1ページだったコンテンツをモバイル向けサイトでは分割することがあります。PC向けURLとモバイル向けURLは当然違ってきます。異なるURLの構成なのでrel=”canonical”とrel=”alternate”を用いたアノテーションの設定が必要です。ところが、1対1の対応になっていないのでそれぞれをどこに向けていいかを悩んでしまいます。僕自身もその場では「これがベスト」という方法が思い浮かばず宿題にさせてもらいました。してベストな解は見つかっていませんが、運用に問題が発生せずかつ現時点ではこうするといいだろうと思われる構成を3つ考えました。セミナー受講者だけではなくブログ読者のあなたともシェアします。難易度はかなり高めです。難しくて理解できない人は3つめの構成を選んでください。言っておくと、3つめの構成が僕のオススメだしユーザーにとっても検索エンジンにとっても親切なはずです。モバイル向けページを分割する具体的な設定に入る前に状況設定しておきましょう。モバイルサイトでは次の2つのURLに分割されます。m.example.com/page1.htmlm.example.com/page2.html図に表すと下のようになります(クリックすると拡大します)。どちらにrel=”alternate”を向ければいいのでしょうか?両方ともPC向けページに対応するモバイル向けページ(の一部)です。いって、両方に向けるわけにはいきません。ここでみんな悩んでしまうのです。そこで3つの解決策を次に説明します。rel=”prev/next”を使う構成1つめの解決法は、ページネーション用のrel=”prev/next”を使う方法です。分割したモバイル向けページをrel=”prev/next”で束ね一連のコンテンツであることをGoogleに伝えます。それぞれのモバイルページからはrel=”canonical”をPCページに向け正規化します。PC向けページからのrel=”alternate”は1ページ目のモバイル向けページ(page1.html)だけに向けます。この方法は木村さんがGoogleの公式ヘルプフォーラムで提案していたものです。動作しているとのことです。Google的にも問題はないようです。ページを作成する構成2つめの解決策は、View-allページ(ビューオールページ、「すべて表示」ページ)の構成を採用した方法です。View-allページも、rel=”prev/next”と同じくページネーションで利用される構成でしたね。モバイルサイト用にも、分割していないView-allページを作ります。rel=”canonical”で正規化します。モバイルサイトのView-allページ(m.example.com/page.html)からはrel=”canonical”で対応するPCページ(www.example.com/page.html)に正規化します。PCページからのrel=”alternate”はモバイルサイトのView-allページに向けます。PC向けサイトのページに1対1で対応するページがモバイル向けサイトにも存在するのでアノテーションも1対1で対応させられます。これは僕が考えた構成で、Googleのひとにはきちんと処理されるだろうと言ってもらえました。分割したモバイルページのrel=”canonical”はモバイルサイトのView-allページではなくてPCページに向けてもいいかもしれませんね。図に示す構成では“2段”のrel=”canonical”になっています。すべてのページがGooglebotにクロールされることが必須条件になります。全ページをクロールしていないとページ同士の関係性をGoogleが確実に把握できないからです。これは1つめの構成にも言えることです。分割しない構成さて、ここまで読んできてあなたの頭のなかはきっとこんな状態ではないでしょうか。それは普通だと思います。非常にややこしいし“トリッキー”です。問題なのは、検索エンジン(Google)の都合に合わせるためだけに複雑な設定が必要になる点です。2番目の構成では、PC向けサイトの1ページをモバイルサイトでは3つも作らなければなりません。手間ひまもかかります。ここで一歩引いて、「モバイル向けサイトでページ分割がなぜ必要なのか」に立ち返ってみましょう。ページが長くなってユーザーがたくさんスクロールしなければならないから?コンテンツ量が多くなってページの表示速度が遅くなるから?おそらくこんな理由からではないでしょうか?背景にはきっと「ユーザービリティ」を損ねないようにという思惑があるように思います。ユーザーは本当に短いページを求めているのでしょうか。鷲見さんが最近書いたLPOの記事では、PC版よりも長いスマホ版ページのほうがコンバージョン率が高かった事例を紹介しています。モバイルページは短いほうがユーザーが喜ぶというのはあなたの思い込みかもしれません。スマホではフリックすればスクロールは意外に手間にならないのではないでしょうか。モバイルにおいてスクロールよりももっと嫌われるのはページの移動ではないでしょうか。別ページの移動によってまた読み込みが発生し待たなければなりません。「待ち」は間違いなく、ユーザーエクスペリエンスの低下につながります。コンテンツの量が多いため表示速度に時間がかかるなら、表示速度を速める施策をすべきではないでしょうか。いろいろな方法があります。ブラウザの表示には関係のないコメントを削除するだけでもモバイル回線ではともすると高速化に役に立つかもしれませんね。いうことで、3つめの解決策は、モバイル向けサイトでもページ分割せずに1ページを丸ごと提供する構成です。レイアウトやコピー、画像などはモバイル向けに最適化したものを使うべきです。メインとなるコンテンツを複数ページに分けたりしません。いずれにしてもアノテーション設定で悩むことはありません。Googleが示した推奨構成に素直に従うだけです。まとめモバイル向けサイトでページを分割することが本当にユーザーエクスペリエンスを高めるのか、これをまず考えましょう。複数ページに分けてまで短くすることが必ずしもユーザーの満足度を上げるとは限りません。スマホからの閲覧であっても1ページで完結しているほうをユーザーは好むかもしれません。表示速度が遅くなることが心配ならサーバー側での高速化を実行しましょう。スピードアップはユーザーを必ず喜ばせます。モバイルサイトでページ分割する理由にはさまざまあるとは思います。どんな理由であってもページ分割しないで問題を解決できる手段が本当にないのかを探りましょう。それでもページを分割することが避けられない、ページを分割することがユーザーにとってベストだと言い切れるなら、1つめまたは2つめの構成を採用してください。別ドメイン名でのパターンとして説明しましたが、同じドメイン内のサブディレクトリでスマホサイトを分けているパターンでもやることは一緒です。カンファレンスでのスピーカー登壇が決定。Consoleに追加。ラウンドナップ・Webコンサルティング。