2018年10月5日金曜日

Mobile Usability: Viewport not set to "device-width"

このラベル「Web技術」は、裏方IT担当の当方の愚痴です(笑)。

ここに書くのも何だなぁと思うけれど、メモしておきます。

うちは最近の世の中の大勢である WordPress に逆らって(笑) Google さんの Blogger で懸命にこのサイトを作っています。テンプレートも Google さん標準提供の Simple に必要に応じ手を加えて使ってます。

ところが Google さんが暫く前からサーチ・コンソールで "Mobile Usability" のエラーを表示し始めました。

見ると、モバイルの筈なのに PC版サイトを表示するオプションである m=0 をわざわざ指定して、これらのエラーを提示しています。
「おいおい…」と思って放置しておいたのですが…

エラー・ページのカウントが徐々に増えてくばかりでなく、気のせいかそれに従って検索順位もカクン、カクンと落ちていきます。

仕方が無いので対処してみます。

先ずはこれ、 Viewport not set to "device-width"。

膨大な行数のテンプレート解読するの面倒なので放置しておいたのですが、意外と冒頭部にすぐ見つかりました。

元は

<meta expr:content='data:blog.isMobile         ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot;         : &quot;width=1100&quot;' name='viewport'/>

となってました。つまり、PC版サイト指定時は 1100px 固定になってたんですね。これがお気に召さないようです。

若干の視察により、このように書き換えたら文句を言われなくなりました。

<meta expr:content='data:blog.isMobile         ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot;         : &quot;width=device-width,initial-scale=1.0,maximum-scale=1.0&quot;' name='viewport'/>

minimum-scale=1.0 指定しちゃうと縮小表示できないですからね、それだけ外して、後はモバイル版と同じ内容を指定したものです。

エラーは未だあと2つありますね…

片方は思い当たりがあるけど、もう一方は果してどこのことを言っているものやら…



0 件のコメント:

コメントを投稿