404ページは必要？Astroで作るエラーページとユーザーを戻す導線

記事のURLを変更したり、古いリンクが残っていたり、手入力でURLを間違えたりすると、存在しないページへアクセスされることがある。

そのときに表示されるのが404ページ。

サイトを作り始めたばかりだと後回しにしやすい。トップページや記事本文の方が優先度は高いし、404ページは正常な導線からアクセスする場所でもない。

ただ、記事数が増えるとURLも増える。

外部サイトから古いURLへリンクされることもある。SNSに投稿したURLが後から変わる場合もある。検索結果に古いURLが一時的に残ることもある。

存在しないURLへ来た人にブラウザやホスティング側の簡素なエラーだけを返すより、サイト内へ戻れる道を用意しておく意味はある。

404ページは検索順位を上げるためのページではない#

Google Search Centralでは、存在しないページには404 Not Foundまたは410 Goneを返すよう案内している。

404自体は異常な状態ではない。

ページを削除した。URLを間違えた。外部サイトに古いリンクが残っている。

Webサイトを運用していれば普通に発生する。

カスタム404ページを作ったから検索順位が上がる、という話でもない。Googleの説明でも、カスタム404ページはユーザー向けに作るものとして扱われている。

役割はかなり単純で、

目的のページは存在しない
↓
そのことを明確に伝える
↓
サイト内へ戻る選択肢を出す

というもの。

SEOで気を付けるのは、見た目よりHTTPステータスの方になる。

※ 記事内の図は内容を整理するために作成した概念図です。各社の公式資料や実際の製品画面ではありません。

画面には「ページが見つかりません」と表示しているのに、サーバーが200 OKを返すとsoft 404として扱われることがある。

見た目が404ページでも、HTTP上では正常なページになっている状態。

これは避けたい。

すべてHomeへ飛ばすのも違う#

存在しないURLへアクセスされたとき、全部トップページへリダイレクトすれば離脱を防げそうにも見える。

ただ、この方法は使わない方がいい。

Googleは、関連性のない複数の古いURLを一律にホームページへリダイレクトする構成について、ユーザーを混乱させ、soft 404として扱われる可能性があると説明している。

ページの移動先が明確なら301。

例えば、

/blog/old-astro-guide/
↓
/blog/new-astro-guide/

のように、古いページと新しいページが実質的に対応しているなら301リダイレクトが合う。

代わりのページがないなら404。

この判断を分ける。

ページが移動した
→ 301

ページが削除され、代替がない
→ 404 または 410

単なる入力ミス
→ 404

「404を見せたくないから全部Homeへ送る」より、存在しないURLは存在しないと返した方が処理としても分かりやすい。

404ページには何を置くか#

Googleはカスタム404ページについて、サイトと同じ見た目やナビゲーションを使い、ホームページや人気記事へのリンクを置く方法を案内している。

ゆまラボなら、そこまで複雑なページは必要ない。

最低限、

• ページが見つからないこと
• Home
• 記事一覧

があれば戻れる。

記事が増えている現在の構成なら、

• カテゴリ
• 連載

へのリンクも使いやすい。

検索フォームは、サイトに検索機能があるなら候補になる。

検索機能がないのに404ページのためだけに追加する必要はない。

人気記事も同じ。

アクセス数から自動で取得する仕組みがあるなら置けるが、404ページのために固定リンクを大量に管理し始めると運用が増える。

404ページは情報量を増やす場所ではない。

「ここにはページがない」と伝えたあと、別の場所へ移れることが分かれば十分。

Astroなら404.astroを置く#

Astroでは、カスタム404ページを作る方法が公式に用意されている。

src/pages/に、

src/pages/404.astro

または、

src/pages/404.md

を作る。

Astroのビルドでは404.htmlとして出力され、多くのデプロイサービスがこのファイルを404ページとして利用する。

最小限なら次のようなページで作れる。

---
const title = 'ページが見つかりません';
---

<main>
  <p>404</p>
  <h1>{title}</h1>
  <p>URLが変わったか、ページが削除された可能性があります。</p>

  <nav aria-label="404ページのナビゲーション">
    <a href="/">Home</a>
    <a href="/blog/">記事一覧</a>
    <a href="/category/">カテゴリ</a>
    <a href="/series/">連載</a>
  </nav>
</main>

実際のサイトでは、このまま独立したデザインにするより、通常ページで使っているヘッダー、フッター、CSSを再利用した方が自然。

404へ来た瞬間だけ別サイトのような見た目になると、リンクを押してよいのか分かりにくい。

ゆまラボなら、現在のロゴとナビゲーションを残し、本文中央だけ404用に変える程度でよい。

Cloudflare Workersでは404.htmlをどう返すか#

ゆまラボはAstroをCloudflare Workersで公開している。

Cloudflare WorkersのStatic Assetsには、存在しないアセットをどう扱うか決めるnot_found_handlingがある。

静的サイトでカスタム404を使う場合は、現在の公式ドキュメントで次の設定が案内されている。

{
  "assets": {
    "directory": "./dist",
    "not_found_handling": "404-page"
  }
}

not_found_handlingを404-pageにすると、要求されたファイルが見つからない場合に、近い位置の404.htmlを返し、HTTPステータスも404 Not Foundになる。

Astro側では、

src/pages/404.astro
↓
astro build
↓
dist/404.html

Cloudflare側では、

存在しないURL
↓
assetが見つからない
↓
404.htmlを返す
↓
HTTP 404

という流れになる。

Astroで404ページを作っても、ホスティング側が別のルールでindex.htmlを200 OKとして返す構成になっていると意味が変わる。

SPA向けのsingle-page-applicationは、存在しないアセットへindex.htmlを200 OKとして返す設定。

Astroで静的ブログを公開し、404ページを使いたい場合は、SPA用の設定と混同しない方がいい。

表示確認だけでなくステータスも見る#

404ページを作ったあとに確認したいのは画面だけではない。

存在しないURLへアクセスして、カスタム404が表示される。

そのうえでHTTPステータスが404になっていることも確認する。

ブラウザのDevToolsならNetworkタブで確認できる。

コマンドなら次のように見られる。

curl -I https://example.com/does-not-exist/

正常ならレスポンスに、

HTTP/2 404

のようなステータスが返る。

見た目だけ確認して終わると、soft 404を見逃す可能性がある。

もう一つ確認するのは、404ページ内のリンク。

Homeへ戻れるか。

記事一覧へ移動できるか。

スマホでリンクが押しにくくなっていないか。

404ページは通常ページより閲覧回数が少ないので、一度作るとその後ほとんど見なくなる。その分、実装時にリンク切れまで確認しておいた方がよい。

ゆまラボなら作っておく意味はある#

現在のゆまラボは記事数が増え、カテゴリ、連載、タグ、固定ページへの導線も増えている。

公開するURLが増えれば、古いリンクや入力ミスから404へ到達する可能性も増える。

404ページを作ったからアクセスが増えるわけではない。

ただ、せっかくサイトへ来た人に、

404 Not Found

だけ見せて終わるより、

ページが見つからない
Homeへ戻る
記事一覧を見る
カテゴリから探す
連載から探す

まで用意した方が、サイト内を続けて見られる。

実装もAstroなら404.astroを1ページ追加するだけで始められる。

Cloudflare Workers側も404-pageとして扱えば、見た目をサイトに合わせながら正しい404ステータスを維持できる。

このページで優先したいのは装飾より戻り道。

通常のヘッダーとフッターを再利用し、404であることを明確に表示する。そのうえでHomeと記事一覧へ戻れる。

ゆまラボなら、まずその程度の構成で十分だと思う。

参考#

• Astro Docs - Pages / Custom 404 Error Page
• Cloudflare Workers Docs - Static Site Generation and custom 404 pages
• Cloudflare Workers Docs - Static Assets
• Google Search Central - Troubleshoot Google Search Crawling Errors
• Google Search Central - Site Moves and Migrations