*Essence

随分前に明けておりますので今更ですが…本年も宜しくお願い致します。m(__)m

今年の初投稿が、『昨年末にGoogle Search Consoleで「ビューポートが設定されていません」というエラーが表示された話』ってのもどうかと思いますが、この度無事に修正されたので一応（備忘として）記事にしておきます。
Search Console を使って自分のブログを調べるようになったのは昨年なので、あまり詳しくありません。
申し訳ございませんが質問はご遠慮下さいませ。m(__)m

昨年11月まで『無エラー』だったのが、12月に何の気無しにGoogle Search Consoleを開いてみましたらエラーが1つ付いていました。


1つなら修正は簡単…と修正しようにもどこが悪いか分からない。
策を探しながら彷徨っておりましたら「Search Consoleのデータはクロール時の古いものなので、そのページから飛べる『モバイルフレンドリーテスト』は当てにならない。」という情報を発見。
Search Consoleのツールからだけで無く、検索ページからもモバイルフレンドリーテストツールをやってみた…けどどちらもエラー無し、緑の文字で「このページはモバイルフレンドリーです」と表示。ホントに「じゃあ何故？」という感じです。(・_・;)



web徘徊中、気になったのが『解決策が“viewport”に有った』という話。

Google Search Consoleに「テキストが小さすぎて読めません」「クリック可能な要素同士が近すぎます」と言われた→解決しました！ - sunsun fineな日々

更新がしばらく滞っていたのですが，ちょっとブログに問題が起こっていたのです。それがなんとか解決したというお話です。 ある日エラーのアラートが エラーアラートが増えてきた モバイルフレンドリーテストをしてみると… 原因を探ってみます 画面が縮小して表示されている？ ピンチインできる！？ CSSをチェックしてみる 解決策は ”viewport” おわりに ある日エラーのアラートが 昨年末，Google Search Consoleを眺めていると，モバイルユーザビリティのところにエラーが出ていることに気がつきました。エラーは2つ， 「テキストが小さすぎて読めません」 「クリック可能な要素同士が近すぎ…

www.sunsunfine.com

この記事では、ページは確かにモバイルフレンドリーテストでエラーが出ていて表示テストも縮小されてしまっている、けれど実際にスマホで閲覧すると（縮小されずに）キチンと表示される…という話で、実機での閲覧でピンチアウト出来るのが問題だったらしい。

改めて自分のブログHTMLを見てみます。

metaタグで設定した「viewport」は

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

になっています。

上記サイトの記事に有る設定とは少し違うのですが、修正策を探し廻っている際に何処かで「user-scalable=yesを入れるとGoogleに嫌われる」というようなのを見た覚えが有ったので削除してみる事に。

実際ホントに嫌われるのかは分かりません。初期値はYes（ズーム可）なので書かなくても問題無いですし。
でも、user-scalable=no でエラーなら「拡大縮小出来ないのはユーザービリティ的に良くないよね」という事で分かるけれど、Yesなのに問題有るの？
（私もピンチインした方が見易い歳になりましたもので…(^^ゞ）
まぁ、“viewport”で検索すると出て来る『設定基本形』が一番安心、って事なのかな。

<meta name="viewport" content="width=device-width, initial-scale=1">

Google Search Consoleのエラー出現から何度か検証リクエストを送信してみましたが尽く失敗。
“viewport”を直して、今度はどうだろう？と「ビューポートが設定されていません」についての検証を再リクエストしてみました。

で、…先日晴れて合格となりました。
ビューポートの設定についてのエラーが解消されたら、他の2つ「テキストが小さすぎて読めません」と「クリック可能な要素同士が近すぎます」もエラーが消えました。
う～ん、user-scalable=yes が原因だったのかなぁ？誰か詳しい方、教えて下さいませ。m(__)m
取り敢えず 良かった良かった。

【予告】 この度の件で、次の修正・更新時にテンプレートから「user-scalable=yes」が付いているものは外そうと思います。