画像が表示されない時に、リソースが切れていないか確認する方法

ページ内の画像が表示されていなかったことに、なかなか気づかなかったということはありませんか？

ここでは、どの画像のリソースが切れているか見つけることができるツールを紹介します。

デベロッパーツールで画像が表示されない時に確認する方法

画像が表示されない原因として、imgタグの記述方法が間違っていることがあります。Google Chromeのデベロッパーツールを使うと、どの画像のリソースが記述の不備で切れているのか分かります。

画像が表示されていないページを開き、Windowsなら「F12」キーを押します。(Macなら⌘ + Opt + I)

するとConsoleタグ部分に該当のリソースが表示されます。

該当のリソースが分かったら、パスの表記が間違っているのか、拡張子が間違っているのか、画像のファイル名が間違っているのかを確認してみてください。

この方法は目視で気づいた場合有効ですが、そもそも画像が表示されていないことを見落としている場合は以下の方法をお勧めします。

弊社のアクセス解析ツール「アナトミー」でも画像のリソースが切れていないか確認できます。「アナトミー」はアクセス指標やユーザー動線など解析に関する情報だけでなく、ページの画像やCSSなどのリソース情報も持っています。

これだけで、どの画像のリソースが切れているのか確認できます。そしてアナトミーは週次で更新しているので、毎週自動でリソースが切れていないか確認できるようになります。これでなかなか画像が表示されていなかったことに気付けなかったということはなくなります。

リンク切れが起きていたり、画像が非表示になっているなど、ページが正しく表示されないと離脱率も上がってしまいます。ページの品質を上げることもアクセス解析においては重要です。ぜひアナトミーを使ってページをメンテナンスしてみてください。

もしも、気になるページの計測がうまくいかない、などGoogleアナリティクスの設定に関して懸念点があれば、Googleアナリティクスの設定状況が診断できるサービスも含まれていますので、合せてお試しください。