firebirdテックトーク

ウェブサイトを運営していると、避けられないのが「404 Not Found」エラーです。特に、HTMLソースを調べても原因となるリンクが見つからない場合、問題は非常に根深く、対応は困難を極めます。

しかし、Google Analytics 4（GA4）の強力な機能「経路探索」を使うことで、ユーザーがどのページから404エラーページに遷移したのかを視覚的かつ確定的に特定できます。これにより、問題のリンクがどのページに、どのような状況で存在しているかを絞り込むことができます。

1. 分析の目的と事前準備

目的

今回の分析の目的は、GA4のログに残る特定の404エラーURL（例: /archives/2025年9月/）に対し、そのクリックを発生させた**直前のページ（ノード）**を特定することです。直前ページが判明すれば、そのページ上のどの要素（サイドバー、フッター、JavaScriptウィジェットなど）が壊れたリンクを出力しているのかを突き止めることができます。

前提条件の確認

GA4で404エラーページを正確に追跡するには、ウェブサイト側の404ページ（例: /404.html）の <title> タグ、または <h1> タグに「404 Not Found」や「ページが見つかりません」といった固定のキーワードが設定されていることが重要です。これにより、GA4がエラーページを一つのグループとして正確に認識できます。

2. GA4「経路探索」の設定手順

GA4の左メニューから以下の順序で機能を開きます。

レポート > 探索 > 経路探索

ステップ1: 開始ポイント（404ページ）の設定

経路探索レポートを開いたら、デフォルトの開始ノードを、特定したいノードに切り替えます。

1. 「ステップ 1」の鉛筆アイコンをクリックし、ディメンションを「ページタイトルとスクリーン名」に変更します。
2. 表示されるリストから、あなたのサイトの404エラーページのタイトル（例: 404 Not Found）を選択し、開始ポイントとします。

これにより、分析は**「最終的に404ページにたどり着いたユーザーが、その前にどこにいたか？」**という逆向きのフローとなり、原因を遡りやすくなります。

ステップ2: 404の直前ページパスの特定

次に、404エラーを引き起こした直前のページパスを特定します。

1. 右上の「ノードの編集」ボタンをクリックし、ディメンションを「ページパスとスクリーンクラス」に切り替えて、再度分析を実行します。
2. グラフの「ステップ 2」に表示されたパス（例: /post/tech-article-title/）を確認します。これが、ユーザーが壊れたリンクをクリックした直前のページです。このパスへの流入が最も多いノードが、最も有力な発生源です。

3. 分析結果の活用と動的コンテンツへの対処法

経路探索の結果、直前のページが特定の記事ページ（例: /post/tech-article-title/）であることが判明した場合、以下の点が確定します。

この情報が静的HTMLソースに見つからない場合、問題はほぼ間違いなく動的な要素にあります。

動的コンテンツの調査手順

特定されたページをブラウザで表示し、以下の手順で原因を究明します。

1. 開発者ツールによるDOM検索の徹底:
   • ブラウザの開発者ツールを開き、「Elements (要素)」タブで Ctrl + F または Cmd + F を使い、/archives/2025年9月/ を検索します。この検索は、JavaScriptが実行された後の**最終的なHTML構造（DOM）**を検索するため、動的に挿入されたリンクも見つけることができます。
2. JavaScriptファイルの精査:
   • サイトに組み込まれているカスタムJavaScriptファイル（例: /ts/main.js やクライアントサイド検索用スクリプト）を開き、日付解析 (.Date) やアーカイブ関連のリンク生成ロジックを確認します。
   • 特に、記事の公開日（例: 2025年9月）のようなメタデータを取得し、URLを結合している箇所が、意図せず日本語の月名を含むパス（例: 2025年9月）を生成していないかを確認・修正します。

経路探索は、**「どこ」**でエラーが起きているかを明確にする強力なツールです。この分析結果を基に、問題のページとスクリプトを詳細に調査することで、サイトの健全性を回復できます。