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

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

ギクリとしました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

当面は様子見します

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

google search consoleでviewportを固定幅にすると問答無用でエラーなんだなぁ。レスポンシブに作り直すのもめんどうくさいし、うーん。 #viewport

— かたみち (@katamichi2h) 2018年9月30日