ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

Google Search Consleのモバイルユーザビリティのエラーを直すコツ

Google Search Console image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

Google Search Consoleのモバイルユーザービリティのエラーには手順があります。

ひとつのエラーを直すと一気にエラーが消えることがあるので。

作業自体はかんたんです。数が多いとめんどうですが。

Google Search Consoleは、スマホやタブレットでのサイト表示の見やすさを検査してくれます。

そこでこんなエラーや警告を見たことがあるでしょう。

ビューポートが設定されていません。

テキストが小さすぎて読めません。

クリック可能な要素同士が近すぎます。

コンテンツの幅が画面の幅を超えています。

この中で、まず最初に修正すべきは、これ。

『ビューポートが設定されていません。』

ビューポートはページをモバイルでどう見せるか? をHTMLで指定するもの。これが設定されていないと他のエラーもいっしょに出ます。

どう見せるかをGoogleさんに教えてないので、いろんなエラーが出るのは当たり前っちゃ、当たり前。

逆に言うと、これ以外のエラーはビューポートの設定で一気に直る可能性があります。

ビューポートの設定はこちらをどうぞ。

一通り、検証が終わってもまだエラーや警告が出てるときは、個別に修正します。

個別の修正はかんたんです。すべてCSSを修正します。

テキストが小さいfont-sizeの変更。
要素同士が近いpadding, marginの変更。
コンテンツがはみ出るwidth, heightの変更。

最後の3つは、コンテンツの内容によっても変わるので、比較的エラーページ数は少ないでしょう。

ヘッダー・フッターなど共通部分だったらほぼすべてのページでエラーになりますが。

修正箇所がたくさんあると面倒ですが、慣れるとCSSを作成してるときに意識してできるようになります。

(こうしたら、あれが出るな~。これが出るな~。というのが分かる。)

前のページ
Googleが変更したリンクのnofollow属性
『ビューポートが設定されていません』を直す
次のページ

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください