スピーカー
Leslie To氏 3Q Digital SEOディレクター
Cindy Krum氏 MobileMoxie CEO
※Cindy氏のセッションは次回の記事でご紹介します。
モデレーター
Barry Schwartz氏 SearchEngineLand、RustyBrick
モバイル：やるなら今しかない(Leslie To氏)
スピーカー Leslie To氏
サイト構成に関わらず重要な要素
※重要要素には「○」
アクセシビリティ
- リッチメディア
- インタースティシャル ○
- サイトナビゲーション
UX
- スケーリング ○
- テキストサイズ ○
- タップターゲット、padding ○
- ジェスチャー
- サイト内検索
- キーワードとタイピング
- コンバージョンフレンドリー ○
サイトスピード
- ページスピード
コンテンツ
- 可読性スコア
クロールステータス
- ログファイル解析
リッチメディア
HTML5を活用してビデオや、リッチコンテンツを提供する。サイト上で、ビデオをロード、デコード、再生させる。Flash等サポートされていない形式の使用はしない方がよい。
インタースティシャル
コンバージョンのためにフルスクリーンでインタースティシャル広告を表示させるのは、著しくUXを損なう。これはまだ良いケースで、最悪の場合Googleはインタースティシャルの裏にあるコンテンツを何も見てくれない可能性もある。バナーを活用した方がよい。
サイトナビゲーション
よくデスクトップ版サイトをタブレット版サイトに、そしてモバイル版サイトに中身を引き継いでいくケースがあるが、モバイルはデスクトップよりも表示領域が小さいので、多すぎる選択肢はユーザーを困惑させてしまう。Google Analyticsなどで、「サイト内検索」を見て、デスクトップよりもモバイルの方がサイト検索が多いのであれば、ナビゲーションに手直しが必要な可能性がある。
※ページ右側のサイトでは、カテゴリーページに辿りつくまでに3クリックも要した
スケーリング
縦画面、横画面ともにデバイスの画面サイズに、コンテンツとメディアがスケールするようにすること。CSSで絶対値を使って大きさを指定したり、スケールした際に粗さが目立つような低画質な画像は使わないこと。
テキストサイズ
viewportの範囲でスケールするようにする。16pxをベースのフォントサイズとして必要に応じてスケールさせるように。ユーザーに無為にズームさせないように。
タップターゲット
- タップターゲットの幅を最低でも48px以上に
- タップターゲットの周りは少なくとも32pxは離す
- ボタンをタップするためにズームさせない
ジェスチャー
特にEコマースサイトなどでは、つまむ、ダブルタップなどの一般的なジェスチャーを使えるようにすること。ズームされた時に、粗さが目立つような低画質画像を使用しない。
サイト検索
コンテンツを探しやすくするために、サイト検索をできるようにする。必要に応じてサイト検索で使われている言葉をサイトナビゲーションへ追加する。多くのユーザーがサイト検索が無いと探せないほどに、コンテンツを深い階層に埋め込むのは良くない。
キーボードとタイピング
入力する内容に合わせてキーボードを変更する(URL、Email、数字)クレジットカードの情報などを入力する際に、様々なキーボードを行き来させるのはやめた方が良い。
コンバージョンフレンドリネス
フォーム入力であろうと、電話であろうと、購入であろうと、コンバージョンを簡単にした方がよい。またコンバージョンしようとしてから、ユーザーに3クリック以上させるのはやめた方がよい。
ページスピード
Googleはモバイルページスピードをランキングファクターにするようだが、ランキングに関わらずユーザーのためには配慮すべきである。
コンテンツの可読性
コンテンツ内で複雑な表現は極力避けた方が良い。「新奇性」が高く「難易度」が低いコンテンツはシェアされやすい。
ログファイル解析
ScreamingFrog、botify、Deepcrawlなどのツールを使ってログファイルを解析し、GoogleBot Smartphoneがクロールしているかを確認するとよい。
別々のURLの場合の重要要素
デスクトップとモバイルで個別のページを持っている場合、やるべきことは多い。
URLとコンテンツ
- モバイルからデスクトップ版への<link>属性 ○
- Hreflangリンク ○
- 重複コンテンツ
- クロスリンク
- URL構造
リダイレクト
- 自動リダイレクト ○
- 同等のURL間でのリダイレクト ○
- リダイレクトに反してのページ移動 ○
クロールエラー
- モバイルのみ404
- モバイル404トラッピングページ
サーバー
- クロール率の増加のためのサーバーのキャパシティ ○
双方向の<link>属性
canonicalを設置して、重複コンテンツを回避する。
Hreflangリンク
インターナショナルコンテンツを持っている場合は、
- モバイル他言語版URL ⇒ モバイル版URL へcanonical
- デスクトップ版他言語版URL ⇒ デスクトップ版URL へcanonical
クロスリンクを極力なくす
× モバイル版サイト⇒デスクトップ版サイト⇒(リダイレクト)モバイル版サイト
○ モバイル版サイト⇒モバイル版サイト
自動リダイレクト
HTTPでのリダイレクトも、JavaScriptのリダイレクトも両方サポートされている。
別バージョンへのアクセスを可能にする
特にモバイルでの体験が優れていない場合は、尚の事設置した方が良い。個人的にはイベントトラッキングを設置して、どれだけのユーザーが自分でページを選んでいるかを見るとよいと思う。モバイル版を改善する上でのベンチマークになるから。
別ページからホームページへリダイレクトしない
例えばデスクトップ版のカテゴリページから、モバイル版の商品ページにアクセスしたときに、モバイル版のトップページにリダイレクトされるのは最悪。モバイル版の商品ページにリダイレクトされるべき。
モバイル版でコンテンツが存在しないのなら、デスクトップ版に残した方がよい
基本的にデスクトップとモバイルで同等のページを用意すべきだが、もし準備できていないのであれば404エラーページへリダイレクトするのではなく、デスクトップ版のページにユーザーを留めた方が良い。
ダイナミックサービングの場合の重要要素
3つの見るべきポイントがある
- HTTPヘッダを変更することを忘れない・・・ユーザーエージェントを見て、ユーザーを特定のページへ導いている
- ユーザーエージェントのリストを保持する・・・変更されやすいので注意
- 意図しないデスクトップとモバイルでのコンテンツ不一致をなくす
レスポンシブデザインの場合の重要要素
アクセシビリティ
- リソース、ページアセット ○
- Meta Viewportタグ ○
- 画像とリッチメディアのスケーリング
- ブレイクポイント ○
Robots.txtでリソースをブロック
ページスピードのためにやったとしても、ほんの数マイクロ秒しか改善しないので、やらない方がよい。
Meta Viewportタグ
- Width=device-width ⇒ デバイスの物理的な幅にマッチする
- Initial-scale ⇒ 訪問した際にズームした状態でアクセスする
- User-scale ⇒ ズームが可能(値はyesかnoか)
別の属性を使用する場合はカンマで区切る
画像とビデオもレスポンシブであるように
別の画像を別のデバイスで表示する場合は、media queryや<picture>属性を使用した方が良い。これにより、大きな画像をロードして下にスクロールしなければならないということはなくなる。
動画要素はviewportよりも大きくならないように。ビデオの大きさは、media queryやJavaScriptを使って制御する。
ブレイクポイント
GoogleAnalyticsのレポートを利用して、最適なブレイクポイントが設定できているかを確認する。
Web戦略でお困りではないですか？
自然流入を増やしたい…
もっと問い合わせ、売り上げを増やしたい…
15年以上SEOサービスを提供してきたアイオイクスが、貴社の課題を解決するコンサルティングサービスを提供いたします。
