あなたのウェブページはモバイル フレンドリーですか?
①エラーに気づく。
ドタバタだった最近、自分のサイトを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 コメント