ライブドアブログ、サーチコンソールエラー：ビューポート設定方法

この3文ですが、意味をひっくるめて簡単に説明しますと。
ブログをスマホで表示した場合に文字が小さ過ぎて、いちいち指で文字の拡大操作しないと読めないよ！
これじゃ、モバイル使っている人には面倒じゃん！
って解釈で問題ありません。。

当ブログでは：プライバシーポリシーと、免責事項の2つの項目でこのエラーに引っかかっている様です

プライバシーポリシーと免責事項をクリックしたときに表示される文字がスマホの場合小さ過ぎる事が原因です

モバイルユーザビリティの問題を解決するをクリック後、確かめてみるとーー。
プライバシーポリシーと免責事項がPC画面に表示されるので、スマホからクリックして確かめて見ます。


するとーー、確かに表示される文字が小さく非常に見づらかったです。

先ずは、このビューポートの設定を何とかしてみるところから始めようと試みます

• クリック可能な要素同士が近すぎます
• テキストが小さすぎて読めません

なぜか？と言うと、その理由は以下です。

モバイルのユーサビリティを改善します

1.ビューポートが設定されていない
2.テキストが小さすぎて読めません

✔これは、おそらくビューポートが設定されていないことにより文字が小さく表示されてしまっているのではないかと推測しました。

（ですからこの記事ではビューポートの設定を第一に考えています。）

しかし、これには正直参りました。
livedoor Blog の場合、 PC 設定での html 編集等はスマホには反映されない事が多いんです。 （※liveDoorブログ時代の記事です）



そこで簡単な方法として。

1. PCからスマホの設定でメニュー項目を削除
2. その後文章をブログパーツとして貼り付けてみる

上記を試みました。

ここの部分を削除してしまう。 ↑

しかし、以下の事に悩まされます。

• Googleサーチコンが、クロールでタグを確認する
• ビューポートが無いと判断する
• お構い無しにエラーを吐き出す

✔という事はつまり、

HTML タグに ビューポートを設置する必要があります。

なので、とりあえずビューポートの設定が第一だなと考え、昨日から悪戦苦闘してました。

ググっていろいろ調べてみると、CSSの設定など色々大変らしいということが連なっています。
ですから上手くいくか、かなりの疑問を抱きながらの取り組みでした。 

ビューポートの設定解決方法：設置で無事解決！

結論から先に言ってしまうと、こちらのタグを貼り付けるだけです。

✔解決方法としては、ヘッダー部分に上記のタグを貼り付けるだけです。
ところが、私が作ったプライバシーポリシー、免責事項にもHTMLを見てみるとヘッダーがありません。
昨日は、この解決方法を調べるだけで時間が無くなってしまい、途中で諦め休みました。。


そして今日、再度この問題の修正に取り組んだのですが。。

あっけなく解決してしまいました。
とは言っても以下の様に再度クロールされるまでは、この問題が解決されたかは分かりません。。

結果がわかるまでには、まだ数日かかるらしいです。

－追記－その後無事解決しました！

Googleアドセンスからビューポートの修正完了メールが来てました！
以下、手順をまとめます！

まとめ

結局その解決した方法なのですが、タグを免責事項とプライバシーポリシー両方の HTML タグの先頭に貼り付けただけです。
両方ともヘッダは有りませんが全くそんなものは関係なく、これでスマホ上でも大きく表示できるようになりました。

結局、これで テキストが小さすぎて読めません 上記2点も必然的に解決されることとなります。
そのタグがこちらです。（先に示したタグです）
<meta name="viewport"content="width=device-width,initial-scale=1">

同じようにお困りの方がいらっしゃいましたら、試してみてください。
しかし昨日の4時間は何だったんだろうか。。