picoでオリジナルの404ページを作成する

Last-modified: Wed, 03 Sep 2014 05:25:06 HADT (1810d)

404ページについて

 リンクミスやアドレスの打ち間違い、ページ削除などによって404エラーが出たときに表示される。普通は白い画面の左上に

Not Found

The requested page or files was not found on this server.

 ↑こんな風にあっさりしたメッセージが出るだけだが、.htaccessで指定することによってオリジナルの404ページを作ることも可能である。ロリポップのサーバは利用者が多いので、エラーページを見たことある人も多いだろう。

lolipop.png

 オリジナル404ページの.htaccessでの指定例

ErrorDocument 404 ここにアドレス(URI、絶対パス、相対パス)

↓

ErrorDocument 404 /404error.html

参考サイト

 「ページが見つかりません」ページのカスタマイズ

picoでページを作成する

 うちの本家ではpicoで404ページを作成した作った。picoはメールフォームが使えるので、それをうまく利用すればなにがどうなって404ページに辿り着いてしまったのかというフィードバックを得られる可能性があるからだ。イメージ的にはFirefoxがクラッシュしたときのクラッシュレポートに近い。

clash.png

 更にGoogleウェブマスターツールというサービスに登録し、404ウィジェットというJavaScriptを組み込んだ。これはタイプミスなどによって存在しないページにアクセスしたとき、実際にGoogleにインデックスされているページと比較し、「もしかして、あなたがアクセスしようと思っていたページはこれですか?」と候補を表示してくれるものだ。

404.png

 上にあるのはうちの本家のZEROの法則というコンテンツにアクセスしようとして表示された404ページだ。本来はzero.htmだったのにzeru.htmというアドレスにアクセスしようとしたので、404ウィジェットが「その他のヒント」に正しいアドレスを表示してくれている。

参考サイト

 効果的な404ページを自動生成してくれるGoogleの『Custom 404 pages』 - IDEA*IDEA ~ 百式管理人のライフハックブログ


[PR]