TIPS

12.16.2014
vol.6

オリジナルの404ページにしよう

オリジナルの404ページにしよう

こんにちは。デザイナーの寺田です。
今回は404(Not Found)ページの実装方法についてお話しします。
エラーページなので、本来は表示されてはならないページですがふとしたタイミングで見たときに
404ページがオリジナルだとサイトの印象が良くなりませんか?
前回のvol.5 FAVICONとWEB CLIP ICONの実装と同様、忘れずにやっておきたいです。


そもそも404ページとは?

404ページの役割

404ページの役割


404ページは、WEBサイトにアクセスする際にリンク切れなどで存在しないページにアクセスしようと
した場合に、表示されるエラーページのことです。
Webサーバーからのレスポンスの意味を表す3桁の数字が404とされているため、
404ページと呼ばれています。


意外と見られている!?
404ページデザイン

意外と見られている!?404ページデザイン

404ページデザインの参考サイト


404ページデザインをまとめているサイトです。
デザインの参考にしてみてはいかがでしょうか。
404design:http://404design.org/


エラーページを実装しよう

実装しよう

.htaccessに記述


実装のやり方は2つあります。まずは.htaccessに記述するやり方から。
404ページ用のHTMLを作成します。
ファイル名は任意でかまいません。ここでは「404.html」とします。

「404.html」のファイルを「index.html」が置かれているディレクトリへアップロードします。

次に「.htaccess」の名前でファイルを作成します。
そのファイルに下記を記述します。
ErrorDocument 404 /404.html
以上です!


HTMLファイルを作るのは難しい方は...

Googleのウェブマスターツールを使おう!

Google ウェブマスターツールを使おう


Googleのウェブマスターツールが提供している404ウィジェットコードを貼付けるだけで、以下の2つをページに追加することができます。

・サイトの検索ボックスと検索の候補を表示します。
・間違った URL に対する URL の候補を表示します。

下記のコードを使えば、追加することができます。
貼付ける場所は<body>タグの中に入れましょう。


<script type="text/javascript">
var GOOG_FIXURL_LANG = 'ja';
var GOOG_FIXURL_SITE = 'http://サイトのURL'
</script>
<script type="text/javascript" src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>

Googleのウェブマスターツール
404ページのカスタマイズ:https://support.google.com/webmasters/answer/136085?hl=ja

  • CATEGORY
  • カテゴリ
  • RECENT POSTS
  • 新着TIPS
  • RANKING
  • ランキング
  • ARCHIVES
  • アーカイブ
2015
December(2)
November(2)
October(1)
August(2)
July(3)
April(1)
March(7)
February(3)
January(8)

お仕事の依頼やご相談

企画・編集、情報設計、デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。

オンライン見積もりフォーム

さまざまなブランディング事案に対応します。
お気軽にご依頼ください。