Chromeのデベロッパーツールで404エラー?|デザイナー、コーチ、ディレクターズメモ|井川igawa.

Memo

Chromeのデベロッパーツールで404エラー?

デベロッパーツールで404エラー?

Chromeのデベロッパーツールで404エラー?

パスにもファイルにも問題ないのに404エラー?

デベロッパーツールのコンソールに不明なパスによるエラー。

デベロッパーツールに不可解な404エラー

前々から気にはなっていたが、作業時間を取られてしまうので無視していた、Chromeのデベロッパーツールのコンソールに出ていたエラー。

ありえない404、かつSEOにも表示にも関係のない画像ファイルに対するものなので放っておいた。一応パスを確認したが問題はなく、当然その場所にファイルは存在している。その証拠として、ページには普通に表示されているのだ。


デベロッパーツールの検証。

気になるので、とにかく原因を調べる。

以下、検証結果です。↓

HTMLのパスには問題はない。
パスを確認するが問題ない。

サーバーのディレクトリにも間違いなく画像ファイルはある。

ディレクトリも確認するが画像は存在している。

Chromeで(デベロッパツールではなく)ページソースから見ると問題なし。
ChromeのView Page Sourceでも問題なし。


一体なにがどうなっているのか?

最近あまりにも多く画像に関する不可解な現象が出ていたので、腰を入れて原因を調べてみた。自分のミスなのか、使用ツールやサーバーの問題なのか。そこが分からないと、次の仕事に進むことができないのだ。

検索してみたが、ネット上ですぐには情報が見つからなかったので、原因切り分けのため、自己検証してみた。その結果は、、、

デベロッパーツールとテンプレートタグ。

どうやら、Chromeのデベロッパーツールの仕様が原因だ。画像スライド用のJavaScriptのコードを利用していて、かつWordPressのテンプレートタグである「get_template_directory_uri()」を使用している画像のパスを認識できていない様子なのだ。

WordPressのテンプレートタグ

※「link rel=”preload”〜」はページの読み込みを少しでも速く、という記述。今回の件とは無関係。

CSSの相対パス。

そして、cssファイルの相対パスも認識できていない模様。
cssファイルの相対パス
cssファイルの相対パス

こちらはJavaScriptは関連しておらず、単なる背景画像(backgroundプロパティの一括指定)。
※スタンダードなstyle.cssで指定している画像パス(background: url(common/img/bg_from_nipponcolors_texture.png)が認識されていない。


JS + WPテンプレートタグと、CSSファイルの相対パス。

パスが認識されていないことが原因としか。

JavaScriptはもしかするとコードのバグ的問題なのかもしれないが、WPの「get_template_directory_uri()」や「cssの相対パス」は別に目新しいものではないし、むしろ何年も前から推奨されている単純な書き方だ。IEでのエラーならまだわかるが、それがまさかChromeで起こるのは意外だった。

YouTubeの埋め込みコードでもエラー。

念の為以前制作した他のサイトでも確認してみたが、YouTubeの埋め込みコードでも同様に404エラーが出ていた。今回はFirefoxやSafariでは検証していないが、ChromeはGoogle製で、YouTubeはずっと前にGoogle社に買収されているはずなので正直驚いた。
JavaScriptが絡むといまだにエラーが多い。

がんばれGoogle

ちなみにYouTubeの埋め込みコードは、GoogleのPageSpeed Insightsで確認すると、ものすごい数のエラーが出る。その上スマホが普及した現在は動画再生の際の使用ギガ数などの問題もあるのか、あまり推奨されていないような雰囲気だ。「target=”_blank”」も問題視されているようだが、サイトのトップページにあるYouTubeは例外として、別タブで開くようにした方が無難なのだろう。


結論。

今回の件は、もしかしたら記述を絶対パスに変えると解決されそうではある。ただしそれではWordPressのテンプレートタグの意味がなくなってしまうし、cssファイルに絶対パスを指定するというのもちょっと納得がいかない。サイト制作者としては普通そう思うだろう。

クライアントさんによってはエラー表示を気にしそうなのが難点だが、とりあえずSEO的には問題なさそうなので、このままにしようと思う。実際、W3Cのバリデーターでも問題はなく、ブラウザでの表示も普通にされており、検索結果でも上位にいるのだから。

後日追記。

1年ほど経過したが、SEOの結果としても全く問題はない。地域名 + ビッグキーワード(かつ複数)で、常に1ページ目(大体5〜6位前後)にいる。(MEOでは1位。)

以下、1年前と現在の比較として。

1年前:

デベロッパーツールに不可解な404エラー

現在:

Chromeのデベロッパーツールでエラー?

Chromeのデベロッパーツールでエラー?

エラーの数が減ることもある。(すべてサイトが読み込まれた最初の表示段階のスクショ。)

1年前:

ChromeのView Page Sourceでも問題なし。

現在:

ソースを見ると全く問題ない。

ページソースから見るとパスなどは問題なし。(スライダーの画像は一部WebPへ差し替えている。画像数は4枚で変わらず。)

再度、結論。

やはり、ブラウザ表示にもSEOにも問題がなかった。なのでこのエラーに関しては特別に対処する必要性は低いと思われる。

以上、ご参考になれば。


疲れた時は、栄養を。
ポスト投函で届く、人気のブドウ糖です。
砂糖の代わりにコーヒーや紅茶などに。

Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材、購入素材、もしくは自前のものを使用しております。

井川 宜久 | Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    Name(required)お名前 (必須)
    Furigana(required)ふりがな (必須)
    Email(required)メールアドレス (必須)
    Phone Number(required)電話番号 (必須)
    Message(required)ご質問・ご要望 (必須)


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、私はただの人間です。万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。