【404エラーページ】ユーザーフレンドリーなエラーページの作り方【離脱阻止＋SEO】

あなたはしっかりと404エラーページを意識していますか？

そもそも

404エラーページってなに？

という人も、
このような画面は見たことがあるのではないでしょうか？

ユーザーがサイト上で存在しないページにアクセスしようとした時に、
この404エラーページが表示されます。

404エラーページが表示されるのはおもにこんな場合です。

・無効なリンクをクリックした
・ページが削除されている
・URL を間違えて入力した

参照： 404ページのカスタマイズ

404エラーページにたどりついた読者様にたいして、
あなたが取るべきベストプラクティスをお教えします。

404エラーページの修正方法

WordPressをご利用されている方は、
「404.php」というファイルを修正する必要があります。
（テーマにファイルがない場合は追加する必要があります）

テンプレートファイルをいじるのがこわいという方は、
この部分だけでも誰かにお願いして修正してもらうといいでしょう。

修正する際の方針をくわしく説明するので、
ぜひ最後までこの記事をお読みください。

Googleが推奨する404エラーページ

まずは公式をチェックをしましょう。

Search Console ページをカスタマイズする理由

いつも言いますが、
なにかに悩んだら公式サイトを参照しにいく癖をつけましょう。

公式サイトによれば以下の6点に注意して404エラーページを作成しなさいとのことです。

・ユーザーに対して、探しているページが見つからないことを明確に伝えます。親しみやすく魅力的な言葉を使用します。
・404ページを、サイトのその他の部分と同じデザイン（ナビゲーションを含む）にします。
・最も人気のある記事や投稿へのリンクの他、ホームページへのリンクを追加します。
・無効なリンクを報告する方法をユーザーに提供することを検討します。
・この404ページがどれほどきれいにデザインされ、役に立つものであっても、Google検索結果に表示したいとは誰も思わないでしょう。404ページが Googleや他の検索エンジンのインデックスに登録されないようにするため、存在しないページがリクエストされたときにウェブサーバーが実際の404HTTPステータスコードを返すことを確認します。
・アドレス変更ツールを使用して、Google にサイトの移転を通知します。

1つ１つチェックします。

ユーザーに対して、探しているページが見つからないことを明確に伝えます。親しみやすく魅力的な言葉を使用します

この条件をみたすサンプル：

「お探しのページは見つかりませんでした。お探しのページは削除された可能性があります。直接URLを入力された方は、URLが正しく入力されているかをご確認ください。」

404ページを、サイトのその他の部分と同じデザイン（ナビゲーションを含む）にします

・ヘッダー部分をその他のページと共通にしましょう。
・フッター部分をその他のページと共通にしましょう。
・サイドバー部分をその他のページと共通にしましょう。

最も人気のある記事や投稿へのリンクの他、ホームページへのリンクを追加します

・人気記事を表示しましょう。
・「トップページはこちら」リンクをつけましょう。

無効なリンクを報告する方法をユーザーに提供することを検討します。

この条件をみたすサンプル：

・「みーぷーブログ（あなたのサイト名）内で無効なリンクを発見された場合、下記「お問い合わせ」より、無効なページのURLをご連絡いただければ幸いです。」　

＋

・「お問い合わせページはこちら」リンク

存在しないページがリクエストされたときにウェブサーバーが実際の404HTTPステータスコードを返す

WordPressを利用し、
「404.php」
を設置していればここは気にしなくてけっっこうです。

アドレス変更ツールを使用して、Googleにサイトの移転を通知します。

404エラーページが表示される原因がサイトの移転にある場合、
Search Consoleの「アドレス変更ツール」を使用しましょう。

ここでは詳しく説明いたしませんが、
公式サイトのリンクを貼っておきますので気になる方はご参照ください。

参照： アドレス変更ツールの使用

実際に作成した「404.php」をご紹介

みーぷーブログの実際のコードを記載いたします。
ぜひご参考にしてください。

<?php get_header(); ?>

<main role="main">
	<!-- article -->
	<article id="post-404">
		<h1>お探しのページは見つかりませんでした</h1>
		<p>お探しのページは削除された可能性があります。直接URLを入力された方は、URLが正しく入力されているかをご確認ください。</p>
		<section class="search">
			<p class="err-title">サイト内検索はこちらより</p>
			<?php get_template_part('searchform'); ?>
		</section>
		<section class="toppage">
			<p class="err-title"><a href="<?php echo home_url(); ?>">トップページはこちら</a></p>
		</section>
		<section class="popular-posts">
			<p class="err-title">人気記事一覧</p>
				<?php
				echo do_shortcode('[wpp]');
				?>
		</section>
		<section class="to-contact">
			<p class="err-title">サイト改善へのご協力願い</p>
			<p>みーぷーブログ（あなたのサイト名）内で無効なリンクを発見された場合、下記「お問い合わせ」より、無効なページのURLをご連絡いただければ幸いです。</p>
			<a href="<?php echo home_url(); ?>/contact">お問い合わせはこちら</a>
		</section>
		</article>
		<!-- /article -->
</main>
</article>
<!--/ブログゾーン-->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

404エラーページを画面で確認

次に、
みーぷーブログの404エラーページを見てみましょう。

エラーページへのリンクを貼っておきます。

https://miyakura.com/エラーページに飛びます

Googleの推奨するポイントを確認します。

共通のヘッダーです。

わかりやすい言葉でページが見つからないことを明示しております。

サイト内検索を表示してあります。

トップページへのリンクが貼られています。

人気記事を表示してあります。

お問い合わせへのリンクが貼られています。

共通のサイドバーです。

共通のフッターです。

以上です。

Googleの推奨するポイントを網羅していることが確認できたはずです。

さいごに

404エラーページをしっかりとつくることで

Googleのクローラーにしっかりと情報を伝えることができますし、
ユーザーの離脱率を下げることもできます。

SEO対策の基本中の基本でもありますので、
しっかりとあなたのブログをチェックしましょう！

カテゴリー: プログラミング

執筆者: みーぷー