目次
はじめに
Webサイトを制作するにあたって、絶対に避けて通れないモノ、それは納品前のチェックです。
W3CでのHTMLチェックやレスポンシブの崩れ確認など、チェックしなければならない項目は多岐に渡りますが、その中でも重要なチェックの一つにリンクチェックがあります。
ボタンや画像をクリックした際に、クライアントが希望した通りのリンク先が設定されているか、hrefが#のままになっていないか、実際のリンク先のページは404エラーが出ていないか等、その重要性は計り知れません。
しかし、制作するサイトの規模によっては相当数のリンクを実装することもあり、手作業で全てのリンクを確認しようとすれば、ほぼ確実にチェック漏れが出てしまうかと思います。
そんな時にぜひオススメしたいのが、今回ご紹介する無料アプリ「Integrity」になります。
Integrityは「リンクの設定やリンク先のページがきちんと機能し・表示されているか」をチェックするアプリであり、リンクチェックの手間や時間、そしてチェック漏れを大幅に削減してくれる、サイト制作の心強い味方となってくれる存在です。
この記事で、今後のリンクチェックにIntegrityをお役立て頂ければ嬉しいです！
インストールはこちらから！
主な使い方
こちらがIntegrityの画面になります。
主な操作方法は以下の通りとなります。
1. Settingsタブで、チェックしたいURLをStarting URLに入力する
(今回は仮にYahoo! JapanのURL)
2. 下のOptionsで、チェックの詳細を設定する。
・This page only
パス(https://www.yahoo.co.jp/)の1ページ上のリンクだけをチェックする
(特定のページを急いでチェックしたい場合は特にオススメです)
・Check for broken images
画像ファイルへのリンクが切れていないかチェックする
・Check linked js and css files
JavaScriptやCSSファイルのリンク切れをチェックする
・Check for urls within other meta tags
他のmetaタグ内のURLをチェックする
・Check anchors (index.html#go)
アンカーをチェックする
・Flag missing link url (href=”#” or href=””)
リンク先のURLがなければフラグを立てる (href=”#” or href=””など)
・Archive site while scanning
スキャン中にサイトをアーカイブ化する( HTMLファイルをローカルに保存する)
3. 画面右上の「Go」をクリックし、完了するまで待つ
※サイトが大規模の場合、30分程かかる場合あり。
チェック後の画面
こちらがチェック後の、「By Status(ステータス順に並べる)」タブの画面になります。
(参考のためローカル環境の別サイトのファイルをHTTPサーバーでアップしたURLになります)
リストには、どのHTMLファイル上(左から三番目、Appears on)から、
どのURLへのリンク(左から二番目、URL)で、どのようなステータスになっているか(一番左、Status)、という形で表示されています。
ちなみに、一番右の「Link Text」はタグ内に書かれている文字が表示されます。
(例: aタグ内の文章がテストなら「テスト」と表示)
Statusの内、特に重要な404エラーは赤で色付けされており、
hrefにURLが正しく入力されていない、#や空欄のままになっている、正しく入力されていてもリンク先が表示されていない、といった状態にある事を示しています。
更に、画面一番右上にある「Bad links only」というボタンを押すと、リンク切れのみが抽出される(上記の画面だと404エラーのみになる)ので、より修正がしやすくなるかと思います。
そして上記にある通り、テスト環境などで実際にアップされているサイトだけでなく、ローカルでHTTPサーバーに仮アップしたサイトに対してもチェックが可能です。
このチェック結果を参照する事で、どのHTMLファイル上でリンクのエラーが起きているかを確認し、該当箇所の修正を迅速に行えるかと思います。
使用上の注意
ただし、Integrityの使用にあたってはいくつか注意点があり、
その対応方法についてもご紹介したいと思います。
1, Basic認証が実装されているサイトはチェックできない
IntegrityはBasic認証に対応していないため、Basic認証つきでアップされたサイトはチェックできないようになっています。
解決策としては、FTPで対象のサイトのファイルをローカルに作業用としてダウンロードし、VSCodeのターミナルでhttpサーバーを立ち上げることで、通常サイトと同様にチェックが行えます。
2, ヘッダーやフッターが別々になっているとチェックしてくれない
ヘッダーやフッターといった共通部分を、メインコンテンツとは独立したHTMLファイルに記載し、JSなどを使って自動表示する実装は多いかと思います。
(header.html + index.html + footer.htmlといったイメージです)
Integrityがチェックする対象はURLに記載されたサイトとそのページにあるリンク先のみのため、上記のように独立したHTMLファイルはチェックの対象外となってしまいます。
しかし上記の場合は、独立したファイルのパス(~/header.htmlなど)を追記することで同様にチェックが可能となります。
上記に加えて、何より重要な注意点になるのが、
Integrityはあくまで「リンクの設定やリンク先のページがきちんと機能し・表示されているか」をチェックするアプリであり、「クライアントが指定した通りのページがリンク先として表示されているか」をチェックすることはできない、という点です。
つまり、本来のリンク先(仮にリンクA)とは違うリンク先(仮にリンクB)が設定されていた場合でも、リンク先がきちんと表示されていれば「異常なし(200)」と判定してしまうため、こればかりは最初の段階でリンク先の設定を間違えないこと、最終的には目視での確認等が肝要となります。
まとめ
以上のように、Integrityはリンクチェックの全てをサポートできるわけではありませんが、
大量のリンクチェックを一度に高速で行ってくれる為、リンクチェックの手間や時間、そしてチェック漏れの危険性を大幅に削減してくれる事は間違いありません。
Integrityをまだ知らないという方は是非、今後のチェック時にお役立てください！
参照記事
