モバイルSEO必須！WordPressブログを「スマホ対応」にする方法

現在 SEO 関連で話題となっている、［スマホ対応］がモバイル検索のランキング要素となる、という Google の正式なアナウンス。

2014 年末ごろから、スマホで検索した場合に［スマホ対応］というラベルが検索結果に表示されるようになりました。この時点では順位に影響がなかったのですが、それが 2015 年 4 月 21 日より順位に影響するようになります。

もし、WordPress でブログを運営していて未だ対応していないのであれば、この機会にスマホ対応に取り組むことをオススメします。その概要と初心者向けの対応策をご覧ください。

［スマホ対応］とは何なのか

日本語の検索結果では［スマホ対応］と表示されますが、英語ではモバイルフレンドリー［Mobile-friendly］となっています。

スマートフォンで適切に表示できるように最適化したサイトが該当しますが、まずこの定義をおさらいしておきましょう。Google ウェブマスター向け公式ブログでは下記の説明があります。

“この条件を満たしたページは、［スマホ対応］ ラベルが適用される可能性がある” とあるように、この 4 つは最低条件であると考えられます。

スマホ対応かどうかを確認する方法

自分の運営しているブログが要件を満たしているかどうか、Google に聞くのが一番です。

モバイル フレンドリー テスト でチェックしてみましょう。

適合していれば、このように表示されます。

適合していない場合は、このように原因を教えてくれます。

一つずつ解決していけば、晴れて［スマホ対応］という表示をしてくれる（可能性がある）わけです。

ウェブマスターツールに登録しているなら、「モバイルユーザビリティ」という項目でどのページが不適合となっているかを教えてくれます。

ブログの場合は、トップページだけではなく各記事ページやアーカイブページがエラーとなっていないか確認しましょう。

スマホ対応への修正方法

それでは、モバイルフレンドリーテストで問題点が指摘された場合の解決方法をご紹介します。

Flash が使用されています

一時期流行した Flash ですが、対応しているモバイル用ブラウザは限られているため、この項目が問題点として指摘されます。

しかし、個人ブログにおいてわざわざ Flash を使う機会はないと思うので、とくに気にしなくて良いでしょう。

モバイル用 viewport が設定されていません

PC において、ビューポート viewport はブラウザの表示領域を指します。スマホでは、ほぼ画面そのものがビューポートということになります。

ビューポートは meta タグで設定することができ、現在多く見られるのがこのような記述です。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

「width=device-width」は、横幅をスマホ画面の横幅に合わせるという指定。初期値では 980px となっているので、この指定は必須です。

「initial-scale」は倍率の指定で、上の例では 1 倍ということになります。device-width を指定しておくことで初期値が 1 倍にセットされますが、ブラウザが誤判定しないよう念のため指定しておく感じです。

この他にも「user-scalable」でズームの操作を許可する／しないを指定できますが、個人的にユーザビリティ向上のためにズームを許可しておくほうが良いと思います（初期値はズーム許可となっているため、再指定する必要はありません）。

参考meta要素 表示領域を設定する – TAG index Webサイト

ビューポートの横幅は px でも指定することができますが、この場合はモバイルフレンドリーテストで「固定幅のビューポート」という指摘が出る可能性があります。

コンテンツのサイズがビューポートに対応していません

「width=device-width」を指定していても、CSS の設定によっては要素が画面の幅を飛び出てしまったり、大きな要素に合わせて全体が縮小表示される場合があります。

レスポンシブ Web デザインを採用しているブログでは、以下の要素が原因となっていることが多いようです。

画像は max-width を指定することで解決します。

img {
    max-width: 100% !important;
}

「!important」を入れておくことで、たとえ画像に直接 width が指定されていてもこちらが優先されます。

しかし、画像を DIV 要素で囲んでそこに幅が指定されていたりすると、画像がはみ出してしまいます。

<div style="width:1200px">
    <img src="" alt="" width="1200" />
</div>

この場合は、DIV に対しても max-width の指定が必要。

また、Crayon Syntax Highlighter のようなプラグインを使うと <pre> が挿入されることがありますが、こちらも max-width の指定を忘れがちな部分かもしれません。

テーマを自作したり大幅に改造しているなら、テストのさいにダミー記事を入れてみるとこのような問題点が見つかります。

参考WordPressテーマ作成＆カスタマイズに使える素材とCSSの小技

このほかにも、せっかくレスポンシブにしているのに固定幅の AdSense を使用しているブログをたまに見かけます。

レスポンシブ対応の広告に切り替えるか、WordPress であれば条件分岐を行うことで PC とスマホの出力を制御してください。

フォントサイズが小です

具体的にどれほどのサイズが「小」なのかわかりませんが、Google が推奨しているサイズは 16px となっています。

参考読みやすいフォント サイズを使用する – PageSpeed Insights

個人的には PC でもスマホでも 14px 以下になるとちょっと小さいかな、という気がします。フォントの種類にもよりますが、15 ～17 px が現実的な数値だと思います。

また、フォントのサイズに加え、行間や段落間の指定も忘れずに行っておきたいところ。この指定は px ではなく、em を使ったほうが良いでしょう。

行間を px で固定してしまうと、大きな文字を使ったときに読みづらくなってしまうからです。

タップ要素同士が近すぎます

Google によると、タップ要素は平均的な指の腹のサイズ 10mm が基準となっているようです。また、Android UI ガイドラインによると、48px 以上であることが望ましいとされています。

参考タップ ターゲットのサイズを適切に調整する – PageSpeed Insights

この項目に関しては、モバイルフレンドリーテストではとくに指摘されなくても、PageSpeed Insights で指摘されることがあります。

ユーザー エクスペリエンスの欄で具体的な要素を教えてくれるので、指摘された部分をもう少し広げられないか検討してみましょう。

よく指摘対象となるのが、トップページやアーカイブページの記事一覧で使われるページャー部分です。

似たようなページャーを使っている場合は、一度チェックしてみてください。

せっかく［スマホ対応］となっていても、読者が不便だ！ と感じるのであればモバイルフレンドリーとは言えません。

スマホ対応修正方法のまとめ

Google のヘルプを読むと、レスポンシブ Web デザイン（RWD）の採用を強く勧めているのがよくわかります。

しかし、大切なのはブログに訪れてくれた方がストレスなく記事を読めるよう配慮することです。RWD はその配慮の一部と言えるでしょう。

一般的なブログであれば、PC からでもスマホからでも、アクセスしてきた方の目的は記事を読むことなので RWD が適していると思います。

ただ、要素を縮小して画面幅に合わせるだけでは足りない部分も出てくるので、ここら辺は常に読者目線で考えていく必要がありますね。

RWD は何よりも優れているとか、上位表示されやすいというのは誤解です。悪質な SEO 業者が使いそうな手口なのでくれぐれもご注意ください。

と、ここまで長々と書きましたが、ひとつずつ対応しろと言ってもなかなか難しいものです。そこで、次項では WordPress ブログをスマホ対応にする具体的な方法を解説します。

WordPressブログをスマホ対応にする方法

初心者でも簡単にスマホ対応させる方法は、次の 2 つ。

それぞれのメリット・デメリットも合わせてご覧ください。

プラグイン WPtouch を使う

WPtouch Mobile Plugin は、レスポンシブ Web デザインが浸透する前はほとんどのブログで使われていた有名プラグインです。

インストールして有効化するだけで、スマホからアクセスがあったとき自動的に専用デザインを反映してくれるすぐれもの。切り替えボタンも実装されているので、読者が任意に PC 用テーマを表示させることも可能です。

もちろん、モバイルフレンドリーテストもパスします。

デメリットとしては以下が挙げられます。

イメージとしては無料ブログに多く見られるスマホ専用テンプレートに近いので、今まで無料ブログを使ってきたならさほど問題ないでしょう。

任意の場所に AdSense を挿入したい！　スマホだけで見られる独自のコンテンツを反映させたい！　という場合はけっこう大掛かりなカスタマイズになります。

また、WordPress 本体や WPtouch のバージョンが変更になると不具合が出ることも考えられます。ここら辺は、プラグインに頼る以上しようがないところですね。

レスポンシブWebデザインのテーマを使う

テーマ変更に抵抗がないのであれば、レスポンシブ Web デザインを採用しているテーマに乗り換えるのが最速かもしれません。

公式テーマは、管理画面の［外観］から検索することができます。「特徴フィルター」から「レスポンシブレイアウト」を指定してください。

海外のテーマばかりでカスタマイズに関する日本語の情報も少ないため、知識がなければ自分好みのデザインにするのは苦労するのが難点。

非公式であれば国産の無料テーマがたくさんあるので、そちらを採用するのも良いでしょう。

ちなみに、レスポンシブ Web デザインでも読者が任意に PC 表示に切り替えられるようカスタマイズすることが可能です。

カスタマイズ系の記事を書くなら必要かも、と思ってこのブログでも実装予定です。

参考レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみた

プラグイン Multi Device Switcher を使う

『スマホ用テーマを好きにカスタマイズしたい！　でもレスポンシブ Web デザインはちょっと… 』という場合は、この Multi Device Switcher が便利です。

WPtouch のように固定のテーマを反映させるのではなく、スマホからアクセスがあったらインストール済みの好きなテーマを反映させることが可能。

PC では Stinger3 を使い、スマホでは Gush2 を、タブレットでは Simplicity を使う、なんてこともできます。

同じテーマを複製して、スマホ用としてカスタマイズすることもできます。レスポンシブ Web デザインのテーマを使っているなら、条件分岐タグや CSS を覚えるよりカスタマイズが簡単かもしれません。

参考【至急】WordPressサイトをスマホ対応にする方法

WordPressスマホ対応のまとめ

Google のウェブマスター向けモバイルガイドにも WordPress 用の説明があるので、これからスマホ対応に取り組むのであれば一度目を通しておいたほうが良いでしょう。

参考WordPress – ウェブマスター向けモバイルガイド

どの方法を採用する場合でも、一番に考えるべきなのは読者です。

記事本文は読みやすいか、リンクやボタンはタップしやすいか、関連記事を探しやすいか。考えることはたくさんありますが、これもブログの楽しみ方のひとつだと思います。

「このブログ読みやすい！」とシェアしてくれる方がひとりでもいれば、こんなに嬉しいことはありませんよね。

まとめと今後のSEO

「WordPress ならプラグイン使うかレスポンシブテーマに乗り換えれば OK です！」の一文で済む話が長くなってしまいました。

今後、モバイル検索では［スマホ対応］ラベルがつけられたサイトが上位表示されるようになります。できることは今のうちにやっておきましょう。

しかしながら、個人的に気になるのはこちらのニュースなのです。

テストで終わるのか、モバイルフレンドリーのように本格導入されるのかわかりません。

いずれにせよ、カスタマイズも含めてブログ運営に取り組んでいきましょう。

それでは、また。