どうも7noteです。404ページは作っておきたい話。

web制作はwebサイトの構成があり、デザインがあってそれをコーディングして公開。基本的にこの流れですが、実際にwebサイトを構成するものには他にも必要なファイルがあります。

・ .htaccess
・ 404ページ
・ robots.txt
・ sitemap.xml
...etc

そしてこの中で解説していきたいのが404ページ。
まずは404についての説明から。

404ページって何？なにかのエラー？

404エラー（Not Found）は、すでに削除されたページや、間違ったURLにアクセスした際に表示されるエラーです。
引用元：https://digitalidentity.co.jp/blog/seo/about-404-not-found.html

このようにユーザーがアクセスしたページが存在していなかった際に404エラーが出ます。
そして、404エラーになった場合に表示させるページが404ページになります。
さらに詳しい話は通信用語満載なので、その辺をもっと詳しく知りたい方はこちら

存在しないページ、404エラーがでた場合に404ページがあるwebサイトなら自動的に404のファイルを読み込み表示してくれます。
404ページを用意していなければ無機質な404が表示されます。

404ページを作ると何がいいのか？メリットは？

404ページを作るメリット

• 404ページがないと無機質な表示だけで「???」となるユーザーもいる
• 404ページにリンクを設置することで、他のページへ誘導できる
• 予期せぬURLやコンテンツへのリンクも404ページが表示されるので安心

こんなところでしょうか。404ページがなくてもwebサイトとしては運用に問題ありませんが、間違ったURLやもう削除してしまった古いページにアクセスされたとしても、404ページから他のページを見てくれる可能性があるのでそれだけでも十分価値があるでしょう。

また近年どんどん凝った404ページを作成するwebサイトが増えてきました。背景としてはSNSの普及があるのかなと思います。ちょっとしたゲームのようなものができる404ページや、クスっと笑ってしまうような404ページを見たユーザーがSNSでシェアすることによって、多くの人の目に止まりサイトにアクセスされることがあります。
SNSで話題になるとテレビなどでも紹介される可能性があるので、膨大な広告費などをかけずとも宣伝になる可能性を秘めている、これが404ページを作るメリットだと考えています。

404ページの作り方

①404.html（404.php） のファイルを作成してコーディングする

※作成時の注意点
cssなどの外部ファイルの読み込みはルートパスの表記で。

<!-- 外部ファイルの読み込みはルートパスで -->
<link rel="stylesheet" href="/css/style.css">

② .htaccessに以下を追加

ErrorDocument 404 /404.html

いろんな企業の404ページ

「google」

「Qiita」

「クロネコヤマト」

https://www.kuronekoyamato.co.jp/ytc/404error.html

「LIG」

まとめ

404ページを作成するデメリットは作成に少しだけ時間がかかってしまう点だけです。
とはいえ凝った404にしなければ20分〜30分くらいでぱぱっと作ることもできるのでデメリットは少ないですね。

それよりも404ページがあることでサイトの統一感や他ページへの誘導ができるのであれば作っておくべきというのが私の見解です。
面白いなと思った404があればまた追加していきますね。コメントでも面白かった404ページがあればぜひ教えてください。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ