ドキッ!GoogleSearchConsoleからAMP問題解決催促のメールが飛び込んできた。

このブログの記事に、問題発生!というメールを貰うと・・・

そういった事はこれから体験するよ!と言われてたので、分かっていてもドキッ!としますね。

ついにきた!

って感じです。(全然落ち着けない)

結構、小心者なんすっ。(笑)

実は、今回2回目です。(笑)また、頂きました。
最初はこれ↓

AMPの機能を利用(有効)にしていた?
あれ? 無効になっていたハズ?
という事で、思い直していると、そういや、

「AMP有効とする場合、画像ファイルをちゃんと設定しておかないと、AMPエラーが出るよ。」

みたいに説明があって、それで「あ、ヤベぇ」まだ、準備してないから「有効→無効」に切り替えたことが数日前にあったなぁ・・・。ほんの数分間だったような記憶。

その事を思い出しました。(その後再検証して、問題なし)

当たり前ですよね、AMP機能を無効にしていますからエラーにはなりません。

画像ファイル60×600px以下で設定して、AMP有効設定に切り替えましたので、その後は平穏でした。

 

で、それから数日後に、本命のこれ!

またもや、やってきました、問題あります警告のメール。

スポンサーリンク

AMP関連です。さて今度は?とりあえず対処するには原因を理解しないと。

赤い矢印をクリックしたら、

AMP HTML タグの属性で指定されたレイアウトが無効です。だそうで、・・・

下にスクロールしてみるとエラーのあるページの情報があります。URLが提示されているので、ここにエラーの原因があるんですね。URLの部分でダブルクリックしたら、

エラーの部分を網掛けで表示してくれました。(赤い矢印がさしているピンクのバックカラー部分)

この部分は・・・あれ?吹き出しのプラグインを使っている部分?

使い方が違う訳じゃないよね。吹き出しはちゃんと出てたし。
AMP対応してくれているから自動、だからコードが判らないので、何をどうすればいいのかもわかりません。もう少し具体的な情報を得たいと思って。

Google さんお借りします(無料で利用できます(笑))

「AMPテストツールというのがるのを見つけてトライ!」別窓で開きます。

URLを入力して、黄色いボタンをエイ!(クリック)

しばらく解析時間があり、でました!やっぱり、そうですよね。
警告メッセージが出ました。

必須属性「height」がタグ<amp-img>に無い。という原因がここで分かりました。41個もある。

吹き出し機能を利用した箇所41か所が、エラーの原因のようです。
Speech_bubbleのプラグインで作った吹き出しのコードのようです。

そういえば「吹き出し機能で使いやすい」ことで知る人は知るプラグインという事で、利用者も多かったと思います。私も安心できそうだなぁという気持ちで、選択しました。
これが評判通り「使いやすい」これいい!と思ったものです。

でも、最近(3年ほど)更新されていないという状態でした。
ブログ→パソコンでやる!(閲覧者の端末の事はコロっと忘れてて)
AMP対応は、当然のこと対処されていないものだったのです。

そうですよね。

これが原因かもしれないです。
ここまで、わかりました・・・。

ちなみに、スマフォで、このAMPエラーのページを表示してみたら、一応表示されていました。(すげー)
(このままでも観れるならいいや・・・という誘惑に負けそうになりましたが、堪えて!)

見た目上はおかしくない。

と言っても、このまま放置はできないですね。(Googleさんは問題ですと警告してくれているし、AMPに準処してほしいとメッセージをくれたのですから...)

とはいうものの、さて、ここからどうやって、修正するの?

凄い人は、これだけで解決策が頭の中に浮かんでくるんだろうなぁ。

対処方法か・・・

必須属性 height が、 タグ amp-img に無い!という事らしいが、高さ?

あぁー、アイコン表示している画像の事かな?

確か、150×150 Pxで作成して登録していましたので、with=150 height=150 という、コードがここに必要なのか?

じゃぁ・・・

Speech_bubbleプラグインのコードを修正するってどうやって変える?

えっ、ど、どうやって?

お、おいらには、で、できません!泣き

そんな技術力を持ち合わせておりません。

ならば!

AMP機能の有効を「無効」にする事も一つの手!

えっ~

じゃぁ「吹き出し」を止めてしまいますか!

えっ~

プラグインを変更してしまうか?

・・・

どうする?

しばし、沈黙・・・

考えます。

ネットをググって、解決策を探す旅にでました。

検索キーワード「Speech bubble AMPで警告」「Google Search Consoleのエラーメッセージ」などで

調べたら・・・

うふ!

それらしい、記事を発見!

 

おいらにできる回避策はこれしかない!

Tips 4 Life管理人のRA’sさんが、提供してくださっている「WP Speech Ballon」です(^^)

先ずは、インストールして、Speech bubbleから乗り換え作業をしないと。
※御免なさいSpeech bubbleの作者様。
今は、背に腹は代えられない状況なので乗り換えを決意しました。

アイコン画像の格納先を変えなきゃなんねデス。
格納場所を指定するようになってるようです。

とにもかくにも、これが今すぐに、おいらにできるAMP警告を回避できる唯一の方法。

では、やってみます。

 

これが、どうなったのかは、後ほど追記します。

しばらく、お待ちください。

by haruto

記事:落ち込んでも仕方がない顔をあげて!仕事で叱られる人の心理と特徴

は、非公開にしました。

現在、吹き出しの載せ替え作業に入ったのですが、

画像ファイルがうまく表示できません。

経験の浅いおいら、が考えたこと。

Speech bubbleは、imgフォルダーに画像ファイルを入れるとリンクしてくれる。

WP-Speech-Ballonは、画像ファイルのフルパスを書けばそこにリンクしてくれると想像しました。

画像ファイルの置き場所をプラグイン:WP-Speech-Ballon配下にフォルダを作りそこに画像ファイルをアップして試したところ、avaterと表示。

あれれ?

画像が見つからない又は画像を探しきれない?

サーバー内のファイルの読み書き権限か?

パーミッションの設定で権限がないのでは?

・・・

試行錯誤した結果、変化なし。

うむー??? 画像を格納する場所は・・・何処なんだ!

解説のページをもう一度読み直す。

吹き出し会話で使いたい画像の準備が出来たら、WordPressの管理画面からでも良いのでアップロードして「画像URL」を保存しておきま・・・

あっ、これWordPressのメディアの中?

Speech_bubbleプラグインでは、画像をプラグインのフォルダ配下の「img」フォルダに入れるようになっていたし、その場所にアップすれば使えていたので、参照する画像ファイルの置き場所だけの問題かな?

と考えてました。

参照する場所は、結果的にエックスサーバーのフォルダ内部の話なので、同じように考えてもいいじゃんって勝手に思っていた訳です。

試しにここに置いてみよう。

えい!

ありゃ、できた!

おいらが、違ってたんだ。

んん・・・このからくりが、よく理解できていないのです。

https://horizon358.net/wp-content/uploads/2019/02/xxxxxZ07.pngは、良くて
https://horizon358.net/public_html/wp-content/plugins/wp-speech-balloon/img/xxxxxZ07.pngではダメでした。

 

でも、これでAMP問題警告の回避はこれで何とか目途が付いた感じです。

エックスサーバー内に作成したフォルダは削除します。ちなみに今回もWebFTPを使いました。

試しにフォルダーや、画像ファイルを追加作成したり画像ファイルをアップしたんで、忘れないうちん削除します。

 

覚書

WP-Speech-Ballonプラグインは、『Tips 4 Life』の管理人RA’sさんのサイトからダウンロードできます。バージョン2.3最新です。2019/2/6 01:20現在

画像ファイルは70Pxx70Pxの正方形以上のサイズが良いそうです。私は、150x150で作成しました。
ファイル形式はPNGです。今回JPGでないとダメなのか?とも考えてて、
ファイル形式変換(PNG→JPG)もやってました。(結局はこれは必要なかったです(笑))

PNG/JPGどちらでもOKです。

※1この吹き出しに使うファイルは、WordPressのメディアでアップロードしましょう。
※2このファイルはの格納先URLを「メモる」上記黄色のマーカ部分です。フルパスです。

では、これで現在非公開中にしている記事を修正して、近日中にアップします(笑)。

それからGoogleさんに再度検証してもらいます。

 

ここまでたどりついて、落ち着くと(先が見えると)遠回りしてるなぁ

でも、それでもできた(目標達成)ことは、これからトライする方、同じ悩みを偶然に持っているあなたに、ピンポイントで伝えられますよね。(笑)

 

では、おやすみなさい。

最後まで、お付き合い頂いてありがとうございました。

最新情報をチェックしよう!
スポンサーリンク