WordPress

404 エラーとは?原因と解決策【オシャレなデザインも紹介】

 

悩む人
サイトを開こうとしたら、画面上に404エラー(お探しのページが見つかりません)って表示が出たけど、404エラーって何?また、404エラーが表示されたときの具体的な原因と対策があれば知りたいです。

 

こんな悩みに答えます。

 

本記事の執筆者

Webディレクター歴6年目で、過去に複数のWebサイトを管理・運用した経験があります。

 

気になるWebサイトがあって、クリックしたら以下のように404エラー(404 Not Found)のページが表示されたことがないでしょうか?

 

当ブログ404エラーメッセージ画面

 

急に404エラー(お探しのページが見つかりません)が出たら何が起きたのか分からず正直焦りますよね・・・。

 

僕もWebディレクターで新人時代は、404エラーと表示されても『一体何のこと?何でサイトが見れないの?』と思って、何回も混乱した経験があります。
KEI

 

本記事では、過去に苦戦した自分に向けて、404エラーが出る原因から404エラーが出たときの対処方法について、書いてみます。

 

記事後半では、404エラー画面でちょっとオシャレなデザインもいくつか紹介してみますので、404エラーを詳しく知りたい方の参考になりましたら幸いです。

 

 

404エラー(Not Found)とは?

404エラー(Not Found)とは?

 

404エラーは、サーバーエラーの1つでして、指定したURLが存在しないときに表示される画面のことです。

 

GoogleなどWebブラウザでサイトを閲覧しようとするのに、サーバーに向けて「この情報ください!」といったリクエストを送る作業が行われます。

 

図解にすると以下のように、Webブラウザとサーバー間でやりとりが行われています。

 

 

Webブラウザ側が、『このサイトを見せて〜(リクエス)』と要求しているのに、Webサーバーから『そんな情報はない!』と返答するときに404エラーが表示される感じです。

 

404エラーの原因と対処法は?

 

404エラーが表示されてしまう原因は、以下の原因が考えられます。

 

404エラーが表示される原因

・リンク切れしており遷移先にアクセスできない
・入力したURLが間違っている(スペルミス)
・アクセスしたいページがすでに削除されている(存在しない)
・リダイレクト設定ができていない

 

404エラーが表示される原因は、上記が考えられます。

 

僕が新人ディレクターの時によくやっていたミスで、アドレスバーに間違ったスペルを入力して404エラーが表示されることが多かったです・・・。
KEI

 

その他に、お気に入りのページをブックマークしていて、久しぶりにページを開こうとしたら、ページがすでに削除されており404エラーでページが表示されることもありました。

 

404エラーがあることでのSEO問題

 

404エラーがあることでSEOに直接問題はないと言われています。

 

一般的に、404 エラーが発生してもサイトの検索パフォーマンスに影響が及ぶことはありません。したがって、対象の URL が自分のサイトに存在しないことが明確な場合は、このエラーを無視しても問題ありません。

参考元:Search Console ヘルプ

 

もし、SEO対策をするのであれば、リンク切れがあるページを探して対策するより、他のSEO対策に取り組んだ方が良さそうですね。

 

また、404エラーページがGoogleにインデックスされていても、検索結果に表示されなくなります。

 

とはいえ、SEOに関係がなくても、古いページが404エラーページになる場合は、リダイレクト設定をしてあげて、新ページへ誘導してあげるとユーザーに親切になるので、設定しておくことをオススメします!

 

関連記事
【簡単!】ワードプレスで301リダイレクト設定のやり方

続きを見る

 

WordPress記事で404エラーが出たときの対処法

WordPress記事で404エラーが出たときの対処法

 

繰り返しになりますが、サイトを使っていて、404エラーが出たとき一瞬焦りますよね。

 

特に、WordPressを使ってブログやサイト開設したばかりで、404エラーが表示されても何のこと?と思う方もいるかと思います。

 

ワードプレスで404エラーが表示される原因としては、

 

・サイトの移転

・プラグインを導入

・パーマリンクを変更

 

上記をした後に、404エラーが発生する可能性があります。

 

そんな時は、以下2つのやり方で解決するか試してみてください。

 

  1. パーマリンク設定の修正をする
  2. htaccesファイルにパーマリンク設定を書き込む

 

1つずつ順番に紹介します。
KEI

 

①:パーマリンク設定の修正をする

 

パーマリンク設定の修正は、ワードプレスの管理画面を開きまして、サイドバーにある「設定 → パーマリンク設定」をクリックします。

 

ページ下にある、「変更を保存」をクリックします。

 

 

こちらの設定をすることで、パーマリンクの再設定が行われまして『.htaccess』が自動で上書きされます。

 

もし404エラーが出ましたら、こちらのやり方を試してみてください。

 

②:htaccesファイルにパーマリンク設定を書き込む

 

続いて、「htaccess」ファイルに直接書き込むやり方です。

 

もし、上記で紹介したパーマリンクの設定でうまく表示されませんでしたら、こちらのやり方も試してみてください。

 

注意ポイント

「htaccess」ファイルの編集を間違えると、画面が真っ白になる可能性があるので、編集に抵抗がない方はこちらを参考にしてみてください。

 

なお、htaccessファイルを編集する前にバックアップをしておきたい方は、以下の記事を参考にしてみてください。

 

関連記事
【便利!】UpdraftPlusプラグインを使ってバックアップする方法【2021年版】

続きを見る

 

「htaccess」ファイルに直接書き込むには、以下ファイルをコピーします。

 

 command
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

 

コピーできましたら、更新をして完了です。

 

ちなみに、「.htaccess」が存在しない場合は新しく作成して、上記のコードをコピーして貼り付けてあげる必要があります。

 

修正が完了しましたら、念のため404エラーが表示されないかを確認してみてください。

 

404エラーぺージのオシャレなデザイン

 

最後に、404エラーをちょっとユニークで、オシャレなデザインをいくつか紹介します。

参考サイト:https://www.creativebloq.com/web-design/best-404-pages-812505

 

万が一404エラーが表示されても訪問者をイライラさせないで、楽しさがあるページデザインなのでとても参考になりますよ!
KEI

 

①:レゴ

参考サイト:レゴ

 

レゴの404エラーページでは、驚いた表情のレゴキャラクターが表示されて、レゴの世界観が全面的に出ている404エラーペーですね。

 

404エラーが表示されてもユーザーさんは安心感を得ることができると思います。
KEI

 

また、サイトに来てくれたユーザーさんを逃さないように、『ショッピングを始める』ボタンを置いているのが特徴的で、ショッピングできる機会を作っているのが魅力的です!

 

②:ピクサー

参考サイト:ピクサー

 

ピクサーもレゴと同様に、キャラクターを置いた404エラーページになっています。

 

『インサイド・ヘッド』に出てくるカナシミちゃんですね!
KEI

 

『泣かないで、ただの404エラーだよ』といったメッセージを置いて、ユーザーさんに寄り添うエラーメッセージになっています。

 

画面もシンプルですし、かなり作り込まれた404エラーページになっているので、センスのいい404エラーページだと思います。

 

404エラーとは?原因から対処法:まとめ

 

ここまで、404エラーページの原因から対策方法までを紹介しました。

 

404エラーは、SEO評価に影響がなくてもちゃんと対策をしておくことで、ユーザーさんの信頼性を得られることができます。

 

404エラーが表示された時は、ユーザビリティが低下してしまう可能性があるので、適切に設定しておくことをオススメします。

 

本記事を読み、ワードプレスを使って404エラーの内容から適切な対応方法まで理解できましたら幸いです。

 

ここまで読んでいただき、ありがとうございました。

 

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-WordPress