モバイルフレンドリーテスト

CSS

Googleは、モバイル端末(スマートフォンなどポケットサイズの端末)でのウェブサイトの可読性を評価するようになっています。

つまり、モバイル端末で閲覧する人が見難い、と感じるサイトは、モバイル端末での検索順位を下げる可能性がある、という意味です。
https://developers.google.com/webmasters/mobile-sites/mobile-seo/?hl=ja

で、その評価は、Googleが提供するモバイルフレンドリーテストでチェックすることが出来ます。

https://www.google.com/webmasters/tools/mobile-friendly/
mobilefriendrytest  

とあるサイトをチェックすると、こんなことを言われてしまいました。
no-mobilefriendry

ページがモバイル フレンドリーではないと判断される可能性のある理由
×テキストが小さすぎて読めません
×モバイル用 viewport が設定されていません
×リンク同士が近すぎます

でも、そのサイトはCSSで画面サイズに併せて2カラムから1カラムに表示を変えるようになっていて、実際にiPhoneでチェックしても問題ありません。
なのに、Googleのモバイルフレンドリーテストでは合格できません。

で、いろいろ調べてみたら、headタグ内にmetaタグでviewportを追加すれば解決するとわかりました。
具体的には、

をheadタグ内に追加する。

参考サイト: これがスマートフォン向けサイトを作るときの viewport 設定3パターンだ

タイトルとURLをコピーしました