モバイルフレンドリーにしてね！のお知らせが届く
先日、このコラムのSearch Consoleからお知らせが届きました。
原因は画像の横幅指定を間違えたものが保存されており、それをGoogleがクロールした際に発見した模様です。
直ぐに修正したのでほっとひといき、となった訳ですが、モバイル対応については改めて注意しておかないとなと思った次第なのでここに記しておきたいと思います。
SEO・コンテンツ作成・WEB集客などの
お悩みを解決するお役立ち資料を公開中
無料ダウンロード
Contents
モバイルフレンドリー
モバイル（スマートフォン）サイトを作成するにあたり、Googleの指標を参考にしている方は多いと思います。
モバイルフレンドリーについては「モバイルにフレンドリーなんですよ！」という理解でほぼほぼ間違いないのですが、さて、そもそもモバイルフレンドリーとは一体どういうことなのでしょうか。
何度か、サイトの導線周りのお話の時にご紹介したことがありますが、改めて。
モバイルフレンドリーの話
モバイルフレンドリーは2015年頃からGoogleが導入している検索結果をより良くするための評価指標で、ユーザーがスマートフォンで検索をしたりページを見た時に最適化されているかというところがポイントとなります。
注目するところは２つ。
- サイト全体ではなくて、ページごとに判断されている
- スマートフォンでの検索順位に影響する
サイトがモバイルフレンドリーに対応していない場合、ユーザーはスマートフォンで画面を表示した時にそこから更に拡大してページを見なければいけませんし、画面が切れていると本当は見て欲しいコンテンツを見てもらえないかもしれません。
このようなユーザーにとって不親切とも言えるページをGoogleは評価しなくなっているのです。
モバイルファーストインデックス
さて、モバイルフレンドリーが「スマートフォンでの検索に影響する」と言っていたところ、今ではそもそもモバイルでの検索をメインとして評価し検索順位を決定していく仕組みが導入されています。
それがこの「モバイルファーストインデックス」です。
PC用とスマホ用に別々のURLを用意してサイトを運営していたとします。
例えば・・・
スマホ用のURL https://s.○○.com
この場合、これまで同様に使っている端末によって表示されるURLが決まります。
（PCで開いた場合はhttps://○○.comが開く）
しかし、インデックスされる対象となるコンテンツはスマートフォン用のhttps://s.○○.comのものが使用されます。
この場合注意しておかなければならないのは、
PC用のサイトとスマホ用（モバイル用）のサイトの内容が同じであること。
コンテンツ設計に大きな差がある場合は検索結果に影響が出る可能性があります。
そうは言うものの、例えば「PCでサイドカラムにあるカテゴリーなどの一覧をハンバーガーメニューの中に格納していた」からと言って、スマホサイトの順位に影響を受けることはないようです。
スマートフォンでの見やすさを考慮する表現であれば、過敏にならず対応して良いでしょう。
ただし、サイトのメインとなる部分のコンテンツをPC同様にきちんと表示し、マークアップなども忘れずに施しておくことはお忘れなく。
また、PCでもスマホでも同じURLでサイトを表示する「レスポンシブデザイン」で構成されたサイトは、この限りではありません。
SEO・コンテンツ作成・WEB集客などの
お悩みを解決するお役立ち資料を公開中
無料ダウンロード
モバイルフレンドリーテスト
上記のように、モバイルについて現在とても重要視されており対応はもはや必須とも言える状況です。
さて、これを踏まえて自社のページがどんな状況にあるのか、Googleのツールを使ってモバイルフレンドリーかどうかテストすることができます。
モバイルにフレンドリーか・・・つまり、モバイルで見たときのユーザビリティに問題がないか確認することができるのですが、チェックを行うと、時々以下のようなエラーが出ることがあります。
- コンテンツの幅が画面の幅を超えています
- テキストが小さすぎて読めません
- クリックできる要素同士が近すぎます
- ビューポートが設定されていません。
これらが出た場合、ページのどこかに問題があります。
一つ一つ解消していきましょう。
ビューポートが設定されていません
viewportプロパティが設定されていないことを示します。
「デバイスの幅に合わせて画面を調整してね」という記述。
initial-scale=1は「スマホを横向きにした時にページの全体を使って表示できるようにしてね」という指示です。
コンテンツの幅が画面の幅を超えています。
PCと同じように大きな画像の横幅指定をしようとしていたり、CSSの指定を誤っていたなどが起きていませんか？
よくあるのが、画像を設置したもののスマートフォンで見た時に最適化されていないケース。
スマートフォン表示の場合は「width：100%」など横幅を超えない（もしくは固定しない）設定が必要です。
テキストが小さすぎて読めません
文字が小さすぎるのでは？フォントの指定を見直してみましょう。
Googleの推奨するフォントサイズは16px、スマホだと11ポイント以上が良いとのこと。
あまりにも小さな文字だとユーザーがスマホで画面を拡大しなければならなくなります。
クリックできる要素同士が近すぎます
スマホでよく見る「問い合わせ」や「電話」などのボタンが固定フッターとしてついてくるものや、ページ内のリンク。
押したいところと、その次のリンクが近すぎて間違ってタップしたことはありませんか？
このようにクリックできるところが近すぎると、サーチコンソールでお知らせが出ているかもしれません。
クリックしやすい十分な大きさを確保しましょう。
問題修正の報告と再検証
先程、出てきたSearch Consoleでの通知に対し、ページ上にあるエラー（例えば画像幅の指定方法やボタンの大きさなど）を修正したあとは、問題を修正したことをGoogleへ連絡する（再検証依頼）ことができます。
Search Console上に出ているエラー箇所から「再検証」をクリックしてみましょう。
合格するとメール、管理画面上にて合格したことがお知らせされます。
これで一件落着ですね！
Search Consoleは時々確認しておくべし。
この他にも、お知らせを届けてくれたSearch Consoleでできることはこちらの記事をご覧ください。
モバイルで見た時に、ページのサイズがきちんと整えられているか、また文字は小さすぎないかなどページを見る上で大切な要素が詰まったモバイルユーザビリティ。
こうした通知を受け取ることなく、ユーザーに見やすいページを見てもらうために気をつけておきたいものです。
とはいえ、今回のように「うっかり」のこともありますから、通知にはすぐ気づけるようにしておきたいですね！
SEO・コンテンツ作成・WEB集客などの
お悩みを解決するお役立ち資料を公開中
無料ダウンロード