【チェックリスト】MFIに向けてやるべきこと:SMX West 2018レポート

今年に入ってGoogleは、モバイルファーストインデックスに関するアナウンスを度々行っています。いよいよ到来するMFI…読者の皆さまはMFIに向けて準備をされていますでしょうか?別URL、ダイナミックサービング、レスポンシブなど、モバイルとデスクトップのサイト構成によってMFIの対策は異なります。まだこれからという方は、本記事でご紹介するLeslie氏のセッションの内容を基にチェックしてみてください。–SEO Japan

SEO For Google's Mobile-First Index & Mobile-Friendly World

スピーカー
Leslie To氏 3Q Digital SEOディレクター
Cindy Krum氏 MobileMoxie CEO
※Cindy氏のセッションは次回の記事でご紹介します。

モデレーター
Barry Schwartz氏 SearchEngineLand、RustyBrick

モバイル:やるなら今しかない(Leslie To氏)

Lislie To氏
スピーカー Leslie To氏

サイト構成に関わらず重要な要素

Things That Matter Regardless of Mobile Configuration
※重要要素には「○」

アクセシビリティ

  • リッチメディア
  • インタースティシャル ○
  • サイトナビゲーション

UX

  • スケーリング ○
  • テキストサイズ ○
  • タップターゲット、padding ○
  • ジェスチャー
  • サイト内検索
  • キーワードとタイピング
  • コンバージョンフレンドリー ○

サイトスピード

  • ページスピード

コンテンツ

  • 可読性スコア

クロールステータス

  • ログファイル解析

リッチメディア

HTML5を活用してビデオや、リッチコンテンツを提供する。サイト上で、ビデオをロード、デコード、再生させる。Flash等サポートされていない形式の使用はしない方がよい。

インタースティシャル

コンバージョンのためにフルスクリーンでインタースティシャル広告を表示させるのは、著しくUXを損なう。これはまだ良いケースで、最悪の場合Googleはインタースティシャルの裏にあるコンテンツを何も見てくれない可能性もある。バナーを活用した方がよい。

サイトナビゲーション

よくデスクトップ版サイトをタブレット版サイトに、そしてモバイル版サイトに中身を引き継いでいくケースがあるが、モバイルはデスクトップよりも表示領域が小さいので、多すぎる選択肢はユーザーを困惑させてしまう。Google Analyticsなどで、「サイト内検索」を見て、デスクトップよりもモバイルの方がサイト検索が多いのであれば、ナビゲーションに手直しが必要な可能性がある。
Site Navigability
※ページ右側のサイトでは、カテゴリーページに辿りつくまでに3クリックも要した

スケーリング

縦画面、横画面ともにデバイスの画面サイズに、コンテンツとメディアがスケールするようにすること。CSSで絶対値を使って大きさを指定したり、スケールした際に粗さが目立つような低画質な画像は使わないこと。
スケーリング

テキストサイズ

viewportの範囲でスケールするようにする。16pxをベースのフォントサイズとして必要に応じてスケールさせるように。ユーザーに無為にズームさせないように。

タップターゲット

  • タップターゲットの幅を最低でも48px以上に
  • タップターゲットの周りは少なくとも32pxは離す
  • ボタンをタップするためにズームさせない

タップターゲット

ジェスチャー

特にEコマースサイトなどでは、つまむ、ダブルタップなどの一般的なジェスチャーを使えるようにすること。ズームされた時に、粗さが目立つような低画質画像を使用しない。

サイト検索

コンテンツを探しやすくするために、サイト検索をできるようにする。必要に応じてサイト検索で使われている言葉をサイトナビゲーションへ追加する。多くのユーザーがサイト検索が無いと探せないほどに、コンテンツを深い階層に埋め込むのは良くない。

キーボードとタイピング

入力する内容に合わせてキーボードを変更する(URL、Email、数字)クレジットカードの情報などを入力する際に、様々なキーボードを行き来させるのはやめた方が良い。

コンバージョンフレンドリネス

フォーム入力であろうと、電話であろうと、購入であろうと、コンバージョンを簡単にした方がよい。またコンバージョンしようとしてから、ユーザーに3クリック以上させるのはやめた方がよい。

ページスピード

Googleはモバイルページスピードをランキングファクターにするようだが、ランキングに関わらずユーザーのためには配慮すべきである。

コンテンツの可読性

コンテンツ内で複雑な表現は極力避けた方が良い。「新奇性」が高く「難易度」が低いコンテンツはシェアされやすい。
Highly Sharable Contents

ログファイル解析

ScreamingFrog、botify、Deepcrawlなどのツールを使ってログファイルを解析し、GoogleBot Smartphoneがクロールしているかを確認するとよい。

Check Log Files for Evidence of Increased Crawling from Googlebot Smartphone

別々のURLの場合の重要要素

デスクトップとモバイルで個別のページを持っている場合、やるべきことは多い。
別URLのチェックリスト

URLとコンテンツ

  • モバイルからデスクトップ版への<link>属性 ○
  • Hreflangリンク ○
  • 重複コンテンツ
  • クロスリンク
  • URL構造

リダイレクト

  • 自動リダイレクト ○
  • 同等のURL間でのリダイレクト ○
  • リダイレクトに反してのページ移動 ○

クロールエラー

  • モバイルのみ404
  • モバイル404トラッピングページ

サーバー

  • クロール率の増加のためのサーバーのキャパシティ ○

双方向の<link>属性

双方向<link>属性
canonicalを設置して、重複コンテンツを回避する。

Hreflangリンク

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のレポートを利用して、最適なブレイクポイントが設定できているかを確認する。
ブレイクポイント


今年の4月を皮切りに本格的にMFIへの移行が行われることをGoogleのゲイリー氏は発言しましたが、いまのうちにモバイル対策の見直しを行っておくことが移行への一番の備えとなるでしょう。– SEO Japan

Web戦略でお困りではないですか?

自然流入を増やしたい…
もっと問い合わせ、売り上げを増やしたい…
15年以上SEOサービスを提供してきたアイオイクスが、貴社の課題を解決するコンサルティングサービスを提供いたします。

SEOサービスについてはこちら

お問い合わせフォームへ
03-6408-287010:00 – 19:00 (土・日・祝日除く)

投稿者:

SEO Japan

002年開設、アイオイクスによる日本初のSEOポータル。SEOに関する最新情報記事を多数配信。SEOサービスはもちろん、高機能LPOツール&コンサルティング、次世代SEOに欠かせないインフォグラフィックを活用したコンテンツマーケティング等も提供。 SEOブログながら、ウェブマーケ全般。アドテク、ソーシャル、スタートアップ、インフォグラフィック等。