モバイルフレンドリーって?ワードプレスサイトをモバイル化

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. 「モバイルフレンドリーテスト」を復数サイトでそれぞれチェックする
  2. モバイルフレンドリー不合格サイトの特徴を判断する(横幅、リンクなど)
  3. モバイル(スマホ)でサイトを見てみて直すべきことから直して合格させる

1.はエラーが出たブログだけが、横幅を大幅に広げていたことで
優先的に解決する方法が判明しました。
ウェブマスターツールにエラーが出た場合は、
その警告を読んで対応していくしかないですね。
警告も色々な種類があって、色々なサイト運営者やブロガーさんが
具体的な解決方法を記事にしてくれています。解決方法もひたすら検索…

またモバイルフレンドリーテストに合格しても、自分のスマホから自分のサイトを見てみる。
で、直すべきところは直しておくのが大事だなーと感じたのでした。

※2016年4月追記
以前はワードプレスのTwentyTwelveを使い当ブログを書いていました。
その後2016年より、
Simplicity(シンプリシティ)という無料テンプレートを使い
ブログを作り直しました。

シンプリシティはモバイルフレンドリー合格できています!

お金について学ぶことは「自由」への第一歩

お金のために今の仕事を選んでる…
将来のお金のために貯金を増やさないといけない
老後を考えるととにかく不安…

20代の私がまさにそうでした。
お金のことを知らなすぎて、学んだり勉強したいと思っていても
どこから手を付けていいか分かりません

南エリナ(著者)のプロフィールはこちら

30代、お金のスクールファイナンシャルアカデミーにて
不動産投資を学び、アパートを購入。家賃収入を手に入れました。

毎月ほぼ決まったお金が入る喜び、安心感のおかげで
会社を退職。好きなことだけを仕事に生きています。

30歳の時、不安を抱えながらもお金について学び始めてから
人生が大きく自由に変わりました。

今はいい時代です。
お金の専門学校があったり、お金のパーソナルトレーニングもあります。

お金も英会話や習いごとのように、実際に習う方が身にも付きますし
自分へのインパクトが大きい。

そんな経験を一人でも多くの人に伝えたくって、
当サイトを運営しております。

お金を学ぶためには、どの金融商品にも依存しない、
中立的な立場で学べる場が必要不可欠です。

ファイナンシャルアカデミーは約20年続いている
独立的なお金の専門スクール。

金融教育を受けたことがない人向けに、お金の初歩から投資まで
トータルに学べるスクールです。

ファイナンシャルアカデミーお金の教養講座の詳細はこちら

お金の教養プラス口コミ
年金のニュースを見る度に、将来のお金に対して不安に思う… 年金支給年齢は引き上げられ、定年後10年、もしかしたら20年。 どうやって過ごせば...

ファイナンシャルアカデミーに加えて、女性が安心してお金を学べる
ブーキー(bookee)という、個人レッスンも始まりましたよ。

オシャレな空間でカフェするように、お金を学べて
実際に資産を500万増やしている人も!

ブーキー(bookee)について調べてみる

ブーキー(bookee)の個人レッスンの体験談はこちらです。

不動産投資スクールで学んだファイナンシャルアカデミーの関連企業で 「ブーキー(bookee)」というお金のパーソナルジムができました。 お金...

ネットではなかなか読めない!本レッスンの体験口コミです↓

ブーキー
お金のパーソナルトレーニング(ライザップお金版)のブーキー(bookee) 先日の無料体験レッスンからステップアップさせまして、 本番の...

関連記事

お金の教養フェスティバル2014と不動産投資実践報告会

手帳探しと手帳活用術満載の「藍玉スタイル」に掲載いただきました

自分サイトを持つまでの無料ブログのカスタマイズ方法

30代女性の複収入(資産)作りプロジェクト始動!

目標設定で大切なことは数字とリアリティ

ブロガーという生き方と復収入作り #ブロフェス2013

当サイトの内容、テキスト、画像等の無断転載・無断使用を固く禁じます。 まとめサイトへの引用も厳禁と致します。