ドリリウム

趣味をとことん突き詰めるブログ。ペット / フィンチ / 鳥 / 文鳥 / ジュウシマツ / 写真 / カメラ / 高知 / 釣り / DIY / バイク / 車 / 家具制作 / アクアリウム / コーヒー / 地方移住 / ルノー・ルーテシア / SUZUKI ST250 E type / EOS Kiss M

こんにちは。カタミチ(@katamichi2h)です。

お問い合わせsyufukc@gmail.com / Twitter

【Google Search Console】”ビューポートが「端末の幅」に収まるよう設定されていません” の原因と対策

f:id:katamichinijikan:20181004135159p:plain

ある日Google Search Consoleを確認すると、Webサイトにエラーが出ているとの表示がありました。エラー内容は【ビューポートが「端末の幅」に収まるよう設定されていません】

f:id:katamichinijikan:20180930175443p:plain

ギクリとしました。

心当たりがあったわけです。そのWebサイトはPHPで制作しており、スマホにも対応しています。しかし、少し用途が特殊であったためレスポンシブデザインでは効率的に情報を表示できず、固定幅(width=500のような)に設定していました。もちろん文字サイズなども調整してスマホ画面上で縮小表示される前提で制作してありました。

今時どこを見てもwidth=device-widthが当たり前で、制作した時点ではwidth=device-widthにしないことに若干の後ろめたさがありました。

 

【ビューポートが「端末の幅」に収まるよう設定されていません】の原因

【ビューポートが「端末の幅」に収まるよう設定されていません】というエラーの原因は、私がギクリとしたまさにそれそのものでした。

つまり、Google Search Consoleでは、width=device-widthに設定しない限りこのエラーが表示されるようなのです。先ほどのエラーからリンクを確認すると、以下のような情報が確認できます。

f:id:katamichinijikan:20180930175504p:plain

このエラーを修正するには、ページの CSS 要素に対して相対的な幅と位置の値を使用し、画像も同様にスケーリングできるようにします。

更にリンクを辿ると、以下のように記述されています。

f:id:katamichinijikan:20180930175559p:plain

width=device-width を追加して、デバイス非依存ピクセルで画面の幅を合わせます。

つまり、Googleとしてはレスポンシブデザイン以外=エラーというわけです。width=device-widthを設定しない限りはこのエラーが表示され続けます。検索順位などにペナルティがあるのかどうかは不明ですが、気持ちが良いものではありません。

【ビューポートが「端末の幅」に収まるよう設定されていません】の対策

上記の通り、対策はWebサイトをレスポンシブデザインに対応させ、width=device-widthを設定するしかありません。私も念のため固定幅のままあれこれとプロパティを設定してみたり、固定幅からあふれている要素がないか余白等を含めた幅をチェックしました。

先ほどのエラー画面から「修正を検証」をクリックしてみます。

f:id:katamichinijikan:20180930180019p:plain

少々時間がかかりまして、

f:id:katamichinijikan:20180930180021p:plain

ダメです。やっぱりviewportはwidth=device-widthである必要があります。

f:id:katamichinijikan:20180930180026p:plain

当面は様子見します

レスポンシブデザインに対応する気力がないため、当面は様子見したいと思います。これって本当にwidth=device-widthにしない限りは回避できないものなのでしょうか?