MFI（モバイルファーストインデックス）対応って結局なにすればいいんだろうな人へ

# はじめに
[Livesense not engineers Advent Calendar 2018](https://qiita.com/advent-calendar/2018/livesense-not-engineers) 23日目の担当 [mutopan](https://qiita.com/mutopan) です。

これまでSEO周りをメインに携わり、リブセンスの [マッハバイト](https://j-sen.jp/) で、現在は広告運用を担当しております。

# モバイルファーストインデックス（MFI）
**Mobile First Index（モバイルファーストインデックス）**
このワードに今年触れた人はそれなりにいるのではないでしょうか。

ちょうど去年の今頃くらいに「MFIがそろそろ本格稼働するぽいよ～」という情報を聞きつけたものの、
「とは言っても、何がどうなんの？そもそも何すればいいの？」と上がった噂と、はっきりしない情報に振り回されっぱなしでした。

私も漠然と、MFI対応だ！と考えつつも「じゃあ何を？」と尋ねられると「…なんでしょうね」ってうまく答えられない状態でいたのですが、
ちょうど良く調査の仕事が自分のもとに舞い込んできました。

# 実際いまはどうなんだろ
2018年12月時点でのGoogleさんの発表によると、徐々にMFIに移行しており、その数は世界中の検索結果の半数だそうです。
[Mobile-First indexing, structured data, images, and your site](https://webmasters.googleblog.com/2018/12/mobile-first-indexing-structured-data.html)

半数切り替わったものの、まだ半数は切り替わりできていないわけです。
ですので、今回はまだ切り替わっていないサイトの管理者で「何したらいいのか分からん！」って人がいたとして、運良くこの記事にたどり着くことになれば良いなと思うし、自分の振り返りとして今回はMFI対応として私がしたことをつらつらと書きたいと思います。

#なにしたんだっけ

MFI対応として、したことは大きく４つに分かれます。

+ そもそもMFIの対応をすべきサイトなのか？をまずは確かめる
+ MFI対応の完了状態を決める
+ 理想の状態を決めたら、自社サイトをひたすら調べまくる
+ 現状を把握したら、何をすれば理想の状態になるかをまとめる

## そもそもMFIの対応をすべきサイトなのか？をまずは確かめる
当たり前なんですが、そもそもしなくていいサイトもいっぱいあります。

### MFI対応しなくていいサイト
+ パソコン向けページがない
+ デバイス別でページの出し分けをしていない
+ コンテンツもリンクもサイト構造も何もかも同じ

### MFI対応したほうがいいサイト
+ パソコン向けページと、スマホ向けページでそれぞれ別にURLが用意されている
+ パソコン向けページと、スマホ向けページで見えているコンテンツやリンクが異なる
+ なんかわからんが不安

つまりパソコンと、スマホで乖離がまったくない状態のサイトであれば、やる必要もなく、
ただじっと移行されるのを待てばいいのです。
切り替わった所で、何も変わらない（問題ない）ので。

## MFI対応の完了状態を決める

では、パソコンとスマホで何かしらのサイト差分がある、もしくはその可能性がある場合、
闇雲に調べにいくのは無茶があるので、完了定義をきめましょう。

MFI対応とは何がどうあればいいのか、理想の状態をポイントごとに定義すると良いです。

### ポイント大分類
+ URL
+ テキスト
+ リンク
+ サイト構造
+ 画像
+ テンプレート（サイトデザイン周りのことですね）
+ サイトスピード

重要なポイントとしては上記かなと思います。

#### ポイント中分類（URL編）
+ 両デバイスにURLが用意されている、または同一のURLで運用している

パソコン用と、スマホ用でURLを出し分けているサイトもあると思います。
例（パソコンは https://aaa.com/ スマホは https://aaa.com/sp/ とか）
また、パソコン用にはページがあるけど、スマホ用ページは用意していないとか。

前者は今後のチェックポイントで差分がなければ問題なし、
後者は用意してあげると色んな意味で親切かと思います。

デバイス（端末）でURLを出し分けず、同一のURLで運用していれば、この点は気にしないで良いです。

#### ポイント中分類（テキスト編）
+ 量・内容が同一（含有率など）
+ 同じ順番でテキストが表示されている

URLのチェックポイントはクリアしたとします。
ですが、これ以降はそれなりに該当するサイトはあると思います。

まずテキスト量（内容）がデバイスによって異なるパターン。
パソコンではテキストがっつり、スマホでアクセスした場合はテキストが一部表示されていない、となると
MFI移行した場合、スマホにはないテキストについては評価の範囲ではなくなる可能性があります。

ユーザーさんにとって必要なテキストであれば、スマホにも移行してあげましょう。
（いるいらの判断はここでして良いと思います）

#### ポイント中分類（リンク編）
+ 同一ロジックのリンクが表示されている
+ リンクの配置に差異がない（同じ重要度で繋がれている）

リンクがみなさん悩ましいポイントかと思います。
はっきり断言できないので、難しい所ではありますがまずは「デバイス別で配置されている遷移リンクに差分がないか」を見ておきましょう。

同一ロジックのリンクが表示されているかについては、稀にパソコンとスマホページで導線が異なっていたりすることがあります。
この場合、デバイスによってサイト構造も異なることに繋がるので、しっかり見ておく必要があります。
所感ですが、EC系サイトにこの傾向がちらほらあったかなと思います（カテゴリーいっぱいあって大変ですよね）

リンクの配置、重要度が同じであるかは、パンくずなど内部リンクが主な対象です。
パソコンではあるリンクが、スマホでは置いてない、もしくはユーザーさんにとって使われにくい場所に配置されている場合は、設置そのものや、配置位置を再検討してみると良いです。

私個人としては、こういった評価もMFIによって変わってくるし、すでに変わりつつあると思っているので
はじめはパソコンにあわせた思考をしつつも、スマホページとして最適な位置に張ることが大事だと考えています。
（位置に固執しないってことですね。ユーザーさんによって使いやすいか否かが重要）

#### ポイント中分類（サイト構造編）
+ パソコンとスマホで同じページ導線が用意されている

リンク編と似た話となりますが、デバイスごとに異なるページ導線が用意されているのであれば
当然サイト構造もデバイスごとに異なることになります。
なぜ異なる導線が用意されているのか、また揃える必要がないのかを見ておきます。

#### ポイント中分類（画像編）
+ 設置されている画像が同じ
+ Altタグがついている

これもテキストやリンクと同じで、デバイスごとに表示内容に違いがあるのであれば、
どちらが最適かジャッジしてみましょう。
MFI関係なく、Altの対応も大切です。
今では画像もしっかり評価の中でも大事な位置づけなので、ちゃんとチェック、対応をしておきましょう。

#### ポイント中分類（テンプレート編）
+ 見出しが必要な要素に設定されている
+ JavaScriptやAjaxを使っている場合、レンダリングできる

これも、ちらほらデバイスごとでページ内コンテンツに差分があるサイトによく見られたのですが、
コンテンツ差分や配置が異なることによって、見出しの設定がバラバラになっていることがありました。
意図したものであれば問題ありません。
（hタグは厳密じゃなくていいとは言われているものの、強弱などは一定大事だと思います）

JavaScriptやAjaxについては、現時点でもちゃんと読み込み（Googleが認識できるもの）であれば問題ないと考えます。
動的に生成されるものは読み込まれない（認識されない）ので気をつけましょう。
スマホページでのみ、利用しているJavaScriptがあれば、チェックしておくと良いです。

#### ポイント中分類（サイトスピード編）
+ 現在の評価が悪くない

ページの表示速度も大事です。
確認方法としては、Googleが提供しているPageSpeed InsightsとGoogle Analyticsの２つがあります。

##### PageSpeed Insights
[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/?hl=ja)
ここで気になるページを見てみましょう。

##### Google Analytics
すべてのページを見ていくのは大変なので、Google Analyticsのページ速度から
表示に時間がかかっているページを見つけて、PSIにかけてより詳しくみるのも良いと思います。

## 理想の状態を決めたら、自社サイトをひたすら調べまくる
あとはひたすら、サービスが理想の状態になっているのかを調べまくります。
めちゃくちゃしんどいですけど、がんばりましょう :sunglasses:

私は共有したりすることも考えて、Spreadsheetを使ってまとめていました。
実際に調べていたときのデータのごく一部のスクショです。
※なにか言われないようにぼかしときました。

![image1223.png](https://qiita-image-store.s3.amazonaws.com/0/214451/0e986b6c-331e-da41-b700-88edf6e990ae.png)

## 現状を把握したら、何をすれば理想の状態になるかをまとめる

現状が把握できたら、あとは「MFI対応の完了状態を決める」で定めた理想の状態と、
どのようなギャップがあるのかを比較して、差分を埋めるためにするべきことを考えます。

理想形を定めたので、さほど難しくないはずです。

例えば「スマホページではリンクがない！」という事が発見できれば、
そのリンクやコンテンツがなぜスマホページに置かれていないのか、背景の確認は別途すると尚良いと思います。
「（当時は）必要じゃなさそうと思ったから」というフワッとした理由であれば「今も不要なのか？」を再検討するべきですし、
「必要だ！」となければ、どこに設置するのが最適なのかを考えましょう。

迷ったら、とにかく色んなサイトをポイントごとに調べてみると良いと思います。
同業界、他業界限定せず眺めてみましょう。

あとは「ウェブマスターオフィスアワー」のyoutube動画をめっちゃ見るのもおすすめです。
[Google Webmasters](https://www.youtube.com/channel/UCWf2ZlNsCGDS89VBF_awNvA)
なにより公式の情報が一番信頼できますからね。
（私はこのチャンネルが好きで定期的に見返します）

# さいごに
振り返ると結構なしんどさのある調査だった気がしますが、
一回やってみると、他のサイトをみる時に今回のポイントをサッと意識しながら眺めるようなりましたし
聞かれたことに対しても、昔より悩まずに答えられるようになったと思います。

MFIに限らず、色んなサイトの調査や比較においても使えると思うので良ければ参考にしてください！