broken-link-checker でデッドリンクを検出する

broken-link-checker という npm パッケージで、指定の URL から遷移できるリンクや画像にリンク切れがないか簡単にチェックできたので紹介。

パッケージをインストールする

まずはパッケージをインストールする。

$ npm install broken-link-checker -D

HTML ファイル・簡易サーバを用意する

リンクをチェックする対象は URL で指定しないといけないので、ローカルの場合は browser-sync など適当なツールを使って簡易 Web サーバを立て、URL を用意しないといけない。

ココでは browser-sync を使って http://localhost:3000/ に簡易サーバを立てたとする。

…と、試しにこのような HTML ファイル2つと PNG 画像1つで構成されている。index.html の not.html のリンクが切れていること、test2.html の none.jpg という画像が存在しないことを検知できれば良いことになる。

npm-scripts を用意する

broken-link-checker を実行するため、package.json に以下のような npm-scripts を用意する。

"scripts": {
  "blc": "broken-link-checker http://localhost:3000/ -ro"
}

broken-link-checker コマンドのエイリアスとして blc も用意されているので、blc http://localhost:3000/ -ro としても良い。

-r は --recursive、-o は --ordered の略。リンク先のページのリンク先へと掘り下げて調査させるために付与するオプション。他にも --exclude 指定や、外部リンクを無視する --exclude-external などのオプションがあるので、blc --help で確認しておこう。

簡易サーバは立ち上げたまま、実際に broken-link-checker を実行してみる。

$ npm run blc
> Test@1.0.0 blc /Users/Neo/Test
> broken-link-checker http://localhost:3000/ -ro

Getting links from: http://localhost:3000/
├───OK─── http://localhost:3000/test2.html
└─BROKEN─ http://localhost:3000/not.html (HTTP_404)
Finished! 2 links found. 1 broken.

Getting links from: http://localhost:3000/test2.html
├───OK─── http://localhost:3000/index.html
├───OK─── http://localhost:3000/img.png
└─BROKEN─ http://localhost:3000/none.jpg (HTTP_404)
Finished! 3 links found. 1 broken.

Getting links from: http://localhost:3000/index.html
└─BROKEN─ http://localhost:3000/not.html (HTTP_404)
Finished! 2 links found. 1 excluded. 1 broken.

Finished! 7 links found. 1 excluded. 3 broken.
Elapsed time: 0 seconds

…このとおり、リンク切れの HTML ファイルや画像には BROKEN の表示がされている。

test2.html から index.html に戻れるため、再度 index.html が探索されているが、探索済みのページのリンクは executed と出力されている。

リンク切れを修正してみる

index.html と test2.html を修正して、リンク切れを直してから再実行してみる。

$ npm run blc
> Test@1.0.0 blc /Users/Neo/Test
> broken-link-checker http://localhost:3000/ -ro

Getting links from: http://localhost:3000/
└───OK─── http://localhost:3000/test2.html
Finished! 1 links found. 0 broken.

Getting links from: http://localhost:3000/test2.html
├───OK─── http://localhost:3000/index.html
└───OK─── http://localhost:3000/img.png
Finished! 2 links found. 0 broken.

Getting links from: http://localhost:3000/index.html
Finished! 1 links found. 1 excluded. 0 broken.

Finished! 4 links found. 1 excluded. 0 broken.
Elapsed time: 0 seconds

今度はエラーにならずに全てのリンクが OK となった。

画像のリンク切れもチェックできるのが素晴らしい。かなりサクッとリンク切れがチェックできるので使っていきたい。