TIPS

2014.12.16
vol.6

WEB

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

vol.6 オリジナルの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>タグの中に入れましょう。

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

  • CATEGORY
  • カテゴリ
  • RECENT POSTS
  • 新着TIPS
  • RANKING
  • ランキング
  • ARCHIVES
  • アーカイブ
2017
October (
September (
August (
July (
June (
May (
April (
February (
January (
2015
December (
November (
October (
August (
July (
April (
March (
February (
January (

お仕事の依頼やご相談

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

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

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