AMPで画像が表示されない原因が、画像系プラグインだった話

この記事のURLとタイトルをコピーする
ブログの疑問・解決

これは、困りました...AMP ページで、画像が表示されないんです。

ブログ歴も 10 年以上になってわたしも、AMPの対応には日々全力投球です。笑

今回起こった問題は、「AMPの画像が表示されない」という稀な事象です。症状は、こんな感じ↓


Blog ampimage nodisplay1

AMP でリンクをひらくと、画像の部分にまず代替えの画像が表示されます、しばらくすると、読み込みが失敗して画像ばがまっしろになるんですよ。

このままだと、画像で説明している記事が、読んでくださった方の悩みを解決することができません。

早急にこの問題を対応するべく、動いてみました。

というわけで今回は、AMPで画像が表示されない原因を、探ってみいました。

【原因】Accelerated Mobile Pages(AMP)で画像が表示されないワケとは?

結論から申しあげますと、AMP で画像が表示されない原因は、画像系プラグインの「EWWW Image Optimizer」でした。

「EWWW Image Optimizer」は、画像を軽量化してくれたり、画像を WebP に対応してくれるすばらしい画像系プラグインなんです。

今回の原因となってしまったのも、わたしの WordPress 環境で起こった限定的なものかもしれません。ただ、プラグインをオフにすると↓


Blog ampimage nodisplay2

ちゃんと、AMP ページで表示されるようになるんです。

管理人
管理人
謎です...

わたしの環境では、「AMP for WP」というプラグインで、AMP に対応しています。相性の問題かもしれませんし、アップデートの一時的な問題かもしれません。

今回の記事は、「EWWW Image Optimizer」の使用を制限するものではないことを、ご理解いただけましたら幸いです。

あくまでも、ひとつの解決策の提示ということで読み解いていただけますと、嬉しいです。

どうして原因のプラグインに、気がついたの?

気が付いた理由は、プラグイン機能を「オン/オフ」を試したからです。

AMP ページで、記事の画像が表示されないことに気がつき、いろいろと解決策を試しました。

  • CSSが原因か?
  • AMP for WP プラグインの設定が原因か?
  • サーバーの問題か?
  • ...など。

最終的に行き着いたのが、プラグインでした。プラグインの相性などが悪さをして、ブログの画像表示に影響しているというのは、よくある話ですからね。

プラグインのオンオフを試していたところ、「EWWW Image Optimizer」をオフにした瞬間...AMP のブログ画像が表示されたので、今回の問題の原因と結論づけることができました。

じつは、Accelerated Mobile Pages(AMP)ページの表示のさせ方によって画像が表示されたりしていた

AMP ページの画像が、表示されたりされなかったりという症状がありました。

どういうことかというと?
  • AMP ページの画像が表示されない:iPhone の「Safari」「Chrome」で、自分のブログ記事の URL に「/amp」を加えて閲覧
  • AMP ページの画像が表示される:検索エンジンから自分のブログの記事をiPhone の「Safari」「Chrome」で閲覧

これには、ほとほと困りました。表示されるときと、表示されないパターンが健在しているんですから。

AMP は、キャッシュで表示されているわけなので、そのあたりが原因追及に頭を悩ませてくれましたよ。笑

AMP の仕組みついては、株式会社アーティス様の記事が参考になります。気になる方は、こちらをどうぞ↓

【参考】AMPって何?仕組みを知って快適にページを閲覧しよう : ビジネスとIT活用に役立つ情報

設定の問題じゃないの?

ここまでくると、「EWWW Image Optimizer」の設定をかえればいいんじゃないか?って思いますよね。

さいしょは「WebP」関連の項目かな?とも思って、設定をすべてオフにしました。それでも、AMPで画像が表示されませんでした。

ほかの項目もいろいろいじったのですが、AMP を表示させるための問題にいきつくことができませんでした。できたら、「EWWW Image Optimizer」の機能をオンにしたままにしたいんんですが...心苦しいですorz

Accelerated Mobile Pages(AMP)で画像を表示されるための一時的な対処方法

AMP で画像を表示させるための対処法は、プラグイン「EWWW Image Optimizer」をオフにすることです。

ほんとうは、WebP に対応したいので、「EWWW Image Optimizer」をオフにしたくないのですが...オフにしないと、AMP の画像が表示されないので、仕方がないですね。汗

苦渋の選択です...涙

Accelerated Mobile Pages(AMP)テストで、構造化もあわせてチェック!!

作業をおえるまえに、AMP テストをチェックしておきました。

AMP 記事の画像が表示されないとわかった時点で、AMP テストしておいたのですが問題はありませんでした。

ただ、プラグインをオフにしたのと同時に、CSS のデザイン崩れもあわせて直しておいたので、エラーがないか改めて AMP テストしてみました。作業後も「有効な AMP ページです。」となったので、一安心。

もし、わたしと同じ状態になったかたがおりましたら、作業のおわりに必ず AMP ページのテストをしておいたほうがいいですよ。

わりとルールがシビアなので、何かしたらチェックしたほうがいいです。そのぶん、ユーザーが即座にページを閲覧できるメリットはおおきいので、わたしは AMP をおすすめしています。

お試しになる方は、こちらをどうぞ↓

【AMP テスト - Google Search Console】
https://search.google.com/test/amp?hl=JA

Accelerated Mobile Pages(AMP)で画像が表示されない問題を、経過観察していきます!

プラグイン「EWWW Image Optimizer」のアップデートを含めて、経過を観察していきます。

おかしいと気づいたのは、スマホでAMPページを見ると、画像が真っ白もしくは、代価画像になっていたためでした。ちなみに、パソコン・PC で AMP ページを表示したときはちゃんと画像が表示されるので、注意が必要なんですよね。

AMP ページに対応しているブロガーは、AMP に対応したらスマホでしっかりチェックすることを、お忘れなく!!

あとがき

AMPで画像が表示されない原因について、記事にまとめさせていただきました。

まさか画像系プラグインが原因だったとは...ひじょうに残念ですが...

「EWWW Image Optimizer」は使いたいプラグインのひとつなので、今後も定期的に機能をオンにして根本的な解決策を考えていきたいと思います。

なんとか、ならないかなぁ〜?っと日々あたまをひねっております。悩

それでは、今回はこの辺で!!わたしの悩みが、あなたの問題解決に役立ちましたら幸いです。

そのほか、ブログの悩みなどまとめた記事は、こちらをあわせてどうぞ↓

【関連】ブログ記事まとめ | サウンドテック・ラボ

関連する記事

この記事のURLとタイトルをコピーする
記事へのお問い合わせ