ページ内のリンクでリンク切れを起こしているエレメントを自動判別するスニペット

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

WEBページを作って運用する時に、CMSのツールを使っていると、サイト内部のリンク切れは、自動で処理されて表示されないようにしてくれる機能があるけど、
 

外部サイトのURLをリンクした時に、そのリンク先がなくなっている場合などは、リンククリックしたユーザーが残念な思いをするだけです。
 

昔からリンク切れ検知ツールっていくつもあるけど、リアルタイムクローリングしているようなサイトじゃないと最近はあまり見かけなくなりました。
 

とりあえず、簡単なソースコードでツール化してみたので、使いたい人はお試しあれ。

機能概要

外部リンク表示

サイト内リンクは、そのままで、外部リンクは、外部リンクアイコンを表示。
 

表示しているURLとリンク先のhostnameを判定してます。
 

リンク切れ表示

レスポンスステータスが「200」番以外は、リンク切れ判定にしてます。
 

ローカルPHPで処理してます。
javascriptでは、クロスドメイン制約がありどうしても突破できないので、ローカルphpを一つ設置する方式にしてます。
 

ソースコード

その他画像など

※画像は、FREEの物を適当にDLしてお使いください。
icon finder
 

画面イメージ

スクリーンショット 2018-02-17 20.50.22
 

今回は、少し手抜きをして、デモページを作っていません。
 

画像で勘弁ください。
 

リンク切れと、外部リンクの右側に、アイコンが表示されているのが分かりますか?
 

最近こうした気の利いたUIのサイトもたま〜に見かけるようになりましたが、こうした小さなおもてなしができるWEBサイトが、知らない間に使いやすいサイトという事なんでしょうね。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です