【Googleテスト】あなたのページはモバイルフレンドリーですか? エラーも力技でバッチリにする話(画面の縮小・拡大)


あなたのウェブページはモバイル フレンドリーですか?

①エラーに気づく。

ドタバタだった最近、自分のサイトをGoogle Search Consoleに登録したまま放ったらかしていました。

エラーが届いています。どれ、見てみましょう。


「クリック可能な要素同士が近すぎます」
「テキストが小さすぎて読めません」
「コンテンツの幅が画面の幅を超えています」

そんなわけ、あるかいな。スマホでちゃんと読めてるよ?

……ハッ!? まさか、ポイント表示などの一部フォントを14pxにしていることを指摘されているの!?(Google提唱のフォントサイズ16px、行間1.2em)

いいえ、違いました。

②モバイルフレンドリーテストもしてみる。

別角度から、Google提供の「モバイルフレンドリーテスト」もしておきましょう。
https://search.google.com/test/mobile-friendly


本当に読めないわ。

くっそ……! なんでや……!

③場所と原因を特定する。

飛ばします。(飛ばすんかい!)

④力技を思いつく。

viewportの設定を変更したらうまくいきました。

もともとGoogle推奨のviewport(<meta name='viewport' content='width=device-width,initial-scale=1.0'/>)が設定されていましたが、画面の縮小を防ぐため、以下の太字部分を追加しました。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">

width=device-width:表示領域をデバイスに合わせる
minimum-scale=1.0:縮小表示をしない
maximum-scale=1.0:拡大表示をしない
user-scalable=yes:ユーザーのズーム操作を許可(初期値もyesですが明示的に)

⑤モバイルフレンドリーになる。

読めるぅぅぅーーーーー!!!

修正したことをGoogleに伝えましょう。

そして数日後……
バッチリ~👌

こちらからは以上です!

0 コメント