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

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

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

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

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

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

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

デベロッパーツールで画像のリソースが切れていないか確認する方法

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

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

2.アナトミーで画像が表示されない時に確認する方法

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

1.[ プロパティ ]をクリック
2.[ リソース切れ ]ボタンをクリック
3.リソース切れが起きているページはタイルが赤くなる
アクセス解析ツール「アナトミー」ではサイト内でリソース切れが起きているページを確認することができます
4.メニューをクリックし[ ページリソース閲覧 ]をクリック
アクセス解析ツール「アナトミー」では画像のリンク切れが起きている箇所を確認することができます。
5.詳細情報ページの[ リソース ]をクリック
6.リソースが切れている画像ファイルにエラーアイコンが表示される
アクセス解析ツール「アナトミー」では画像のリンク切れが起きている箇所を確認することができます。

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

まとめ

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

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

【無料ウェビナー】アクセス解析の基本が分かる!

アクセス解析とは画面の改善をすること

アクセス解析はデータを見ることではなく、データに基づいて画面の改善をしていくことです。

このセミナーでは基本的なアクセスデータの見方から、データに基づいた画面の改善方法を学ぶことができます。

web改善に必要な6つの施策

セミナー詳細はこちら

参加者の声

参加者の声

今までとは違った角度で自社のwebサイトを見られてよかったです。

参加者の声

テンポよく、的確な説明で分かりやすかった。重要ポイントについても強調され、頭に入った。

参加者の声

私のような素人でも問題なく参加できました。

SEO関連の記事はこちら

Page Top