SPAの内部リンク監査で静的HTMLだけを見てはいけない理由｜誤判定を防ぐ確認手順

SPAで作られたサイトを内部リンク監査すると、取得したHTMLにはリンクがほとんどないのに、ブラウザでは関連記事やカードが表示されていることがあります。この差を見落とすと、実際にはつながっているページを「孤立ページ」と判定し、不要なリンク追加や本文修正を始めてしまいます。

結論は、SPAの内部リンク監査では「サーバーが返す静的HTML」「ブラウザで描画した後のDOM」「記事データやsitemap」の3点を分けて確認することです。どれか一つだけをサイト全体の真実として扱わず、リンクが作られる段階と公開URLの在庫を照合します。

なぜ静的HTMLだけでは大量の孤立ページが出るのか

従来型のページでは、サーバーから返るHTMLにタイトル、本文、ナビゲーション、関連記事へのリンクが含まれます。一方、SPAでは最初の応答が共通シェルだけで、記事本文や関連記事をJavaScriptが後から組み立てる構成があります。HTTPでHTMLを取得しただけの監査ツールは、その後に追加されるリンクを数えられません。

実際の週次監査では、388ページを対象にしたところ365ページが被リンク0と判定されました。しかし公開HTMLは各記事固有の内容ではなく、共通シェルに近い応答でした。元データ側には関連記事を作る処理があったため、365件をそのまま実孤立と断定せず、公開変更0件で停止しました。大きな異常値は、修正量ではなく計測方法を先に疑う合図です。

確認面	分かること	単独では分からないこと
静的HTML	初回応答に含まれるリンク	JavaScript後の表示
レンダリング後DOM	利用者が操作できるリンク	元データの全URL
記事データ・リンクグラフ	関連付けの設計	本番で正常に描画されたか
sitemap	公開対象URLの在庫	ページ同士のリンク関係

最初にレンダリング方式を確認する

SPAという名前だけで判断せず、対象ページがCSR、SSR、SSG、または複合構成のどれかを確認します。CSRはブラウザ側で本文を組み立てます。SSRはリクエスト時にHTMLを生成し、SSGはビルド時にHTMLを作ります。URLによって方式が違うサイトでは、トップ、記事、カテゴリ、検索結果を別々に確認します。

• JavaScriptを無効にした時、本文とリンクが残るか
• HTMLソースと開発者ツールのElementsでリンク数が変わるか
• 直リンクで開いた時も同じ内容が表示されるか
• 再読み込み時に404や共通ページへ戻らないか
• canonicalとsitemapが表示URLに一致するか
• 関連記事が記事ごとに変わるか、全記事で同じか

「画面に見える」だけでは十分ではありません。リンクが単なるクリックイベントで、実際のa要素や遷移先URLを持たない場合もあります。レンダリング後DOMでhrefを確認し、キーボード操作、新しいタブ、直接URLでも目的ページへ進めるかを見ます。

レンダリング後DOMで内部リンクを数える

ブラウザ監査では、ページを開いてすぐ数えるのではなく、主要コンテンツと遅延読み込みが落ち着く条件を決めます。ネットワークが静かになるまで待つ方法だけでは、常時通信するサイトで終わらないことがあります。記事見出し、関連記事領域、フッターなど、そのページで必ず現れる要素を待機条件にします。

同じURLをPC幅と390px程度のスマホ幅で確認する理由は、レスポンシブ表示でメニューやカードが非表示になることがあるためです。DOMには残っていてもCSSで操作不能になっていないか、逆にモバイル専用リンクが重複して数えられていないかを分けます。

元データとsitemapを照合して誤判定を切り分ける

レンダリング後DOMでリンクが見えない時は、すぐ本文へリンクを足さず、記事データや関連付けロジックを確認します。元データに関連URLがあり、本番DOMにないなら、ビルド、デプロイ、絞り込み条件、キャッシュ、実行時エラーの問題かもしれません。元データにもなければ、関連記事の設計不足を疑えます。

sitemapは公開対象ページの一覧を把握するために使います。ただし、sitemapに載っていることは内部リンクがある証拠ではありません。反対に、noindexや意図的な限定ページを通常記事と同じ基準で孤立扱いすると、不要な導線を作ります。公開目的、インデックス方針、リンク元候補をURLごとに記録します。

静的HTML	描画後DOM	元データ	判断
なし	あり	あり	クライアント描画。孤立と断定しない
なし	なし	あり	描画・ビルド・配信不具合を確認
なし	なし	なし	実孤立または意図的非接続を確認
あり	なし	あり	JavaScriptやCSSで消えていないか確認

修正は監査方法を確定してから最小範囲で行う

誤判定の可能性がある段階で365ページへリンクを足すような変更は避けます。まず代表的な記事3〜5件で、静的HTML、DOM、元データ、sitemapが一致するか確認します。監査ロジックが正しいと分かってから、検索流入のある記事、重要な製品ページ、ハブ未接続ページを優先します。

1. 対象URLと期待するリンク元を固定する
2. 変更前HTML、DOM、元データ、更新日時を保存する
3. 同じ検索意図の記事がないか確認する
4. ハブまたは関連2〜4記事から自然な戻りリンクを追加する
5. 再ビルドまたは更新後にDOMと公開URLを確認する
6. リンク先HTTP 200、PC/スマホ表示、sitemapを再確認する
7. 変更日と次回検証日を記録する

WordPressの記事で孤立ページを減らす基本は内部リンクが少ないブログの考え方、候補を見つける運用はACS Internal Linksで孤立記事を見つける方法で解説しています。SPAでは、その前段にレンダリング確認を追加してください。

監査結果を改善判断へつなげる

内部リンクは本数ではなく、読者が次に必要とするページへ進めるかで評価します。記事から製品、診断、サポート、関連記事へ役割の違う導線を置き、戻りリンクも確認します。ACS DeveloperではACS Internal LinksでWordPress側の孤立候補を確認でき、サイト全体の技術状態は無料AI診断から点検できます。

よくある質問

まとめ

SPAの内部リンク監査では、静的HTMLだけを見て孤立ページを断定しません。ブラウザで描画した後のDOM、記事データやリンクグラフ、sitemapを照合し、どの段階でリンクが欠けたかを切り分けます。大きな異常値ほど、サイトを直す前に監査方法を検証してください。

描画後DOMでリンクを確認した後のHTTP判定では、404と一時503を分けて正常リンクの誤修正を防ぐ手順も確認してください。