モバイルファーストインデックスの概要

モバイルファーストインデックスは、Google ウェブマスターツール向け公式ブログにて投稿された2016年11月５日の記事にて正式に発表されました。

モバイルファーストインデックスの導入理由や時期

モバイルファーストインデックスの導入理由については先述したリンク先にも記載されておりますが、私の考察も含めてまとめたのが以下の内容です。

ここ数年、モバイル端末からの検索機会が増加し続けておりますが、これまでモバイル版で表示されているコンテンツをGoogleは評価せず、PC版のコンテンツのみで評価してきました。

これにより、モバイル版で良い検索体験を提供できていないページ（良いコンテンツがないページ）なのにもかかわらず、PC版での評価が良かったので上位表示されている、という問題が発生していたのです。

モバイルでの検索需要が増えているのであれば、モバイルで表示されているコンテンツを重要視して評価しないといけない。そう思うのは自然のことですよね。

これは、PC版とモバイル版で表示内容が大幅に異なるサイトが存在していることが、主な原因でしょう。

PC版とモバイル版で別のデザインを施しているサイト（URLが違うサイト）によく見られるのですが、PC版で表示されている主要コンテンツの一部を、回線速度の遅いモバイル版では非表示にしていることがあるのです。

レイアウト上での問題もあるため、やむなしに表示を切り替えているのかと。ただ、モバイル版のコンテンツ量がPC版よりも少ないので、良い検索体験を提供できないケースが生じてきます。

素晴らしい検索体験を提供することを使命としているGoogleとしては、これを問題と捉えて今回のモバイルファーストインデックスの導入を決定したようです。

モバイルファーストインデックスの導入時期については、現在のテスト中なので（2016年11月現在）その結果しだいで変わってきますが、最長で4ヶ月くらいはかかるとのこと。
遅くても2017年の春までには導入されるでしょう。

モバイルページでコンテンツを減らしているサイトに問題が発生する

モバイルファーストインデックスの導入が開始されると、PC版とモバイル版で情報量が違うサイトに影響が出てきます。特に、モバイル版のコンテンツ量を極端に減らしている場合は、かなり影響を受けることでしょう。

まぁ、これはGoogleからの評価という以前の問題でもありますがね。

PCとモバイルで情報量が違うサイトは、これから改善を施すことが必要となってくるのです。

逆に、以下のケースは問題にはならないようですので、合わせてご紹介しておきます。

• PC版とモバイル版のコンテンツは完全一致ではなくてもいい（多少の差異はOK）。
• レスポンシブデザインで、サイドバー部分を非表示にしていても特に問題はない。
• クリックしないと表示されないメニューがあっても、おそらく大丈夫（未確定）。
• ナビゲーションはPC版とモバイル版で違っていても問題はないが、リンク情報はサイトマップなどで知らせるようにしておく。
• コンテンツを隠して表示している場合でも、主要コンテンツでなければ大丈夫。
• モバイル環境で閲覧しやすく使いやすいUI（ハンバーガーメニューなど）についてはそのままで問題ない。
• canonicalやalternateは変更しなくても良い。
• 構造化データはそのままでいい（モバイルでも同様に出力されるように設定しておく）。

導入開始までは情報が確定していないので、現段階ではハッキリした内容は公開されていませんが、以上の内容は特に問題がないとのこと。

レスポンシブデザインで、PCでもモバイルでもコンテンツが同様のものを表示している、もしくは一部を非表示にしているが主要コンテンツは同じであるサイトは、問題ないようです。

モバイルファーストインデックスに向けた対策はレスポンシブデザイン

先述したように、レスポンシブデザインで表示を切り替えているサイトは特に何もすることはないと思われます。ただし、一部のコンテンツを非表示にしているサイトは、その要素の重要度を見極めて表示させるかどうかは検討しておいた方がいいです。

また、主要コンテンツの情報量が違うサイトは、PC版とモバイル版でページ情報量を同等のものにしておく作業が必要です。

もし可能であれば、同じコンテンツを表示させることができるレスポンシブデザインに変える方法がおすすめです。

主要コンテンツが充実しているページをベースとして、コンテンツの表示をCSSで最適化するだけですので、手間や予算もおさえることができます。

既存サイトをレスポンシブデザインにする方法

レスポンシブデザインでは、以下のようにブレイクポイント（表示している画面サイズ）毎にCSSでレイアウトを変更していきます。

.header {
	/* PC表示 */
｝
@media screen and (max-width: 991px){
	.header {
		/* タブレット表示 */
	｝
}
@media screen and (max-width: 767px){
	.header {
		/* スマートフォン表示 */
	｝
}

@media screen and (max-width: ○○○px)と、赤文字部分でブレイクポイントを切り替えております。今回は、画面横サイズが991px以下（タブレット）と、767px以下（スマートフォン）で設定。
これらに該当しない1〜3行目がPC表示となります。

ただし、さまざまな画面サイズのデバイスが登場しており、これがすべてではないので注意が必要です。

ブレイクポイントについては、以下の記事に詳しく紹介されておりますので、参考にしてみてください。

WordPressであれば、部分的にスマートフォン条件分岐も活用してレイアウトを切り替えるという方法もあります。

<?php if ( wp_is_mobile() ) : ?>
	// モバイルコンテンツ
<?php else: ?>
	// PCコンテンツ
<?php endif; ?>

また、タブレット表示をPC表示と同じにしたい場合には、以下の記事内で紹介している方法が便利です。

私の場合、ブレイクポイント毎にCSSで切り替えるか、スマートフォン条件分岐で切り替えるかは、コンテンツによって判断しております。コンテンツ内に表示させた写真はCSSで、ナビゲーションはスマートフォン条件分岐、といったように。

この判断は経験がないと難しいのですが、先にCSSで設定してみてうまく表示ができない場合は、スマートフォン条件分岐を利用するとスマートに設定できます。

モバイルファーストインデックスを意識したレスポンシブデザインが必須になる

これからは、モバイルファーストインデックスを意識したWebサイト制作が求められてきます。

しかし、レスポンシブデザインの対応ができていれば、さほど問題は出てこないでしょう。新たな知識は不要です。これまででも必要であった知識で対応できるのです。

逆に、モバイルを軽視していた人は急いで勉強をしなければいけないので、これを良い機会と捉えてレスポンシブデザインを導入することを早急に検討しましょう。