404ページに必要な基本デザイン・やっちゃいけない禁止事項

ページが見つからなかったときの404エラーページを作るときの基本設定について自分なりにまとめました。AdSenseなど404での禁止規定もあるので皆さんも見直してみては。

404ページに必要な基本デザイン・やっちゃいけない禁止事項

見に行ったサイトの記事がエラーで読めないとイライラしますね。

中でもリンク切れを示す404エラーは最も遭遇回数の多いエラーではないでしょうか。巷では「カスタム404を設定するとGoogleのページ評価が上がる!」という点が取り沙汰されがちですけど、そもそも導線繋ぐの大事です。

面白いメッセージが表示されるサイト、スマートに過去記事が検索出来るサイトは目的の記事が見つからなくても何となく許せてしまいますし。

そんな404エラーページですけど、実は地味にタブーも存在します。

先日おち研404ページのコードを見直したので、その際に気になった自分なりの所感をまとめておくことにしました。

404 Not Found とは?

HTTPステータスコード、いわゆる

ファイルが見つかりません

エラーです。リンク切れなどのケースがこれに相当します。いくらファイルがないからと言ってApacheエラーが丸見えとか格好悪い。なにより読者の導線が切れてしまうので相応のデザインにしておきたいものです。

.htaccess によるエラーページ指定

エラーページの指定としては .htaccess で呼び出す方法が汎用的です。

【.htaccess】
ErrorDocument 404 /error/404.html

WordPressで404ページを用意するには?

一方、WordPressサイトの場合は、必要なデータスラッグが見つからないとテーマディレクトリ中の 404.php が参照される仕組みになっています。1から完全自作なテーマでない限り 404.php が用意されてるでしょうから、その点は安心です。最悪の話 index.php に飛ぶので、そういう意味でも二重に安心。

WordPressの404.phpを自作する基本設定

WordPressの404.phpは、index.phpやsingle.phpを少し手直しすれば簡単に他のページとデザインが揃うのが良いところ。一番簡素な書式だと以下のような感じでしょうか。

【404.php】
<?php get_header(); ?>
 
<p>File 404 Not Found<br />
お探しの記事は見つかりませんでした</p>
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

あとは好きなように必要な機能を盛り込んでいけば良いと思います。

ちなみに、WordPressで404.phpを設置する場合は .htaccess との同時指定をしないで下さい。

意図的に404ページを表示させる方法

ちなみに動作確認等で意図的に404を出したいときは、ルート直下で404を手打ちすれば大体見られます。

http://www.example.com/404

「URL補完機能のあるCMS」を使ってる場合で、そのサイトに「404の解説記事」があったりすると、解説記事のほうが優先されちゃうんですけどね。(´・∀・`)

404ページに書いておくと便利な情報

404ページは第一にエラーと判る記述をしますが、あとは自由に必要事項を足していけば良いのではないかと思います。

  • サイト内検索フォーム
  • 過去の人気記事紹介
  • トップページへのリンク
  • アーカイブ一覧
  • 「管理人に連絡する」フォームの設置
  • 不敵なにゃんこ

404ページを作ってみよう

割と管理者の人柄が出る部分なので、細かいツメはお好みで。

特定のスラッグで発動するメッセージを仕込む

WordPressに限りませんが、例えばPHPでサーバ側のリクエストを取ると特定URIでアクセスされたときのみ発動されるメッセージも作れます。

ちょっとしたイースターエッグ(宝探しゲーム)にどうぞ。

【 404.php 】
<?php
if ( $_SERVER['REQUEST_URI'] == '/easter-egg/' ): ?>
<p>見つかっちゃった!(*´艸`*)</p>
<?php endif; ?>

ホームページにリダイレクト

「404エラーページなんかチマチマ作ってられっか!」
「エラーだと伝えたところで情報量ゼロだし無意味」

…という方は黙ってトップページに遷移させるのも定番スタイルです。ヘッダやフッタはロードせず、リダイレクト文だけ書けば読み込みも早いです。

【 404.php 】
<?php
wp_redirect(home_url('/'), 302);
exit;
?>

ちょう手軽。

404からの301リダイレクトを勧める人をたまに見ますが、何を引き継ぐか判らないので302で良いと思います。

404ページでやってはいけないこと

悪質なスクリプトを書いたりしなければ特に決まりはないんですが、一番大きいのは GoogleAdSense の扱いです。実は404ページへのアドセンス掲載は禁止事項にあたります。

広告掲載に関するポリシー
コンテンツを含まないページ(手続き完了ページ、エラー ページ、離脱ページなど)に広告を掲載することは許可されません。(中略)エラー ページには、そのページにコンテンツがないことをユーザーに知らせる 404 エラー ページなどがあります。

「紛らわしくなければ良いんじゃねぇの?」と思わないでもないのですが、サイドバー広告でもペナルティ受けたって噂を聞きます。先生めっちゃおそるべしやで…。

404ページでアドセンスを掲載させない方法

心配な人は条件分岐で404ページから除外しましょう。

【 404.php 】
<?php if(!is_404()): ?>
 404ページで表示したくないコンテンツを記述
<?php endif; ?>

404.php に直接記載されてないヘッダやフッタなどのテーマファイルも、この記述は有効です。

404.php から呼び出されるテーマファイルにこのタグで上下が囲われてれば、404のロード時に除外条件が適用されます。

404ページだからこそ出来るデザイン

404ページにアドセンスは貼れない。つまり「アドセンスポリシーに縛られない設計が可能」とも言えます。

404のデザインに凝るサイトは英米に多い印象ですが、デザイン実例を眺めてると「コンテンツページでやったら微妙だな~!」って感じの表現が散見されます。

露出多めのお姉さんやガチムキお兄さんによる『見ちゃダメヨ (*´艸`*)』的な写真とか、頭打ち抜いちゃってるイラストとか、コンテンツページでやったらファミリーコンテンツとしてはアウトよね。

404ページ画像例

海外のおもしろ404ページって割と成人向けのサイトが多いのでリンク張るに張れないんですけど。もしそういうサイトに出入りしてる人は試してみて下さい。

あとは順当にWebサービス系サイトの404も面白いんですが、近ごろ技術系のサイトはトップにリダイレクトされるケースが増えてきてるかも知れません。ちょっと残念ですね。

ギークから遊び心とったら何が残るの!(激おこ)

404ページを作ってみよう まとめ

思うところがあってシステムの大改造をしたので、それに先駆けて404の見直しをしたという記事でした。(改造の経緯は後日また書きます。)

CSSの軽量化など表に出ない改造が中心なので、見た目的にはアイキャッチの にゃんこ足しただけです。

齧歯類派を公言している私がネコ画像を使うだなんて、ハッキリ言ってゲスいのです。でもハムスターが「お願いポーズ」で首かしげてる写真を使うほうがアコギだなって思い直したんで、やっぱネコで行きますよ!

作者にとってアクセス増は好ましくない404ページですけど、もし見かけた際はよろしくお願い申し上げます。

それではまた!

【 関連記事 】

アドセンス違反になる前に!特定記事で別広告に差し替える方法
404以外で細かく条件分けする方法。ヨソ様のあぼせんを見て私も細かく出し分けようと思ったんですが、管理の手間が面倒になって速攻止めたという謎記事です。1円でも多く稼ぎたい方はご参考にどぞ。(・∀・)