404エラーの直し方｜原因別の対処と、迷わない案内ページ

01

404エラーとは？画面の文言と、サーバーの返事を分けます

404は「求められた場所にページが見つからない」というHTTPの応答です。画面に書かれた言葉だけで、応答番号や消えた理由は分かりません。

図の関係と条件を、テキストでも確認する

画面・本文と、HTTPの応答を分ける

ブラウザから要求このURLのページをください

URLを指定して、サーバーへ要求。

↓

返ってくるもの①ページの内容

目的の回答か、「見つかりません」の案内か。

返ってくるもの②HTTPの応答番号

200や404。画面の言葉とは別に確認。

↓

200準備ガイドの回答が読める

内容と応答が揃った正常ページの見本

404見つからない案内と既存ページへのリンク

ないページをないと知らせる見本

200見つかりませんだけで目的の回答がない

soft 404の候補。Googleによる実際の分類は未観測

200＋エラー内容はsoft 404の候補。Googleの実分類と索引登録・順位は別の確認です。

説明画像を大きく見る ↗

URLを開くと、ブラウザはサーバーへ「このページをください」と頼みます。サーバーはページの内容と、結果を表す番号を返します。この番号がHTTPステータスコードです。200は要求が成功したとき、404は求めたものが見つからないときの応答です。出典：MDN：404 Not Found

郵便でいえば、URLは宛先、ページの本文は中身、HTTPの応答は配達結果に当たります。中身に「届きません」と書くだけでは、配達結果まで変わりません。だから、見た目と応答を両方確かめます。

404が出た理由は、別に調べる

リンクの打ち間違い、ページの非公開、削除、URLの移動などで、必要な内容へ届かなくなります。404は原因を全部説明する番号ではありません。元の本文、公開履歴、リンク元を見て、どこで食い違ったのかを調べます。

サイト内検索の「0件」とは分ける

検索画面がちゃんと開き、「該当する記事が0件」と知らせている状態は、存在しないURLを開いた状態とは違います。検索0件だけを理由に404へ変える必要はありません。実際の応答と、使っている検索・テーマの仕組みを確認します。出典：WordPress：テンプレートの優先順

02

404の直し方は4通り。元の内容がどこにあるかで選びます

正しい内容が別にあるならリンクを直す。意図せず消えたなら復元を検討する。永久に移したなら同じ回答へ転送する。本当にないなら、404などで知らせます。

図の関係と条件を、テキストでも確認する

内容と公開理由から、4つの対処を選ぶ

先に照合元の内容はどこにある？

元の本文・公開履歴・リンク元・公開を止めた理由を比べる。

↓

リンク文字だけが誤記。正しいURLに同じ回答がある。リンク元を正しいURLへ直す

リンク元と正しいページ本文。リンクを掲載する担当。誤記を直した結果をまだ実測していない

必要な内容が意図せず消えた可能性。元の本文が残る。掲載条件を確認し、元のURLで戻す候補にする

公開履歴・元の本文・削除/非公開の理由。内容責任者とWeb管理担当。理由不明なら復元保留

同じ問いへの回答を別URLへ永久に移した。旧新を対応させ、永続転送を管理担当へ依頼

旧新の本文と移転の記録。内容責任者と転送管理担当。実装は近隣の301記事。単に200だけでは同じ回答を証明しない

終了した案内を意図して削除し、同じ回答の代わりはない。存在しないことを示す404、永久削除を示す410などを管理担当と選ぶ

終了の判断・代替がないこと。内容責任者とWeb管理担当。404を全てホームへ転送しない。410はGoogle順位改善のための万能設定ではない

↓

別枠：まだ決められない不明は担当へ戻す

/unknown/ は原因も対応も未確定。5つ目の完了した対処に数えない。

通し例の準備ガイドは復元候補。非公開の理由が分かるまで、公開や転送を変えません。

説明画像を大きく見る ↗

ただし、なぜ公開を止めたのかは分かっていません。内容が古いのか、掲載してはいけない事情があるのか、単なる操作ミスなのかで、対応が変わります。営業責任者が現在も載せてよい内容かを確認するまで、公開・転送の変更は保留します。

「同じ回答へ」は、本文を読んで判断する

「入稿前に何を揃えるか」を知りたい人を、会社紹介へ転送しても疑問は解決しません。移転先に同じ準備の説明があり、今も正しい内容かを読んで比べます。転送先が200を返すだけでは、回答が引き継がれた証拠になりません。

例えば /old-order-guide/ の準備説明を /guides/order-prep/ へ永久に移した場合は、内容の対応を確かめたうえで301や308などの永続転送を検討します。具体的な設定方法は、使うWordPressやサーバーに合う管理担当へ依頼します。出典：Google：リダイレクトと検索

終了した案内に代わりがない場合の404は、自然な状態です。404をすべてホームへ転送したり、空のページを作って200だけ返したりする対応は避けます。410も順位を上げる万能な設定ではありません。出典：Search Console：404エラーとサイトの対応

• リンク元：どこから開いたか。
• 読みたかった内容：来た人が欲しかった答え。
• 元資料：本文、公開履歴、削除や非公開の理由。
• 担当：内容を判断する人と、設定を変更する人。

03

HTTPの応答を調べるには？Networkで本文の要求を選びます

Chromeの開発者ツールでNetworkを開き、対象URLを再読み込みします。本文のDocument要求を選び、Request URLとStatus Codeを確認します。

図の関係と条件を、テキストでも確認する

本文の要求を選び、URL・応答・内容を見る

1Networkを開く

開発者ツールを開いてから対象URLを再読み込み。

2Documentを選ぶ

本文の要求を選ぶ。写真・faviconの要求は別。

3URLとStatusを見る

HeadersのRequest URLとStatus Codeを記録。

4本文を読む

目的の回答が読めるか照合。転送元と最後の本文は分ける。

架空の設定準備ガイド：本文要求404

復元が承認された後の200は期待値。実際の測定結果ではない。

選べない・記録されない場合は「未観測」。画像の404を本文の404として記入しません。

説明画像を大きく見る ↗

ここからはサイト担当向けです。ブラウザの開発者ツールは、ページを開くときの通信を見る道具です。設定を変えずに、どのURLへ要求し、どの応答が返ったかを確認できます。説明はChromeを例にします。項目名は版や表示言語で変わることがあります。出典：Chrome：Networkで通信を調べる

• 対象ページを開き、ブラウザの開発者ツールを開く。
• Network（ネットワーク）を選ぶ。通信を見る画面を開いてから、対象URLを再読み込みする。
• 一覧のType（種類）がDocumentになっている本文の要求を選ぶ。
• Headers（ヘッダー）でRequest URL（要求URL）とStatus Code（応答番号）を見る。
• 表示された本文を読み、欲しかった答えがあるかも確かめる。

転送があるなら、入口と最後のページを分ける

入力した古いURLから別ページへ移る場合は、古いURLの転送応答と、最後に着いた本文の要求を別々に記録します。最後が200でも、途中で何度も転送していないか、同じURLを行き来していないかを管理担当に確認します。

04

404ページに何を載せる？探し直せる3つの行き先を用意します

何が起きたかを短く伝え、ホーム・サービス一覧・案内一覧など、実際に開ける候補を置きます。来た人が自分で探し直せる案内にします。

図の関係と条件を、テキストでも確認する

探し直せる3つの行き先

探していた準備ガイドがないページが見つかりません

URLが変わったか、公開が終わった可能性。原因は決めつけない。

↓

行き先①ホーム /

会社の全体から探し直す。

行き先②サービス一覧 /services/

頼める印刷サービスを探す。

行き先③案内一覧 /articles/

発注やデータ準備の説明を探す。

来た人がリンクを選びます。全員を自動でホームへ転送しません。実在する行き先に置き換え、内容まで確認します。

説明画像を大きく見る ↗

「ページが見つかりません。URLが変わったか、公開が終わった可能性があります」。これくらい短い説明でも、次に進める道があれば役立ちます。原因がまだ分からないのに、「削除しました」「移転しました」と断定しないことが大切です。

準備ガイドを探していた人には、案内一覧が近い候補です。ただし、この3リンクは自社にも同じURLがあるという意味ではありません。自社の実在する行き先へ置き換え、押した後の内容まで確認します。

そのまま読める、案内HTMLの見本

次の見本は、案内文と3リンクを持つ小さなページです。HTMLはページの内容を書いたファイルです。このコードだけでは、HTTPの応答404は設定できません。応答を返す方法は次の章で分けて説明します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ページが見つかりません</title>
  <style>
    body { margin:0; color:#17212d; background:#f4f7fb;
      font:18px/1.8 system-ui,sans-serif; }
    main { max-width:680px; margin:48px auto; padding:32px;
      background:#fff; border-radius:20px; }
    h1 { font-size:clamp(28px,5vw,40px); line-height:1.4; }
    nav { display:grid; gap:12px; margin-top:28px; }
    a { display:block; padding:14px 18px; color:#085b91;
      border:1px solid #b8cddd; border-radius:10px; }
    a:focus-visible { outline:3px solid #085b91; outline-offset:3px; }
    @media(max-width:720px) {
      main { margin:20px 12px; padding:24px; }
    }
  </style>
</head>
<body>
  <main>
    <p>架空の印刷会社の案内</p>
    <h1>ページが見つかりません</h1>
    <p>URLが変わったか、公開が終わった可能性があります。
      次のページから、必要な案内を探し直せます。</p>
    <nav aria-label="探し直す案内">
      <a href="/">ホームへ</a>
      <a href="/services/">サービス一覧へ</a>
      <a href="/articles/">案内一覧へ</a>
    </nav>
  </main>
</body>
</html>

リンクには「ホームへ」「サービス一覧へ」と行き先を書きます。文字は小さく詰めず、キーボードで選んだリンクも見えるようにします。スマートフォンでは、3リンクを縦に並べれば選びやすくなります。

05

404ページの作り方。見た目の練習と、本番の設定を分けます

404.htmlを直接開くと見た目を確認できます。HTTPの404は、手元の学習用サーバーで確かめます。本番への設定は、現在のテーマや配信環境に合わせて管理担当が行います。

図の関係と条件を、テキストでも確認する

見た目の練習・HTTPの学習・本番を分ける

同じ学習用の案内404.html

本文のコード例から、404.htmlとserver.pyの2ファイルを用意。

↓

ファイルを直接開くfile://：見た目だけ

案内文とリンクの並びを見る。HTTPの応答を測定したことにはならない。

手元サーバーで開く127.0.0.1:8768

/missing-guide/ は404、/・/services/・/articles/ は200という実装上の期待値。

↓

別の作業本番は管理担当へ

現在のCMS・テーマ・許可されたサーバー設定、バックアップ、戻し方を確認。

学習用コードをそのまま本番へ貼りません。実際の観測結果と環境ごとの設定は別に確認します。

説明画像を大きく見る ↗

1．保存したHTMLで、見た目を見る

手元のテキストエディターで学習用の空のフォルダーを作り、第4章のHTMLのコード全体を404.htmlという名前でUTF-8のファイルにします。この章のserver.pyのコードも同じフォルダーへ保存します。404.htmlをブラウザで開くと、案内文と3リンクの並びを確かめられます。この2ファイルは学習用で、本番サイトのファイルを変更するものではありません。

2．手元のサーバーで、HTTPの応答を確かめる

Python 3を利用できる人向けの学習手順です。ターミナルで、先ほど404.htmlとserver.pyを保存した学習用フォルダーへ移り、次の1行を実行します。Pythonやターミナルが分からない場合は、無理に本番の設定を触らず、社内の技術担当と一緒に行ってください。

python3 server.py

ブラウザで http://127.0.0.1:8768/missing-guide/ を開きます。127.0.0.1は自分の端末を表すアドレスです。第3章と同じようにNetworkで本文の要求を選び、案内の内容と404を確認します。次に案内の3リンクを押し、別の学習ページへ進めるか確かめます。

止めるときは、自分が開始したターミナルでCtrl+Cを押します。ポート8768が使用中というエラーが出たら、他のアプリやプロセスを止めないでください。技術担当へ相談するか、自分の学習用の場所を調整します。

from http.server import BaseHTTPRequestHandler, HTTPServer
from pathlib import Path
from urllib.parse import urlsplit

HERE = Path(__file__).resolve().parent
PAGES = {
    "/": "架空のホーム",
    "/services/": "架空のサービス一覧",
    "/articles/": "架空の案内一覧",
}

class Handler(BaseHTTPRequestHandler):
    def do_GET(self):
        path = urlsplit(self.path).path
        if path in PAGES:
            title = PAGES[path]
            body = (
                '<!doctype html><html lang="ja"><meta charset="utf-8">'
                '<meta name="viewport" content="width=device-width,initial-scale=1">'
                f'<title>{title}</title><h1>{title}</h1>'
                '<p>手元の学習用ページです。自社の本番サイトではありません。</p>'
                '<p><a href="/missing-guide/">存在しないURLの案内を確認する</a></p>'
            ).encode("utf-8")
            status = 200
        else:
            body = (HERE / "404.html").read_bytes()
            status = 404
        self.send_response(status)
        self.send_header("Content-Type", "text/html; charset=utf-8")
        self.send_header("Content-Length", str(len(body)))
        self.end_headers()
        self.wfile.write(body)

if __name__ == "__main__":
    server = HTTPServer(("127.0.0.1", 8768), Handler)
    print("http://127.0.0.1:8768/missing-guide/ を開いてください。")
    print("この自分のサーバーを止めるには、ここで Ctrl+C を押します。")
    try:
        server.serve_forever()
    except KeyboardInterrupt:
        pass
    finally:
        server.server_close()

3．本番では、現在の環境に合う場所を確認する

ブロックテーマでは、404テンプレートが見つからないときにindexテンプレートへ進む優先順があります。サイト内検索のテンプレートとは別です。実際の応答も確認し、「見た目が出たから設定完了」としないでください。出典：WordPress：テンプレートの優先順

ErrorDocument 404 /404.html

Apacheの例は、サイト内の案内を指定する方法です。外部の https:// などのURLを指定する場合は、案内ファイルへ内部的に渡す場合と挙動が異なります。動的な処理でも元の応答を適切に返せるか確認が必要です。現在の環境で使える方法を管理担当が選び、学習コードを万能な設定として貼り付けないでください。出典：Apache：カスタムエラーページ

本番を変える前には、元の本文・テンプレート・設定と、復旧用のバックアップを確認します。WordPressはデータベースとファイルの両方が関わります。保存した場所、戻す担当、正常なURLでの確認方法まで決めてから変更します。出典：WordPress：バックアップ

06

直した後は3種類のURLを確認。今日の1ページを担当へ渡します

直した対象、普通に開けるページ、存在しないURLを分けて確認します。案内先のリンクも開き、ページ本文への要求の応答と読める内容を照合します。実際に見た結果と日時を、変更前の資料と一緒に担当へ伝えます。

図の関係と条件を、テキストでも確認する

1 URLの確認票を、担当へ渡す

内容の判断元の本文・公開履歴

公開を止めた理由、現在も載せてよい条件を内容責任者へ。

設定の判断変更前設定・復旧用資料

復元方法、バックアップと戻す担当をWeb管理担当へ。

↓

理由不明なら保留承認して復元した場合だけ、次へ

10月20日は架空の担当確認予定。実装日・完了日は未定。

↓

対象のURL同じ準備の回答＋200

復元が承認された場合の期待値。結果は未観測。

正常なURL既存のサービス＋200

変更で壊れていないか確認。結果は未観測。

ないURL案内＋404

案内先もそれぞれ開く。結果は未観測。

↩

不良があれば管理担当へ戻し、元版と照合

実際のURL・本文・応答・日時を記録。変更の拡大を止める。

予定を決めることと、実際に修復・確認を終えることは別です。予定・期待する応答・実際の結果を分けます。

説明画像を大きく見る ↗

通し例の準備ガイドでは、営業責任者が公開してよい内容かを確認し、Web管理担当が復元方法と戻し方を確認します。承認して元のURLへ戻した場合の期待値は、次のとおりです。まだ変更や測定をした結果ではありません。

対象の1ページだけ直ったように見えても、他の正常ページが壊れていたら完了とはいえません。案内文のリンクが古いままでも、来た人はまた迷います。本文の要求、読める内容、行き先まで一緒に確認します。

リンクの誤記ならリンク元を直す。復元なら掲載理由を確認する。移転なら旧新の回答を比べる。代わりがない削除なら、404などと探し直せる案内を用意する。対応が違っても、来た人の疑問を置き去りにしないという基準は同じです。

今日の一歩：困っている1 URLを選ぶ

「全部の404を一度に直す」から始めなくても大丈夫です。必要な案内に届かないURLを一つ選び、どこから来たか、何を読みたかったか、元の本文と公開理由が分かるかを書きます。理由が不明なら保留したまま、次に判断する人へ渡してください。

具体例：準備ガイドの対処を決める8項目

以下は、印刷発注前の準備ガイドが開かない場面を整理した架空例です。元の下書きはありますが、非公開の理由は不明なので復元は保留です。資料があること、公開してよいこと、変更後に正しく開くことを分けて読みます。

まとめ：404は、元の内容と公開理由から直し方を選ぶ

リンクの誤記ならリンク元を直す。意図せず消えたなら掲載条件を確認して復元を検討する。同じ回答を永久に移したなら対応するページへ転送する。代わりがないなら、404などと探し直せる案内を用意します。元の本文が残っていても、公開を止めた理由が分からない間は、復元や転送を保留してください。

画面に「見つかりません」と出ることと、HTTPの404が返ることは別です。Networkでページ本文のDocument要求を選び、URL・応答番号・読める内容を確かめます。変更後は対象のページ、今まで正常だったページ、存在しないURLを分け、案内先のリンクも開きます。200や404という番号だけで、説明の正しさや検索成果まで判断しません。