ウェブサイト/ウェブサービスではリンクが正しく張れているかの確認は大事です。せっかくユーザがリンクを踏んだのに 404 になってしまってはユーザ体験を大きく損なってしまいますので。
数ページ程度のサイトなら手動でテストすることも可能ですが、多数のページを抱えるサイトでは手動では限界があります。ローンチ時は人海戦術でなんとか手動確認できても、長らく運営している間にコンテンツの更新が積み重なるとリンク切れの場所も多々でてくるでしょう。
ということで、リンクチェックを自動的に行う方法についてまとめてみます。
リンクの種類
まず最初にリンクにはどのような種類があるのか整理しておきます。
a href
リンクと言って一番最初に思いつくのが a タグの href 要素です。リンクターゲットをクリックすることで href 要素で指定されたリンク先に遷移します。
リンク先にはサイト内リンクと外部サイトへのリンクがあります。また、ページ自体へのリンクと id リンクがあります。ページが存在してターゲットの id が存在しない場合、通常はページの先頭を表示しますが、これは 404 などのエラーにならないですがユーザ体験は損なっています。404 エラーを発生しない分、検出が困難でもあります。
a タグが最初から HTML に書かれている場合と、JavaScript によって動的に生成される場合があります。一般的に後者のリンクチェックは難易度が高くなります。
リソース
img src による画像、js や css ファイル、css ファイル中で指定される画像などです。
a タグと同様、HTML に書かれている場合と、動的に生成される場合があります。
動的処理によるページ遷移
JavaScript で処理した結果、location.href で別ページに遷移するものです。
外形チェック型
サイトに対して網羅的にチェックするのではなく、本番環境を運用している間に結果的に発生した 404 を検出する方法です。すべてのリンク切れを発見することはできませんが、一方で JavaScript で動的に生成されるリンクでもチェックが可能です。
アクセスログ
ウェブサーバのアクセスログから 404 を返したものを調べる方法です。現実のアクセスログにはアタックの痕跡などノイズも多数残されていますので、それらを除去する必要があります。
原理的に全てのリンク切れを検出することは困難ですが、検出できないリンク = ユーザがめったに踏まないリンクだから軽視して良いという考え方もありだと思います。
Google Search Console
Google Search Console のカバレッジでは、404 を含む様々なエラーを検出することができます。Google のクローラがアクセスした結果ですので、ある程度網羅的なエラー検出が期待できます。Google クローラも最近は簡単な JavaScript なら実行してくれるそうなので、動的処理のリンクも少しはカバーされると期待できます。
欠点としては、Google のクローラが一巡するまでは結構な時間がかかるということです。特に新規のサイトや規模が小さくて Google から重要でないと判断されているサイトはクロール頻度が低くなり、より多くの時間が掛かります。
ブラウザの開発ツール
例えば Chrome のデベロッパーツールでは、Network タブで読み込んでいるリソースと読み込み状況を確認できます。ページ単位でのチェックなのでサイト全体を調べることはできませんが、方法の一つとして覚えておきたいです。
静的解析型
静的に生成された HTML の場合、静的解析でリンクチェックを行うことができます。
孤島発見器
孤島発見器 は Windows 上で動作する静的リンクチェッカです。個人的に長らく愛用していたツールです。最終更新日が 2001年4月26日と古いのですが、Windows 10 でも動作します。ページ内リンクにも対応している優れものなのですが、name 属性のみで id 属性に対応していません。時代的に仕方がありませんが。
linkchecker
宣伝になって恐縮ですが、拙作の linkchecker も同様のツールです。コマンドラインで動作しますので、CI に組み込むこともできます。
ウェブサービス型
フォームに URL を入力するとリンクをチェックしてくれるウェブサービスがあります。W3C Link Checker などが代表的です。
ウェブサービス側からアクセスできなければならないため、必然的にチェック対象は本番環境になり、ステージング環境やローカル環境は対象外になってしまいます。
リンク先のページを再帰的にリンクチェックしてくれますが、再帰深さが制限される場合もあります。
実質的にクローリングを行うわけですので、アクセス間隔は適切に取られます。結果的にサイト全体をチェックするのにかなりの時間がかかります。
ウェブサーバ動作型
実際にウェブサーバを動作させてチェックを行う方法です。ウェブアプリもチェック可能ですし、開発環境やステージング環境などの閉じた環境でもチェック可能です。もちろん本番環境に対してチェックを行うこともできます。
CUIから実行できるリンクチェッカーの比較 では2つのリンクチェッカが紹介されていますし、wgetでWebサイトのリンク切れをチェック では wget コマンドを使う方法が紹介されています。Windows や macOS 上で動作する GUI アプリもあります。
動的生成に対する対応
静的解析型、ウェブサービス型、ウェブサーバ動作型のいずれにも言えることですが、JavaScript で動的に生成されるリンクや動的処理によるページ遷移への対応は困難です。究極的にはリンクチェッカ側で JavaScript を動作させるしかないわけで、Selenium でテストスクリプトを書くなどの対応が考えられます。