モバイルフレンドリーって？ワードプレスサイトをモバイル化
SEOのセミナーを受けたところ、
モバイルフレンドリーという言葉が入ってきました。
モバイルユーザーにとって使いやすいサイトではないと判断されると、
グーグルさんからお達しが来ます。
また、2015年4月にモバイル対応していないサイトは、
検索結果の順位を下げられるという発表もあった模様。
SEOでアフィリエイトしている人にとっては大問題です！
そこで今回はアフィリエイトやサイト運営者向けのネタです。
私の場合はどう対応したかの実録を記しておきます。
ワードプレスやTwentyTwelveでサイト作っている人の参考になれば幸いです。
- 参考データ（前提条件）
- 10サイトほどをワードプレスのTwentyTwelveをカスタマイズしてサイト作成
- 1サイトがこちらのブログ、他サイトは問題なかった
- TwentyTwelveはモバイル対応しているはず
モバイルユーザビリティ上の問題が検出されました
ウェブマスターツールに復数の運営サイトとこちらのブログを登録しているのですが、
なぜかこのブログにだけ、ツール上に警告が来ました。
こんな感じのエラー…
モバイルユーザビリティ上の問題が検出されました
そしてこのエラーの最後には、
「モバイルユーザーに優しくない（=モバイルフレンドリーでない）」
原因が書かれています。私は幸いなことに一つでした。
タップ要素同士が近すぎます
モバイルユーザーの場合は、
復数リンク間の距離が近いと押し間違えするから
リンク間の距離を開けるなど工夫をするべき…
みたいな内容が明記されていました。
グーグルのいうところのモバイルユーザーとは
いわゆるスマートフォンユーザーのことかと。
スマホユーザー、確かに増えていますものね。
けれど同じようなサイトの作り方しているのに、
なぜこのブログだけ…？
使っているワードプレスのテーマTwentyTwelveは、
モバイル対応してくれているし…
一つ思い当たる節があるとすれば、
このブログだけサイトの横幅を元々の960pxから広げていました。
この辺が悪さをしているのではないか？と考えました。
モバイルユーザビリティに対応していないサイトは検索順位が下がるらしい
そんな時にたまたま…とあるASPさんが内々で行っている
SEOセミナーに参加させてもらったのでした。
セミナーの途中にモバイル対応のことが出てきて、
この事態は由々しき問題だと気付いたのです。
グーグルはモバイルユーザーにとって見やすいサイト作りの一環として、
2015年4月21日から、
モバイル対応できていないサイトの検索順位を下げると発表したそうです。
グーグルがモバイルフレンドリーに対応しているかどうかの
チェックサイトを設けているとのこと。
モバイルフレンドリーテストというサイトで確認できます。
ひとまず一通りのサイトをモバイルフレンドリーチェックしてみました。
それでもやはりモバイルフレンドリーではないのは、こちらのブログだけ…
他のサイトは問題ありませんでした。
タップ要素はどのサイトも基本的には変わらないのに…
モバイルフレンドリー合格の他サイトのiphone表示例↓
ワードプレス（TwentyTwelve)のモバイルユーザビリティ解決法
「グーグル421事変（勝手に命名…）を知ったため、
これは何とかしなくてはと危機感。
ひとまずはTwentyTwelveがデフォルトとしている、横幅960pxに戻してみました。
iphone6でモバイルの見え方チェック。
すると全体的にモバイル対応らしくなったのですが、
728pxのアドセンスバナー広告がどうしても
横幅を押し込めて見づらい状態になっていました。
非エラーサイトではありますが…
アドセンスの300pxのバナーを2つ横に並べる広告も同じように、
モバイルで見た時に違和感を感じさせます。
こんな感じで何か汚い…
もうモバイルユーザーのために広告取っ払ってみました！
横並び広告は、はみ出る右側の方を削除。
横幅の広い広告はモバイル用の広告に入れ替えました。
すると、広告はみ出しで微妙だったサイトが、モバイル画面に収まりました！
収益は若干減ってしまったけれど、
他のプログラムで取り戻そうってことで割りきり。
逆に今まで見にくいサイトを作っててごめんなさい…と心から詫びました。
こちらのブログもスマホでだいぶ見やすくなったのでは？と思います。
最後にタップ要素対応。
CSSを修正して、できるものからリンク間の距離を開けてみました。
そしたら…モバイルフレンドリーテスト合格！！
これで検索順位の変動に怯えずに4月を迎えられそうです。
WPでモバイルフレンドリー警告が出た時の対処法まとめ
- 「モバイルフレンドリーテスト」を復数サイトでそれぞれチェックする
- モバイルフレンドリー不合格サイトの特徴を判断する（横幅、リンクなど）
- モバイル（スマホ）でサイトを見てみて直すべきことから直して合格させる
1.はエラーが出たブログだけが、横幅を大幅に広げていたことで
優先的に解決する方法が判明しました。
ウェブマスターツールにエラーが出た場合は、
その警告を読んで対応していくしかないですね。
警告も色々な種類があって、色々なサイト運営者やブロガーさんが
具体的な解決方法を記事にしてくれています。解決方法もひたすら検索…
またモバイルフレンドリーテストに合格しても、自分のスマホから自分のサイトを見てみる。
で、直すべきところは直しておくのが大事だなーと感じたのでした。
※2016年4月追記
以前はワードプレスのTwentyTwelveを使い当ブログを書いていました。
その後2016年より、
Simplicity（シンプリシティ）という無料テンプレートを使い
ブログを作り直しました。
シンプリシティはモバイルフレンドリー合格できています！
著者情報
OL向け不動産投資アドバイザー 南 エリナ
プロフィールや実績など詳しく見てみる
