荷物持ちでも構わない

文系大学4年生からデータサイエンティストを目指して頑張りつつ、書きたいことを書きたいときに書きたいだけ書く、ルール無用雑記ブログ。

MENU

MFIって何?はてなブログをモバイルフレンドリーにする簡単SEO対策

今回は、めっしゃさんによるSEO対策講座シリーズ第4弾。

第3回の前回で「SEO対策記事シリーズは第3回の今回で一旦終了ということにする」と書いておきながら、舌の根の乾かぬ内に第4回目を書いてしまったが、他にネタがなかったので大目に見てほしい。

で、そんな第4回目は何の話をするのかというと、

モバイルファーストインデックス(MFI)についての話をする。

モバイルファーストインデックスとは何かという話から、はてなブログで出来る簡単な対策までをまとめてみるので、はてなブログユーザーでSEO対策を考えている人はぜひとも参考にしてほしい。

僕はHTMLやCSSやJavaScriptが書けないので、僕と同じくこれらが書けない人でもできる対策のみ触れていく予定。

というわけで本題へどうぞ。

モバイルファーストインデックス(MFI)とは?

モバイルファーストインデックスとは何かというと、Googleが2018年3月から始めた、「ページの評価対象をPC用ページからモバイル用ページへ軸足を移すこと*1のことである。

パソコンよりもスマホでネットを利用する人が多くなった現在、PC用ページよりもモバイル用ページの方を重視して検索結果の掲載順位に反映しよう、というまさに「モバイルファースト」な考え方ということ。

具体的に言うと、「モバイルフレンドリーなページはモバイルフレンドリーでないページよりも高く評価して検索結果の上位に表示しますよ」ということ。

さらに言うと、AMP(Accelerated Mobile Pages)という、モバイル向けに最適化されたページは、Googleの検索結果の一番上に特別枠が用意され、ユーザーの目に留まりやすくなる

AMPについても詳しくは後述する。

要は、これからのSEO対策は、PC用ページよりもモバイル用ページを優先して考えないといけないということである。

モバイルファーストインデックス(MFI)のためのはてなブログで出来るSEO対策

そんなモバイルファーストインデックスだが、さすがブログサービス大手のはてなブログ、ちゃんと簡単に対策ができるようになっている。

というわけで、はてなブログで簡単にできる、モバイルファーストインデックスのためのSEO対策方法をいくつか紹介する。

1.レスポンシブデザイン対応のテーマを使う

まず第一に、レスポンシブデザイン対応のテーマを使うことが大切。

レスポンシブデザインとは何かというと、PCで見たときとタブレット・スマホで見たときとで、デザインを自動的に調整し、画面サイズに合ったレイアウトでページを表示してくれる機能のこと。

これに対応しているテーマを選ぶことで、どのデバイスから見ても、デザインに統一性がうまれ、かつ見やすいレイアウトにすることができる。

そのため、はてなブログでテーマを選ぶときは、なるべくレスポンシブデザイン対応のテーマを選ぶようにしよう。

テーマストアでテーマを探すときも、人気のテーマはレスポンシブデザイン対応になっていることが多い。

ちなみに僕が使っているのは、はてなブログのテーマストアで人気ナンバーワンのMinimalismというテーマ。

f:id:messyer813:20181019195827p:plain

HTMLやCSSが書けないと言いつつも、コードをコピペして結構自分好みにカスタマイズしているので、原型からかけ離れてはいるが、ベースとなっているのはMinimalismである。

非常にシンプルかつ見やすいデザインで、シンプルゆえにカスタマイズ性も高く、それでいてレスポンシブデザイン対応なので、人気ナンバーワンだけあって使いやすいテーマだと思う。

テーマで迷ったらとりあえずこれにしておけば問題ない。

 

しかし、レスポンシブデザイン対応のテーマを選べば勝手にレスポンシブデザインに対応してくれるのかというとそうではなく、ちゃんとレスポンシブデザイン対応になるように設定してやらねばならない。

具体的には、管理画面から、「デザイン」→「スマートフォン」→「詳細設定」より、

「レスポンシブデザイン」にチェックを入れてやればよい。

f:id:messyer813:20181019200302p:plain

これだけの操作で、レスポンシブデザイン対応のブログにすることができる。

モバイルファーストなウェブサイトにするためのモバイル用ページの作り方はレスポンシブデザインだけに限らないが、Googleがレスポンシブデザインを推奨しているので、Googleからの評価が高くかつ簡単に実装できるレスポンシブデザインでモバイル用ページを作るのが吉。

2.AMP(Accelerated Mobile Pages)に対応させる(はてなPro会員のみ)

2つ目に、AMP(Accelerated Mobile Pages)に対応させるという対策もある。

AMPというのは、スマホやタブレットでも高速でページを読み込めるように、HTMLやCSSを極限まで簡素化して、デザイン性を犠牲に読み込みの速さを手に入れる機能のこと。

これははてなブログの場合は有料のはてなPro会員にならないと使えない機能なのだが、はてなPro会員であれば、管理画面から、

「設定」→「詳細設定」→「ベータ版機能: Accelerated Mobile Pages (AMP) を配信する」

にチェックを入れてやればよい。

f:id:messyer813:20181019201651p:plain

 

AMP対応にするとどうデザインが変わるのかを比較するため、このブログで一番PVを稼いでいる統計検定2級の記事で、通常のモバイル用ページとAMP対応ページの画像を並べてみる。

f:id:messyer813:20181019201222j:plain
f:id:messyer813:20181019201229j:plain

左が通常のモバイル用ページ、右がAMP対応ページ。

こうして比較してみると、AMP対応ページはデザインがかなり簡素化され、通常のモバイル用ページでは設置してあるメニューバーが消えてなくなっている。

このように、余計なものを極力排除することで読み込みを速くしてスマホでも快適に見られるようにするのがAMPなのだ。

そして前述の通り、AMPページはGoogleの検索結果で特別扱いをしてもらうことができ、検索結果の一番上にAMP対応ページ用の枠が用意されている。

 

f:id:messyer813:20181019202324j:plain

Google検索でAMP対応ページを見ると、URLの左側に稲妻のマークがつき、AMP対応ページであることを知らせてくれる。

そして、このブログの統計検定2級の記事が掲載順位1位の座に居座り続けているのは、このAMP対応ページ用の特別枠のおかげによるところが大きい。

やってみないとわからないというか、やってみて順位が下がったら嫌なのでやらないが、たぶんこのブログがAMPに対応していなかったらこの記事も掲載順位1位にはなれていなかったと思う。

はてなブログのAMP対応はまだベータ版なので不具合などが起こる可能性もないではないが、はてなPro会員であれば簡単にAMP対応にできるし、掲載順位で優位になれる効果もあるので、はてなPro会員の人はぜひ自分のブログをAMP対応にするべきだと思う。

まとめ

モバイルファーストインデックス(MFI)について、はてなブログで簡単にできるSEO対策の方法を紹介した。

実はレスポンシブデザインであっても、リンクの距離が近かったり文字サイズが小さかったりするとGoogleからの評価が下がってしまうので、レスポンシブデザインであれば何でもいいという話ではないのだが、とりあえずレスポンシブデザインとAMPに対応していればGoogleからの評価はかなり高くなるはずだし、設定も簡単なのでやってみて損はないと思う。

そんなわけで、SEO対策記事第4回はここまで。続きは未定。

*1:西山悠太朗、小林睦『現場のプロから学ぶSEO技術バイブル』、マイナビ出版