ディップ Advent Calendar の7日目です。
こんにちは、ディップ株式会社メディア推進部きくちと申します。
社内運営サイトのSEOを担当しています。
SEOはただ純粋な順位上げのための概念と語られる事が多いのですが、現在ではユーザーへのアプローチを考える上で活用される概念であり、その考えはサイト設計等に大きく影響するようになりました。
そのため今回、弊社で面白い取り組み（このカレンダーです！）をすると小耳に挟んだので、こっそりお邪魔してみました。
はじめに
MFIによりモバイルフレンドリーが以前よりもさらに重要になりました。
今回はGoogleが提唱するモバイルサイトについての内容がいろいろなページに分かれて記載されているため、内容を一つにまとめてみました。
モバイルフレンドリーの重要事項
- モバイル用にページを設定したことを Google に知らせる
- リソースをクロール可能な状態にしておく
- モバイル ユーザーが不便を感じるようなよくある誤りを避ける。
参照：モバイルSEO
留意すべきチェックポイント
リダイレクト設定
インタースティシャル
表示速度を改善
ビューポートを正しく設定
読みやすいフォントサイズの設定
タップ要素の配置調整
JavaScript、CSS、画像のファイルのブロック
再生できないコンテンツ
不適切な相互リンク
詳細
実際の設定・設計について記載します。
リダイレクト設定
PCとスマホページはリダイレクトでもちゃんと連動させる必要があります。
PC用 URL にアクセスしたモバイル ユーザーを、該当するモバイル用 URL にリダイレクトする必要があります。
- 一括で同じページにリダイレクト設定になっていないか
- 携帯端末によって違うリダイレクトの動きをしていないか
- リダイレクト先が404になっていないか (参照：モバイルのみの 404 エラー)
等、正しく設定されているかの確認が必要です。
スマートフォン向けページが無い場合
サイトのページに対応するスマートフォン用ページがない場合は、そのままパソコン用ページを表示します。
参照：おすすめの対処法
「GoogleBot」クローラー設定
スマートフォンページに対し、Googleクローラもアクセスできる設定が必要。
ユーザーとクローラーが同じ動きをするような設定が必要。
（Googlebotをうっかりはじいてしまわないように要注意）
チェック方法
GoogleSerchConsole
サイトを確認済みであれば、メッセージ センターで通知を受け取れます。
参照：おすすめの対処法
クロールエラーレポート
[スマートフォン] タブに、スマートフォンにのみ 404 エラーを返すことが検出された URL の一覧が表示されます。
参照：おすすめの対処法
インタースティシャルを回避する
画面全部覆う広告はユーザビリティを阻害すると考えられています。
インタースティシャルを回避する
インタースティシャルは、ウェブサイトのネイティブ アプリの宣伝や、メーリング リストの登録フォーム、広告としてモバイル端末上によく表示されますが、ユーザー エクスペリエンスを損ねるおそれがあります。
(中略）
モバイル端末の画面領域は限られているので、インタースティシャルはユーザーの利便性を低下させます。
インタースティシャルの影響について
Google では、モバイル検索時のユーザー体験をさらに高めるため、ユーザーがモバイル検索結果からページに遷移した際、すぐにコンテンツにアクセスできないようなページを、2017年1月10日より、これまでよりも低く掲載する可能性があります。
「モバイル検索結果」を「これまでよりも低く掲載する可能性」があります。
モバイル検索結果順位への影響が発生すると理解できる文章のため、留意が必要です。
対処法
モバイルページからアプリダウンロードを促す際、留意したい点をまとめました。
ブラウザでサポートされるバナーを使用する
モバイルサイトからアプリダウンロードを促す際には、下記2点のバナーが推奨されています。
safari：スマートアプリバナー
chorome：ネイティブアプリバナー
小型広告を使う
一般的な小型広告と同様に HTML バナーや画像を使い、アプリストアの適切なダウンロード ページへのリンクを設定します。
App Indexing(Androidアプリ）実装
アプリ内のコンテンツが特定の検索キーワードに関連していると、検索結果にインストール ボタンが表示されるため、ユーザーはアプリをダウンロードして、アプリ内の特定のページにアクセスできます。
参照：インタースティシャルを回避する
煩わしいインタースティシャルが表示されるページは、すぐにコンテンツにアクセスできるページに比べユーザー エクスペリエンスが低くなります。
アプリダウンロード以外で掲載する場合の留意点
モバイルページ内にバナーやインタースティシャルを掲載するのはアプリダウンロードに限った事ではありません。
インタースティシャルの使用が可能な例
一方、正しく使うことで、新しいランキング要素の影響を受けない手法についても例を挙げておきます。
- 法律上の必要性に基づいて表示されているように見えるインタースティシャル（Cookie の使用、年齢確認など）。
- 一般公開されていないコンテンツ（そのためインデックス登録ができない）を有するサイトが表示するログイン ダイアログ。たとえば、メール サービスのように個人的なコンテンツが含まれる、有料のコンテンツであるためインデックス登録できない、などの場合が考えられます。
- 画面スペースから見て妥当な大きさで、簡単に閉じることのできるバナー。ここで言う妥当な大きさとは、たとえば Safari や Chrome に表示されるアプリ インストール バナー程度の大きさです。
インタースティシャルの全てが悪ではないというのが、Googleの見解です。
インタースティシャルも、バナー掲載も、使用用途を考えて使い分ける事が重要です。
表示速度を改善する
モバイルサイトが速やかに読み込まれるようにすることが非常に重要です。コンテンツが表示されるまでに長い時間がかかると、ユーザーの不満が増すおそれがあります。
計測ツール
GooglePageSpeedInsights
※PageSpeed Insightsはモバイル フレンドリー テストに統合されます
特に「速度」の欄を調べ、ページ表示速度の原因となる問題を探します。
「修正が必要」と指摘された問題について解決が必要です。
詳細については以下をご覧ください。
Make your mobile pages render in under one second
モバイル高速化：パフォーマンスの最適化
モバイル向け最適化
ビューポートを正しく設定する
ページの幅やさまざまな端末での拡大縮小を制御するため、設定が必要です。
ビューポートがない場合、携帯端末は一般的なデスクトップ画面の幅でページをレンダリングします。
参照：ビューポートを設定する
推奨方法
下記内容をmeta内に記載。
<meta name=viewport content="width=device-width, initial-scale=1">
参照：ビューポートを設定する
未設定ページ表示（携帯端末上の PC ページ）
800～1024 CSS ピクセルの代替幅でレンダリングします。
ページがディスプレイに収まるようにページのスケール係数が調整されるため、ユーザーはそのページを操作する前にズームする必要があります。
参照：ビューポートを設定する
レスポンシブルビューポート
メタデータ ビューポート値：width=device-width
デバイス非依存ピクセル単位の画面の幅に合わせるようにページに指示します。さまざまな画面サイズに合わせてページのコンテンツをリフローできるようになります。
参照：ビューポートを設定する
属性：initial-scale=1
画面の向きにかかわらず CSS ピクセルとデバイス非依存ピクセルを 1 対 1 の関係に保つようブラウザに指示するため、ページで横向きの幅全体を利用できるようになります。
参照：ビューポートを設定する
注意点
メタ ビューポート タグは広くサポートされていますが、正式な標準の一部ではありません。
この動作は CSS Device Adaptation仕様の一部として CSS に含まれます。
参照：ビューポートを設定する
読みやすいフォントサイズの設定
スマホ画面でも見やすいように適切なサイズが指定されています。
ビューポートがフォントの縮小拡大に影響を与えるため、設定は必須です。
必要な4つの設定
- 16CSS ピクセルの基本フォントサイズを使用。使用するフォントのプロパティに基づき必要に応じてサイズを調整。
- 基本サイズに対相対的なサイズを使いフォントの拡大縮小を定義。
- テキスト文字間に縦方向のスペースが必要なので、フォントごとに調整する必要がある場合がある。ブラウザのデフォルトの行の高さ 1.2 emがおすすめ。
- 使用されるフォント数と拡大縮小を制限する。フォントの種類やサイズが多すぎると乱雑で複雑すぎるページレイアウトになります。
タップ要素の配置調整
指でタップした際に違うリンクを同時にクリックしてしまわないよう、適切な配置を行う事を求められています。
重要なリンクのサイズ
- タッチターゲットの高さと幅を 48CSS ピクセル以上
- 7 ミリ未満の場合は周囲に十分なスペースを確保
参照：タップ ターゲットのサイズを適切に調整する
参照：Android UI のガイドラインで推奨されるタップ ターゲット
※ビューポートが正しく設定されている場合
使用頻度が低いリンク
- 推奨サイズの 7 ミリより小さくしてもかまいません。
- 水平方向と垂直方向で 5 ミリ（32 CSS ピクセル）以内に他のタップ ターゲットを配置しない
JavaScript、CSS、画像のファイルのブロック
推奨設定
JavaScript ファイル、CSS ファイル、画像ファイルへのアクセスを、必ず Googlebot に許可してください。
適切に設定しない場合
コンテンツのレンダリングとインデックス登録を行う Google のアルゴリズムの動作を直接阻害することになります。結果としてランキングが最適化されない可能性があります。
おすすめ対処法
- Google Search Console の「Fetch as Google」機能を使って、Googlebot が JavaScript ファイル、CSS ファイル、および画像ファイルをクロールできるかどうかを確認します。
- Google Search Console で robots.txt をテストして確認します。
- モバイル フレンドリー テストでモバイルページをテストし、モバイル ユーザーが利用できるサイトとしてそのサイトが Google システムで検出されるかどうかを確かめます。
- モバイルページ用に別の URL を使用している場合は、必ずモバイル用とパソコン用の両方の URL をテストして、リダイレクトが認識されクロール可能かどうかを確認します。
参照：おすすめの対処法
再生できないコンテンツ
たとえば、ライセンスの制約があるメディアの場合や、モバイル端末であまりサポートされていない Flash などのプレーヤーを必要とする場合などです。
サポートされていない形式のコンテンツを提供したりするのではなく、HTML5 標準タグを使用して動画やアニメーションを掲載することをおすすめします。
参照：おすすめの対処法
おすすめの対処法
- アニメーションに HTML5 標準を使用して、すべてのユーザーが快適に利用できるようにします。
- すべてのデバイスで再生できる動画の埋め込みを使用します。
- 動画の字幕を利用できるようにすることをおすすめします。字幕を利用できるようにすると、閲覧のユーザー補助技術を使用している人や、独自の動画形式を再生できないブラウザを使用している人が、サイトを利用できるようになります。
参照：おすすめの対処法
動画掲載の細かい内容についてはWeb Fundamentals-動画をご確認ください。
不適切な相互リンク
よくある誤りは、無関係のページにリンクを設定してしまうことです。
たとえば、モバイル向けのページからパソコンサイトのホームページにリンクを設定するようなケースです。
おすすめの対処法
リンクを確認して、対応する正しいページがリンク先となるようにします。
各種CMSカスタマイズ
各種CMSを使用しカスタマイズする場合は、下記ページを参照下さい。
最終確認
モバイルフレンドリーテスト
サイトのページが既にモバイル フレンドリーかどうかを確認
モバイルユーザビリティテスト
サイト上の潜在的なモバイル関連の問題を修正
今後の注意点
2016年11月4日、モバイルページを優先してインデックスする試みを行っているとの記載がありました。
Mobile-first Indexing
モバイル ファースト インデックスに向けて
ユーザーにとってさらに価値ある検索結果を提供するために、Google ではモバイル ファーストのインデックス登録に向けた実験を開始しています。
将来的に Google のアルゴリズムはモバイル版のコンテンツを主に使用するようになります。
つまり、ページのランキングを決定したり、構造化データを理解したり、検索結果にスニペットを表示する際も、モバイル版のコンテンツが使用されるようになります。
今後数カ月にわたって小規模の実験を入念に行い、素晴らしいユーザー体験を提供していると自信をもって判断した時点でより広範囲にわたって変更を反映していきます。
現状は一部範囲においてのテスト段階であり、実装内容や時期は未定です。
今後の発表が楽しみですね！
最後に
SEOに関連する内容は俗人的な知見に溢れる世界であるため、敢えて今回はモバイルフレンドリーという話題に振り切ったこともあり、Google引用を多用しました。ご了承ください。
SEOで大事な事は研究が進み、先人たちの文献やネット上からでも簡単に基礎が学べる時代になりました。
その中で何が正しい情報なのか、何がサイト構築に必要な情報なのかを自分で判断し組み込む必要があります。
SEOを単純な「順位上げの手法」として考える時代は終わりました。
今SEOを手掛ける人たちは「ユーザーが欲している内容に対し、いかに的確にアプローチできるか。そしてそれがユーザーにとっての良い情報と成り得るのか」を意識して、全体のアプローチを考える事が必要と思います。