スポンサーリンク

404エラー対策プラグインと原因やSEO、有益なページ作成の紹介

ブログ
スポンサーリンク

こんにちは、Gassyuです。

今回はブログを作成しているといつかは必ず目にする 「404 not found」 「お探しのページは見つかりませんでした」 と表示されるエラーページについてのお話です。

この404エラーページはリンク先や、検索結果を開いた先のページが存在しない事が原因で表示されることがあります。

これはエラーコードの一つで HTTPステータスコード と言われ3桁の数字で表されます 。

初心者の方は原因が分からず困惑したり、どう対処したらいいのか分からなくて不安になってしまいます。このまま放置しても大丈夫?とかSEOの影響は?対策は?とか色々と考えちゃいますよね。

でも大丈夫です。

この記事を読んでもらうと
  • 404 not foundのエラーページとは?
  • HTTPステータスコードとは?
  • Webサイトが表示されるまでの流れとは?
  • 発生する主な原因とは?
  • SEOの影響は?
  • 対策の方法は、初心者でも出来る方法は?
  • 有益な404ページとは?実際にどんなページなの?
  • 404 ページをカスタマイズするポイントは?
  • 便利なプラグインはどれなの?

と云うような内容が分かるようになってます。

スポンサーリンク

404 not foundのエラーページとは

「404 not found」 とは、ユーザー(クライアント)がサイト上で存在しないページにアクセスしようとしたときに何らかの理由で存在しないページに対して、 Web サーバー側から送られてくる対応(レスポンス)のひとつです。 これを流れで説明すると

>ユーザー(クライアント)が「〇〇〇〇〇」を検索、若しくはURLを入力する、またはリンク先に情報を求める

> Webサーバー がサーバー内の情報を調べてみたが見つからない⁉

>でも何か返事をしないとダメ、困った!何か伝えねば!

>そしてこんな時のためのページ 「404 not found」の出番!

と言う流れになります。

この「ページが見つかりませんでした」ということを伝えるために表示されるページが、404エラーページという事です。

スポンサーリンク

HTTPステータスコード とは

この「404」の数字なんですが、 HTTPステータスコード と言われ3桁の数字で表されます。

この3桁の数字はWebサーバのレスポンス( 応答の結果 )の意味を表示します。

この HTTPステータスコードをより良く理解するために、普段何気なく見ているパソコンやスマホの画面に映し出されるサイトの画面がどのような流れによって映し出されているかを紹介しますね。

Webサイトが表示されるまでの流れについて

分かりやすいようにタイムラインでまとめました。

Webサイトが表示されるまでの流れ
  • Webブラウザ

    皆さんがいつも見ているWebブラウザ(クライアント)からWebサーバーに対してリクエストを送信します。

  • WEbサーバー

    リクエストを受け取った Web サーバーからレスポンスが送信される
    この中に HTTPステータスコード も一緒に送られてきます。

  • Webブラウザ

    Webサーバーから受け取った情報を(クライアント)Webブラウザが表示する

今回の記事の「404 not foundのエラーページ」、というのは上記の②「リクエストを受け取った Web サーバーからレスポンスが送信される」でWebサーバーから返される情報の中にHTTPステータスコードも一緒に送られてくるという事です。

ここで用語を補足しておきますね。


【ブラウザ 】
Google ChromeやFirefox、Safari、Internet ExplorerやMicrosoft Edge 、Opera など、今皆さんがこのページを見るために使っているツールのことです。


【クライアント】
ユーザーがパソコンやスマホなどでブラウザでネットから情報を収集する側の事です。


【サーバー】※下記に追加情報も添えておきますね
クライアントが情報を取り出す先のWebサーバやメールサーバといったソフトウェアの入ったパソコンなどの事です。サービスを提供する側のなのでサーバーと言います


【Webサーバー】
サーバーを機能させる為のソフトウェアの事です。
・サーバーを「ハード」
・ Webサーバー を「ソフト」と認識すれば分かりやすいと思います。


【リクエスト】
クライアントがサーバーにURLなど送り情報を求める事です。


【レスポンス】
サーバーがクライアントに送り返す情報の事です


サーバーと言っても左図のフェイスブックのサーバールームあるような大規模なものから、自宅で用意で来るパソコンのデスクトップ大きさの物まであります。

Facebook Mark Zuckerberg よりフェイスブックのメインデータホール

主な HTTPステータスコード のまとめ

他にも様々なHTTPステータスコードがあり、100番台から500番台まで数多くの種類があります。

下記の表にまとめました。

100番単位
100番台インフォメーションリクエストは成功してはいるが処理が継続されている
200番台正常処理リクエストが正しく受け付けられた
300番台ダイレクト(転送)処理リクエストを完了するには他のURL等を参照する必要がある
400番台クライアントによる処理ミスクライアントからの要求にエラー等があり、正常処理されなかった
500番台サーバーエラーサーバー側の問題によりリクエストが失敗

次に押さえておきたい 主なHTTPステータスコード です。

主なHTTPステータスコード
番号コード名詳細
200OKリクエストが正しく受け付けられた。通常はこのステータスになります。
301Moved Permanentlyリクエストしたリソースが恒久的に移動されているときに返されます。ウェブサイトの移転、HTTPからHTTPSへの移転も該当します。
302FoundMoved Temporalilyリクエストしたリソースが一時的に別の場所に移転しというステータスです。メンテナンスなどで、また元の場所に存在する予定であると示します。
303See Otherリクエストしたリソースは確かにそのURLにあるが、他のリソースをもってレスポンスとするような場合に使用します。掲示板やWikiなどで投稿後にウェブブラウザに対して他のURLに転送させたいときに使われます。
304Not Modifiedリクエストしたリソースは更新されていないことを示します。キャッシュなどでデータが残っている場合、そのデータを使用したというステータスです。
307Temporary Redirectリクエストしたリソースが一時的に移動されているときに返されます。302の規格外な使用法が横行したため、302の本来の使用法を改めて定義したものです。
400Bad Requestクライアントの不正なリクエストであると示しています。
401UnauthorizedBasic認証やDigest認証などの認証が必要な場面で認証できなかった時に返ってきます。
403Forbiddenリソースにアクセス権限がなく、閲覧が拒否された場合に返ってきます。
404Not FoundURLの入力ミスやリソースの削除でファイルが見つからない場合に返ってきます。専用ページが設定できるので効果的な使用も可能です
408Request Time-outリクエストの待ち時間内に反応がなかった時に返されます。
410Gone要求されたリソースが恒久的に移動・消滅した時に返されます。二度と復活しない場合に使われます。
500Internal Server Errorリクエスト処理中に予期せぬエラーが発生した場合に返されます。
503Service Unavailable過負荷またはメンテナンス中のため使用が不可能の場合を示します。アクセスの殺到などもこれに辺ります。

「200」はサーバーへのリクエストが正しく処理され、ページが表示される状態です。

色々と 他にもHTTPステータスコード は沢山ありますが

中でも「301」は  Webサイト(ページ)を恒久的に移転先へ転送する (リダイレクト)ことを意味しており 、元々あったページの評価を引き継ぐためにも重要です。

参考までにHTTPステータスコード を調べるツール

参考>【HTTPステータスコードチェッカー

自身のサイトはもちろん、 複数の任意URLからHTTPステータスコードを一度に取得・確認する事ができる、便利なwebツールです。
200や404コードや、301や302リダイレクトの転送経路検索も同時に表示してくれますので、是非活用してみてください。

スポンサーリンク

404エラーの主な原因とは?

404エラーの主な原因は以下の4つです。

  1. クライアントのURLの入力が間違っている
  2. 既に削除されているページにアクセスしている
  3. リンク切れしているページなど4つ表示しようとしている
  4. 古いURLから新しいURLへのリダイレクト設定がうまくできていない

クライアントのURLの入力が間違っている

手動でURLを打ち込む際のURLのスペルを見間違えたり、打ち間違えによって起こります。当然存在しないURL(ページ)なので表示できないですよね。

消去されたページを表示している

ページが削除されているにも関わらずアクセスすると、404エラーが起こります。以前にその記事を読み興味を持ち、ブックマークして再度アクセスを試みるが、その時は既に運営側の都合で完全に削除されている場合もあります。

表示しようとしているリンク先がリンク切れしている

リンク先のページが見られないリンクのことをリンク切れと言いますがその一つに、リンク先が上記の”2”の「消去されたページを表示している」ことが挙げられます。

新しいページのURLに貼りかえるか、リンクそのものを削除する対処が必要です。

そして、設置したリンクの先のURLがそもそも間違っている時。上記の”1”なども絡んできます。

URLの確認が必要です。

古いURLから新しいURLへのリダイレクト設定ができていない

上記の”2”のようにページが削除された場合や、 何かしらの理由からURLを変更した場合、古いURLはインデックスされたままですので、新しいURLに対して301リダイレクトの設定するなどの対策が必要です。

またこのリダイレクトの設定に不具合があった場合にも、新しいURLにアクセスすることができないため、404ページになってしまいます。

スポンサーリンク

SEOの影響は?

404 not foundのエラーページの主な原因が分かれば次はSEOの影響が気になります。

その影響ですが結論は『影響はありません』

過去Googleがウェブマスター向け公式ブログで以下のようにコメントしております。

サイトの一部の URL が既に存在しない、または 404 を返していた場合も、サイトの他の URL (200(Successful)を返すもの)の検索結果内での掲載順位には影響しません。404 レスポンス コードは、インターネットにとっては正常な動作です。インターネットは常に変化しており、新しいコンテンツが作られ、古いコンテンツはなくなっていきます。コンテンツがなくなったとき、404 HTTP レスポンス コードを返すことが通常の動作です。検索エンジンはこのことを理解しています。

ウェブマスター向け公式ブログ

自身のサイトであればインデックスの削除やリダイレクトで対処できますが、被リンク(外部サイトから貼られたリンク)などは対処できるものではありません。

そのため、404エラーページの有無が掲載順位に影響するとは無く、404ページを表示する事は正常であると言えます。

とは言うものの検索順位にほとんど影響がないからといって、404エラーをデフォルトのままでは、グーグルの言う『ユーザーの利便性 』視点で考えるとちょっと物足りないです。

時にはユーザーの離脱も考えられ、チャンスロスにも繋がります。

折角訪れて頂いたくれたユーザーに不安を与えないように、信頼性を損ねないような工夫が必要となります。

その為にオリジナルの有益な404エラーページなどを用意する事をお勧めします。

オリジナルの有益な404エラーページの必要性

出典: https://www.google.com/404

オリジナルの有益な404エラーページの必要性についてGoogleは”検索エンジン最適化(SEO)スターターガイド”にて次のように述べています。

有益な 404 ページを表示する

ユーザーは無効なリンクをクリックしたり、誤った URL を入力したりして、サイト上に存在しないページにアクセスしようとすることがあります。ユーザーをサイト上の公開中のページに導く親切なカスタム 404 ページを用意することで、利便性を大幅に改善できます。404 ページにルートページに戻るリンクを表示し、サイト上の人気のあるコンテンツや関連するコンテンツへのリンクも掲載すると良いでしょう。Google Search Console を使って、「ページが見つかりません」エラーを引き起こす URL のソースを特定できます。

検索エンジン最適化(SEO)スターターガイド

この内容からは、ただ単に 「404 not found」「お探しのページは見つかりませんでした」 と表示するだけでなく、親切なカスタム404ページを用意しましょう、トップページに戻るリンクや人気のあるコンテンツや関連するコンテンツへ 誘導するリンクも掲載しましょうと推奨している事が分かります。

親切なカスタム404 ページを用意することで、意図とせずこのページに来られてユーザーに安心を与え、また作り込む事によって信頼も生まれるきっかけにもなります。

チャンスだと思いカスタムしていきましょう。

有益な 404エラーページ参考例

実際に404エラーページをいくつか紹介しますね。

参考にして頂いて役立てて下さい。ユニークな404ページもあったりしますので自身で探してみるのも、結構面白いですよ。

その場合はお目当てのサイトに行き、そのURLの語尾に追加で【/404】と入力すれば404エラーページ に行けますよ。

では見て参りましょう!

アメリカ合衆国連邦政府


※画像出典: https://www.whitehouse.gov/404

まずはホワイトハウスです。アメリカ合衆国大統領が居住し、執務を行う官邸・公邸の建物ですが、政府の公式ホームページとなってます。

因みにこのサイトはWordPressで作成されており、トップドメインの【.gov】 (ドット ガヴ) は 米国の行政機関向けに用意されているドメイン です。

※2017年12月中旬にリニューアルされ、それに合わせてがDrupalからWordPressに変更

さて本題ですが、「そのページが見つからないか、アーカイブされたWebページにあります。」

と表示され、トップページへのリンク、そしてアーカイブされた過去の大統領ホワイトハウスのウェブサイトへのリンクもあります。

オバマさんやブッシュさんクリントンさんなど懐かしい顔も見れます。

Netflix(ネットフリックス)

※画像出典: https://www.netflix.com/jp/404

シンプルに「ページが見つかりません」と案内、トップページのリンクがあります。

背景には Netflixがリブートしたテレビドラマシリーズ の「ロスト・イン・スペース」が使われていました。今後時と共に一押しの映画やドラマが使われていくのでしょうね。

MARVEL(マーベル)

※画像出典: https://www.marvel.com/404

ご存知!(恐らく)大ヒット「アベンジャーズシリーズ」などを産み出した「MARVEL(マーベル)」のホームページです。日本のサイトではなく本家のサイトです。

「アドレスを正しく入力したことを確認し、前のページに戻るか、サイト検索を使用して特定の何かを見つけてください。」の記述があります。

通常のページと同じ様にデザインされ、ここから本来のサイトのように色々なページに行けます。

背景は変わっていくようで、この記事を書いている途中には別の背景になっていました。

レオマワールド

※画像出典: https://www.newreomaworld.com/404

私が個人的に大好きなテーマパーク「レオマワールド」の404ページです。

メニューが横スライドしてそれを見ているだけでもワクワクします。(私の主観ですが・・)

JTB

※画像出典: https://www.jtb.co.jp/Error/404Error.asp

今回一押しの404ページです。

  • お探しのページが見つかりません、 404 Page not foundとしっかりと記述されている
  • サイトのデザインも本来のページと同じように作られている
  • ホームページへのリンク は勿論、通常のページ同様に他のページへ移動が出来る
  • 親しみやすく魅力的な言葉と背景で作られている

『ビーチでちょっと休憩したら、また新たな行き先を探しにでかけましょう。』

どうですか?上記のコメント、旅行先などをお探しの方がこのページに迷い込んだ時に、安心とひと休みを与えてくれますね。

カスタム404 ページを用意する上で必要なポイント

それでは早速カスタム404 ページを作成したい所ですが、その際に作成する上で必要なポイントがあります。

下記はSearch Consoleヘルプ「404 ページのカスタマイズ 」から引用していますのでまずはご覧になって下さい。

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

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

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

Search Console ヘルプ「404 ページのカスタマイズ」

上記のような内容を踏まえ作成していきます。

ここまでこの記事をお読みの方は既に参考例を通じて、上記のポイントとなる所はお伝えしている事に気付くかと思います。なので多少なりともイメージは沸いているかと思いますので、

そのイメージ元にカスタム404 ページを作成していきましょう!

プラグインでカスタム404 ページを簡単設置の3ステップ

カスタム404 ページをプラグインを使って簡単設置する方法を紹介します。

流れとしては下記の3ステップです。

  1. プラグイン【404page】をインストール。
  2. カスタム404 ページを固定ページで作成。
  3. プラグインでカスタム404 ページ設定。

たったこれだけです!誰でも出来そうですね。

お使いのテーマによってはオリジナルの404ページを作成できる物もありますが、

実装されていない場合はこのプラグイン【404page】が初心者の方などにもお勧めです。

プラグイン【404page】をインストール

WordPressのダッシュボードからプラグイン>新規追加>キーワード「404page」を検索。

『404page – your smart custom 404 error page』を「今すぐインストール」します。

インストールした後は、「有効」をクイックします。

カスタム404 ページを固定ページで作成

WordPressのダッシュボード から固定ページ」>「新規作成」をクリックします。

  1. タイトルを決める>「 404 not found 」とかでも「 お探しのページが見つかりません 」でもOKです
  2. パーマリンクを編集する> 「custom404」とか「 404-not-found 」などの自身で分かり易いスラッグでだいじょうです。
  3. 後はページの作成です

先述した”カスタム404 ページを用意する上で必要なポイント“を踏まえ、自身のサイトに合わせて作成しましょう!

プラグインでカスタム404 ページ設定

最後に作成したカスタム404 ページを設定します。

外観>404 Error Page>と進みます。

すると次のような画面になります。

General」のプルダウンを開くと、登録されている固定ページが表示されるので、先ほど作成したカスタム404エラーページを選択します。

あとは画面下にある「変更を保存」ボタンをクリックして完了です!

お疲れ様でした!

プラグイン「404page」、使ってみると扱いやすく簡単設定で親切だと分かります。

でも中には最初から404エラーページが表示されないように設定すればいいのでは?

と手間を省きたい方もいるのでは無いかと思います。

そんな方の為に404エラーページをトップページにリダイレクトできるプラグインを最後に紹介しますね。

簡単!トップページにリダイレクトできるプラグイン

この二つのプラグインの使い方はほぼ一緒です。

なので今回は「 All 404 Pages Redirect to Homepage 」のプラグインを紹介します。

レビューが少なく少し不安・・・でしたが作成者を見ると

こんな風な会社が作成されたようです。

「 All 404 Pages Redirect to Homepage 」 の使い方

ダッシュボード>プラグイン> 新規追加>キーワード> 「 All 404 Pages Redirect to Homepage 」と検索します。

同じような名前が多いのでコピペでして検索が確実です。

「今すぐインストール」>有効化をクリックします。

すると設定の中に案内がでますのでクリックします。

すると次のような画面になります。

赤枠の「Enabled」(有効)を選び「Update」をクリックすれば設定は完了です。

あとは「404 not found」のページが発生した時に自動でトップページにリダイレクトしますよ。

これで今回の記事

【初心者でも出来る!】404とは?原因とSEOの影響、対策方法から有益な404ページの作成とプラグインで楽々設置!まで紹介します。

は終了です!

最後までお付き合い頂きありがとうございました!!

ブログ
スポンサーリンク
★★★よかったらシェアをお願いします★★★
Gassyuのツイッターを見てみる
直感DEレビューブログ

コメント

タイトルとURLをコピーしました