404ページの作り方｜置く部品と404を返す設定、noindexと確かめ方

サイトのリニューアルや記事の整理でURLが変わったあと、古いURLを開くと、英語の「Not Found」だけの画面が出ることがあります。検索結果やほかのサイトのリンクから来た人は、メニューもロゴも無いその画面から、次に開くページを探せません。

404ページは、見た目を整える前に、存在しないURLで応答の番号(ステータスコード)として404を返す設定から決めるのが近道です。この記事では、404ページに置く部品とサイトの仕組みごとの設定の仕方、noindex の要否と公開後の確かめ方を解説します。

記事を読めば、自社のサイトの仕組みに合わせて404ページを作り、正しく動いているかを自分で確かめられます。404ページは、404の番号を返したまま、サイトのヘッダーとフッターで次のページへ案内できれば完成です。

404ページの作り方は設定・部品・確認の3つの手順で進める

404ページは、存在しないURLを開いた人にページが見つからないことを伝え、サイトの中の別のページへ案内するためのページです。作る作業は、サーバーやCMSの設定・ページの中身・公開後の確認の3つに分かれます。

404ページを作る手順は、以下のとおりです。

1. サイトの仕組みに合わせて、存在しないURLで404ページを出す設定をする
2. 404ページに、見つからないことを伝える文と、次に開くページへのリンクを置く
3. 存在しないURLを開いて、応答の番号と見た目を確かめる

3つの手順のうち最も大切なのは、404ページを出すときに応答の番号として404を返すことです。Google は、400番台(4xx)の番号を返すURLをインデックスに登録しません。すでに登録されているURLも、4xx を返すようになるとインデックスから削除されます。

代わりのページが無いまま削除したページが404を返すこと自体は、必ずしも問題ではありません。避けたいのは、存在しないURLが200の番号で返る作りと、存在しないURLをまとめてトップページへ転送する作りです。

応答の番号が200のページは、中身が空白やエラーの文だけの場合、サーチコンソールでソフト404として表示されます。多くのURLを関連の薄い1つのURLへ転送した場合も、利用者が混乱し、ソフト404とみなされることがあります。

» サイトリニューアルのSEOは転送の対応表で守る｜注意点と前後の比べ方

404ページに置く部品は「見つからないこと」と「次に開くページ」

404ページの中身は、凝ったデザインよりも、来た人が次の行動を選べるかで決まります。404ページに置く部品と、株式会社メリルが運営するメディアでの置き方は、以下のとおりです。

• 見出しと1文でページが見つからないことを伝える
• トップと記事一覧へのリンクを本文に置く
• サイト共通のヘッダーとフッターをそのまま使う
• メリルの3つのメディアの404ページに置いている部品

見出しと1文でページが見つからないことを伝える

404ページの見出し(h1)には、開いたページが見つからないことを言葉で書きます。見出しの例は「ページが見つかりません」「お探しのページは見つかりませんでした」です。

オウンドメディア相談室の404ページ(https://blog-soudan.com/owned-media/ の下の存在しない URL を開いたもの)の画面(2026年10月31日)。

見出しの下には、ページが見つからない理由として考えられることを1文で添えます。404ページが出る主な理由は、URLの打ち間違い・ページの移動によるURLの変更・ページの削除の3つです。来た人がどの理由で着いたのかはサイトの側で判断できないため、文は「URLが変わったか、ページが削除された可能性があります」のように可能性として書きます。

ページのタイトル(title タグ)にも見出しと同じ言葉を入れ、サイト名を続けると、ブラウザのタブや履歴でもどのサイトの404ページかがわかります。メリルが運営する3つのメディアのタイトルは、どれも「ページが見つかりません｜メディア名」の形です。

トップと記事一覧へのリンクを本文に置く

404ページの本文には、来た人が次に開くページへのリンクを置きます。本文に置くリンクの候補は、以下のとおりです。

• トップページ
• 記事一覧・新着記事
• カテゴリの一覧
• サイト内検索のページ

トップページへのリンクは必ず置き、記事の多いメディアなら、記事一覧かカテゴリの一覧へのリンクも並べます。本文のリンクは1〜2本に絞ってかまいません。カテゴリの一覧などへの入り口は、サイト共通のヘッダーとフッターにも並ぶからです。

サイト共通のヘッダーとフッターをそのまま使う

404ページは、ほかのページと同じヘッダーとフッターの中に作ります。ロゴやメニューが同じ位置にあれば、来た人は同じサイトの中にいるとわかり、いつもの操作で別のページへ移れます。

オウンドメディア相談室の404ページ(https://blog-soudan.com/owned-media/ の下の存在しない URL を開いたもの)の画面(2026年10月31日)。

サーバーの既定の404の画面には、サイトのメニューもロゴもありません。検証用の Apache で ErrorDocument を書かずに存在しないURLを開くと、返ってきたのは「Not Found」の見出しと英語の1文だけの、236バイトの画面でした。

CMSや静的サイトの仕組みで作る場合は、ほかのページと同じ共通の型(レイアウト)を404ページにも使います。共通の型を使えば、メニューを変えたときに404ページのメニューも一緒に変わります。

メリルの3つのメディアの404ページに置いている部品

メリルは、WWS メディア(wwstd.jp/media/)・Web集客ブック(hands-plus.com/media/)・オウンドメディア相談室(blog-soudan.com/owned-media/)の3つのメディアを運営しています。3つのメディアの404ページを、2026年10月30日に公開用に書き出した HTML から数えた結果は、以下の表のとおりです。

項目	オウンドメディア相談室	WWS メディア	Web集客ブック
見出し(h1)	ページが見つかりません	ページが見つかりません	ページが見つかりません
本文に置いたリンク	トップ	トップ・記事一覧	トップ
ページ全体のリンク(a タグ)	16本	34本	23本
うち本文の外(ヘッダー・フッターなど)	15本	32本	22本
リンク先のURLの種類	12種類	13種類	16種類
robots の指定	noindex	noindex	noindex

本文に置いたリンクは1〜2本でも、ページ全体では16〜34本のリンクがありました。リンクの大半は、どのページにも出るヘッダーとフッターのものです。3つのメディアとも、カテゴリのページと問い合わせか相談のページへのリンクを含んでいます。

WWS メディアの34本には、画面の幅で切り替わる2つのメニュー(広い画面用と幅860px以下の画面用)に同じリンクが並ぶ分が含まれます。リンク先のURLの種類で数えると、3つのメディアは12〜16種類でした。

404ページを出す設定はサイトの仕組みで選ぶ

404ページのファイルを作っても、存在しないURLでそのファイルを出す設定が無ければ、来た人には表示されません。主な仕組みごとの設定の場所は、以下のとおりです。

• Apacheのサーバーは.htaccessのErrorDocumentで指定する
• WordPressはテーマの404用のテンプレートが使われる
• Astroはsrc/pages/404.astroから404.htmlを書き出す
• Studioはページのタイプを404ページにする

Apacheのサーバーは.htaccessのErrorDocumentで指定する

HTML のファイルを置いて公開するサイトを Apache のサーバーで動かしている場合は、.htaccess の ErrorDocument で404ページを指定します。ErrorDocument は、エラーの番号ごとに、代わりに出すページを決める設定です。

サイトの一番上のフォルダに置いた404.htmlを存在しないURLで出すには、同じフォルダの .htaccess に次の1行を書きます。

ErrorDocument 404 /404.html

ErrorDocument が .htaccess で効くのは、サーバーの設定(AllowOverride)で FileInfo が許可されている場合に限られます。レンタルサーバーで .htaccess が使えるかは、サーバーのマニュアルで確かめてください。

» htaccessのリダイレクトの書き方｜301の設定例と確かめ方・注意点

WordPressはテーマの404用のテンプレートが使われる

WordPress では、存在しないURLを開くと、使っているテーマの404用のテンプレートで画面が作られます。クラシックテーマで使われるのは404.phpで、テーマに404.phpが無ければ index.php が使われます。

ブロックテーマでは、テンプレートが PHP ではなく HTML のファイルになりますが、テンプレートが選ばれる順番は同じです。404ページの中身を変えるときは、テーマの404用のテンプレートを編集します。

固定ページで作ったページを404ページとして出すプラグインを使う場合は、差し替えたあとに、存在しないURLの応答の番号が404のままかを確かめます。

Astroはsrc/pages/404.astroから404.htmlを書き出す

Astro で作る静的サイトでは、src/pages に404.astroか404.mdを作ると、ビルドで404.htmlが書き出されます。多くのデプロイサービスは、書き出された404.htmlを見つけて404ページに使います。

メリルが運営する3つのメディアは、どれも Astro で作ったサイトです。3つとも、src/pages/404.astro から書き出した404.htmlを、ドメインのサブディレクトリに置いたメディアのフォルダの .htaccess で指定しています。

3つのメディアの .htaccess に書いた ErrorDocument の行は、以下のとおりです。

• オウンドメディア相談室: ErrorDocument 404 /owned-media/404.html
• WWS メディア: ErrorDocument 404 /media/404.html
• Web集客ブック: ErrorDocument 404 /media/404.html

サブディレクトリに置いたサイトでは、ErrorDocument のパスに、ドメインの一番上からのフォルダの名前を含めて書きます。

Studioはページのタイプを404ページにする

ノーコードの制作ツールの Studio では、作ったページのタイプを「404ページ」に変えると、そのページが404ページになります。404ページを設定する手順は、以下のとおりです。

1. ページパネルを開き、404ページにしたいページを選ぶ
2. 右パネルの設定を開く
3. 「タイプ」のプルダウンから「404ページ」を選ぶ

モーダルは404ページに設定できません。サイトにパスワードの保護をかけている間は、設定した404ページは表示されず、応答の番号は200になります。

htaccessで404ページを指定するときの4つの注意点

ErrorDocument は1行で書ける設定ですが、書き方によっては404の番号が返らなくなったり、404ページの見た目が崩れたりします。メリルが検証用の Apache 2.4.67 に書き方の違う5つのサイトを置き、12本のURLの応答を確かめた結果から、注意点をまとめると以下のとおりです。

• ErrorDocumentにはスラッシュから始まるパスを書く
• 指定したパスに404ページのファイルを置く
• サブディレクトリのサイトはフォルダの.htaccessに書く
• 404ページの中のリンクと画像はスラッシュから始まるパスで書く

ErrorDocumentにはスラッシュから始まるパスを書く

ErrorDocument には、http:// や https:// から始まるURLではなく、/ から始まるパスを書きます。http:// から始まるURLを書くと、Apache は同じサーバーの中のページでも、来た人のブラウザに転送を返すためです。転送を受けたブラウザには、元のエラーの番号ではなく、転送の番号が届きます。

検証用の Apache で、2つの書き方の応答を比べた結果は、以下の表のとおりです。

ErrorDocument の書き方	存在しないURLの応答	404ページの出方
ErrorDocument 404 /owned-media/404.html	404	開いたURLのまま404ページが出る
ErrorDocument 404 http://full.test/media/404.html	302	404.htmlのURLへ転送され、転送先は200

表の full.test は、検証用に付けたドメインの名前です。http:// から始まるURLを書いた場合も、転送先で404ページは表示されます。画面だけでは違いに気づけないため、ErrorDocument を書いたら応答の番号を確かめましょう。

指定したパスに404ページのファイルを置く

ErrorDocument に書いたパスにファイルが無いと、Apache は既定の「Not Found」の画面を出します。検証用の Apache で置いていない /media/not-here.html を指定すると、応答は404のまま、既定の画面に「Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.」の1文が足されました。

足された1文は、ErrorDocument で出そうとしたページも見つからなかったことを示します。404ページのファイルの場所やフォルダの名前を変えたときは、ErrorDocument のパスも合わせて書き換えます。

サブディレクトリのサイトはフォルダの.htaccessに書く

.htaccess の ErrorDocument は、.htaccess を置いたフォルダとその下にだけ効きます。WordPress などの別のサイトと同じドメインのサブディレクトリにメディアを置く場合は、メディアのフォルダの .htaccess に書くと、ドメインのほかの場所の404の扱いを変えずに済みます。

検証用の Apache で /owned-media/ の .htaccess にだけ ErrorDocument を書き、3本のURLを開いた結果は以下のとおりです。

• /owned-media/nothing/: 404で、オウンドメディア相談室の404ページ
• /owned-media/a/b/c/nothing.html: 404で、オウンドメディア相談室の404ページ
• /other/nothing/: 404で、Apache の既定の画面

/owned-media/ の下では、1階層下でも3階層下でも、同じ404ページが404の番号で返りました。フォルダの外の /other/ には、/owned-media/ の .htaccess の指定は効いていません。

404ページの中のリンクと画像はスラッシュから始まるパスで書く

404ページの中のリンク・画像・CSS は、/ から始まるパスか、https:// から始まるURLで書きます。ErrorDocument で出す404ページは開かれたURLのまま表示されるため、相対パスは開かれたURLの階層を基準にたどられるからです。

検証用の Apache の404ページに相対パスの style.css と / から始まる /media/style.css を書き、/media/a/b/nothing/ を開いた結果は以下のとおりです。

• style.css: /media/a/b/nothing/style.css を指し、応答は404
• /media/style.css: /media/style.css を指し、応答は200

相対パスで書いたCSSは、開かれたURLの階層によって指す場所が変わり、読み込めなかったときは見た目が崩れます。メリルの3つのメディアの404.htmlにあるURLを持つ属性(href・src など)は97個で、ページ内の移動に使う #main の1個を除く96個が / か https:// から始まっていました。

404ページを手で書く場合は、リンクと画像のパスを / から書き始めます。

404ページのnoindexは404.htmlのURLがクロールされたときの備えになる

404ページに noindex を付けるかは、404ページがどのURLで、どの番号で返るかで考えます。noindex の要否を決めるために押さえる事実は、以下の3つです。

• 404を返すURLは検索結果に出ない
• 404ページのファイルのURLは200を返す
• JavaScriptで画面を作るサイトはnoindexか404のURLへの転送を使う

404を返すURLは検索結果に出ない

存在しないURLで404の番号が返っていれば、404ページに noindex が無くても、そのURLは検索結果に出ません。Google が、4xx の番号を返すURLをインデックスに登録しないためです。

サーバーで404の番号を返せるサイトでは、noindex を付けるかより先に、存在しないURLで404が返るかを確かめます。

404ページのファイルのURLは200を返す

404.htmlのような404ページのファイルそのもののURLを開くと、応答は200になります。検証用の Apache でも、存在しないURLでは404で返ったオウンドメディア相談室の404ページが、/owned-media/404.html を直接開くと200で返りました。

noindex は、ページが Google 検索に表示されないようにする指定です。404ページに次の meta タグを書いておけば、404.htmlのURLがクロールされても、検索結果に出るのを防げます。

<meta name="robots" content="noindex">

メリルの3つのメディアは、どれも404ページの head に、この meta タグを書いています。robots.txt で404.htmlをブロックすると、クローラーは noindex を読めないため、noindex を使う404ページは robots.txt で止めません。

» robots.txtの書き方｜記述例と置く場所・確かめ方、noindexとの違い

JavaScriptで画面を作るサイトはnoindexか404のURLへの転送を使う

画面をブラウザの JavaScript で作るシングルページアプリでは、ページの切り替えをブラウザの中で行うため、意味のある応答の番号をサーバーから返すのが難しい場合があります。シングルページアプリでソフト404を避ける方法は、以下の2つです。

• サーバーが404を返すURL(/not-found など)へ、JavaScript で転送する
• JavaScript で、エラーの画面に noindex の robots の meta タグを足す

サーバーで404を返せる静的サイトや WordPress のサイトでは、404の番号を返す設定を先に整えます。

404ページを作ったら存在しないURLを開いて応答の番号を確かめる

404ページの設定は、画面を見ただけでは正しく動いているかがわかりません。見た目は同じ404ページでも、書き方によって応答の番号が302や200になるためです。公開したあとに確かめることは、以下の3つです。

• ブラウザのデベロッパーツールで応答の番号を見る
• 深い階層の存在しないURLでも同じ404ページが出るかを見る
• サーチコンソールで「見つかりませんでした(404)」と「ソフト404」を見る

ブラウザのデベロッパーツールで応答の番号を見る

応答の番号は、Chrome のデベロッパーツールの「ネットワーク」パネルで確かめられます。存在しないURLの応答の番号を見る手順は、以下のとおりです。

1. 自社のサイトのURLに、存在しないパスを付けて開く(例: https://example.com/not-found-test/)
2. Mac では Command+Option+J、それ以外では Control+Shift+J を押してデベロッパーツールを開く
3. 「ネットワーク」パネルを開き、ページを再読み込みする
4. 開いたURLの行の「ステータス」が404かを見る

ステータスが302や301なら、どこかで転送が起きています。ErrorDocument に http:// から始まるURLを書いていないか、存在しないURLをトップページへ転送する設定が無いかを見直します。

深い階層の存在しないURLでも同じ404ページが出るかを見る

存在しないURLは、フォルダの一番上だけでなく、2〜3階層下のパスでも開きます。相対パスで書いたCSSや画像は、開かれたURLの階層によって読み込めなくなるため、浅いURLだけでは見た目の崩れに気づけません。

メリルが2026年10月30日に WWS メディアと Web集客ブックで3階層下の存在しないURLを1回ずつ開いた結果は、以下の表のとおりです。

開いたURL	応答の番号	転送	返ってきたページ	robots の指定
wwstd.jp/media/oms-404-check-20261030/a/b/	404	なし	WWS メディアの404ページ	noindex
hands-plus.com/media/oms-404-check-20261030/a/b/	404	なし	Web集客ブックの404ページ	noindex

2つのメディアとも、返ってきた HTML は、公開用に書き出した404.htmlと同じ中身でした。どちらの404.htmlも、リンクと画像のパスが / か https:// から始まるため、深い階層のURLで開いても指す場所は変わりません。

サーチコンソールで「見つかりませんでした(404)」と「ソフト404」を見る

公開からしばらくしたら、サーチコンソールのページのインデックス登録レポートで、「見つかりませんでした(404)」と「ソフト404」のURLを見ます。2つの理由に並んだURLの扱い方は、以下のとおりです。

• 見つかりませんでした(404): 移動したページなら新しいURLへ301で転送し、代わりの無い削除なら404のままにする
• ソフト404: 本当に存在しないページなら404を返すように直し、存在するページならURL検査ツールの公開URLのテストで、Google から見える画面を確かめる

ソフト404に存在しないはずのURLが並んでいるときは、デベロッパーツールでそのURLを開き、404ページが200の番号で返っていないかを確かめます。

404ページの作り方は404の番号を返す設定から始めよう

404ページの作り方は、見た目を整える前に、存在しないURLで404の番号が返る設定を決めることから始まります。

記事の要点は、以下のとおりです。

• 404ページには、見つからないことを伝える見出しと1文、トップや記事一覧へのリンクを置く
• ヘッダーとフッターは、ほかのページと同じものを使う
• Apache のサーバーでは、ErrorDocument に / から始まるパスを書く
• 404ページの中のリンクと画像は、/ から始まるパスで書く
• noindex は、404.htmlのURLがクロールされたときの備えとして付ける
• 公開したら、深い階層の存在しないURLを開いて、応答の番号が404かを確かめる

404ページを一度整えておけば、リニューアルや記事の整理でURLが変わっても、迷った人をサイトの中へ戻せます。まずは自社のサイトのURLに存在しないパスを付けて開き、デベロッパーツールの「ネットワーク」パネルで応答の番号を確かめてください。