WordPressで404エラーページを作ってみた

WordPressで404エラーページを作ってみた

Posted 2013/11/20 by oredayo

WordPressで404エラーページを作ってみた

このブログで使っているテーマに404エラー用のページが無かったので、色々なサイトを参考にしながらオリジナルのものを作ってみました。
普通のhtmlサイトの場合、特別なことをしていなければレンタルサーバーやブラウザが用意した404Not Foundページが表示されますが、WordPressでは該当するテンプレートが無い場合、Topページのテンプレートが適用されてしまいます。
もし記事ページとTopページのデザイン・レイアウトが大幅に異なる場合には、ユーザーに大きな困惑を与えてしまう可能性があるため、WordPressを利用しているサイトは404エラーページを作成しておいたほうがよいでしょう(たいていのテーマには用意されているかと思いますが)

色々なサイトの404エラーページ

Amazon

Amazonの404

Google

Googleの404

YouTube

YouTubeの404

Twitter

Twitterの404

Wikipedia

Wikipediaの404

任天堂

任天堂404

Pixiv

Pixivの404

株式会社LIG

Ligの404

かっこいい404エラーページのまとめなんかも有ります。
センスあふれる404エラーページ30種 – GIGAZINE
http://gigazine.net/news/20110629_30_creative_404/

ソフト404とハード404

404エラーには2種類の設定方法が有ります。「ハード404」、「ソフト404」と呼ばれているものです。それぞれの違いは下記のとおりです。

ソフト404

存在しないURLにアクセスすると、予め用意されていた別のページに自動的に転送される仕組みです。
http://sample.com/aaaaaaaaa.html (存在しないページ) にアクセスすると自動的に http://sample.com/404.html (予め用意されているエラーページ)に自動的に転送されます。
上記の例の場合、任天堂さんのページなんかはソフト404を使用しています。

ハード404

存在しないURLそのものに404エラーページが表示される仕組みです。
先ほどのソフト404とは違いステータスコードが404としてレスポンスされるのが大きなポイントです。
先ほどの例では任天堂さん以外のwebサイトが利用しており、その他多くのサイトで利用されています。

どちらを使用するべきか

Googleは「ソフト404を使用するな」と言っています。

サーバーでは、存在しないページへのリクエストに応答する際に、404 コードを返すだけでなく、404 ページも表示します。「ファイルが見つかりません」という標準メッセージが表示される場合もありますが、追加情報が記載されたカスタム ページが表示されることもあります。ページのコンテンツは、サーバーから返される HTTP レスポンスとはまったく関係ありません。ペー ジに「ファイルが見つかりません」という 404 メッセージが表示されたとしても、そのページが 404 ページであるとは限りません。キリンが「犬」という名札を付けているようなものです。名札に犬と書かれていても、実際には犬ではありません。同様に、ペー ジに 404 と表示されても、404 が返されたわけではありません。Fetch as Googlebot(またはウェブ上で利用できるその他のツール)を使用すると、URL が実際に正しいコードを返しているかどうかを確認できます。
存在しないURLを別のURLに転送することで、Googleのロボットは存在しないURLとエラー用のURLの2つをクロール(ロボットがチェックすること)しなければならず、その手間を省かせて欲しいという意図があるようです。

大正義Googleのお達しもあることなので、特別な理由がない場合はハード404を用いるようにしましょう。

参考サイト

下記のようなページで詳しく解説されていますので、より深く理解したい方はぜひご参照下さい。

404 Not foundページの作成方法 – ソフト404とハード404の違い | WP SEOブログ
http://www.seotemplate.biz/free-seo/2200/

ソフト 404 エラー – ウェブマスター ツール ヘルプ
https://support.google.com/webmasters/answer/181708?hl=ja

存在しないページは、301?、ハード404?、ソフト404? | 海外SEO情報ブログ
http://www.suzukikenichi.com/blog/which-is-better-301-hard404-or-soft404-for-nonexesistent-pages/

404エラーページの作成手順

最後に手順を紹介します。

1. 載せたい項目とデザインを決める

Googleの公式ヘルプには下記のようなアドバイスが記載されています。

存在しないページへのリクエストに応答する際には、404(見つかりません)または 410(存在しない)を常に返すことをおすすめします。404 レスポンス コードが返されるときに、独自の 404 ページがサイトで表示されるように設定すると、ユーザーの利便性を高めることができます。

ブログなどの場合は、人気記事、新着記事、Topページへのリンク、カテゴリーページヘのリンク、検索窓等を用意しておけばユーザーの利便性を高めることができるのでは無いでしょうか。

2. phpファイルの作成

テンプレートが入っているディレクトリに404.php というファイルを作成してます。
head内のtitleタグには必ず 404NotFound を含めるようにして下さい。
header.php 等で管理している場合には、下記のようにtitleタグの指定を行いましょう。

<?php } if(is_404()) { ?>
404Notfound
<?php } ?>

is_404() が404エラーページの指定方法です。
また、404ページは存在しないURLになるためGoogleにインデックスして貰う必要がありません。ということで、下記の一文も内に加えておきましょう。

<?php if(is_404()) { ?><meta name="robots" content="noindex"><?php } ?>

3. htaccessの設定

特別な設定を行っていなければルートディレクトリに.httacessというファイルがあるかと思います。
「存在しないURLが叩かれた場合は、ステータスコード404を返しし、404.phpの内容を表示する」という意味合いの下記一文を加えておきましょう。

ErrorDocument 404 /404.php

404.phpのファイルを作成するだけでも、WordPress側で勝手に処理してくれますが、上記の一文を加えておけばより一層安心です。

4. 確認

存在しないURLをURLバーに入力し、設定した404エラーがしっかりと表示されているかを確認してみてください。
また下記のツールを用いることで、ステータスコードが返されているか調べることが出来ます。

HTTP Status Code Checker — httpstatus.io
http://httpstatus.io/

404が返されていればOKです。
httpstatascode

完成!!!

そして出来上がった404ページがこちら!
404page