カスタム404ページ

訪問者が存在しないアドレスにアクセスすると、Webサーバーは要求されたページが見つからないことを示す 404 Not Found レスポンスを返します。

アドレスを間違えて入力した場合、ページが削除または移動された場合、古いリンクからアクセスした場合などに404ページが表示されます。

Essepageでは、ページが存在しない場合、デフォルトで次のような404ページが表示されます。

/public フォルダーに +404.essepage ファイルを作成すると、デフォルトページの代わりに、内容とデザインを自由に設定した404ページを表示できます。

404ページを作成する

404ページは次の場所に作成します。

/public/+404.essepage

Webサイトのファイル構成は次のようになります。

/public
├── +page.essepage
├── +404.essepage
├── about
│   └── +page.essepage
└── contact
    └── +page.essepage

404ページのコンテンツを記述する

/public/+404.essepage ファイルに次のコードを記述してください。

<head>
    <title>Page Not Found</title>
</head>

<main>
    <p>404</p>

    <h1>Page Not Found</h1>

    <p>
        The page you are looking for does not exist
        or may have been moved.
    </p>

    <a href="/">Go to Home</a>
</main>

404という数字だけを表示するのではなく、訪問者が次に何をすればよいか分かるように、短い説明と移動先のリンクを提供することをおすすめします。

404ページを公開する

404ページを作成したら、ファイルを保存して公開します。

/public/+404.essepage ファイルを右クリックします。
公開（Publish）を選択します。
公開が完了するまで待ちます。

その後ファイルを修正するときは、他のページと同じ流れで作業します。

コードを修正します。
ファイルを保存します。
プレビューで結果を確認します。
変更を適用（Apply Changes）を選択します。
公開サイトで最終結果を確認します。

変更を適用した直後は、キャッシュが更新されるまで最大1分ほどかかる場合があります。

404ページを確認する

404ページが正しく表示されるか確認するには、サイトに存在しないアドレスへアクセスしてください。

プロジェクトコードが my-website の場合は、次のようなアドレスを使用できます。

https://espg.dev/my-website/page-does-not-exist

page-does-not-exist に対応するページが存在しなければ、作成した404ページが表示されます。

カスタムドメインを接続している場合も、同じ方法で確認できます。

https://example.com/page-does-not-exist

訪問者向けのリンクを追加する

404ページからサイトを引き続き利用できるように、主要なページへのリンクを提供できます。

先ほど作成したホームページへのリンクを、次のようなナビゲーションに置き換えてみましょう。

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
</nav>

404ページには、分かりやすい案内と主要なコンテンツへ移動できるリンクを提供することをおすすめします。

詳しい推奨事項については、Google Search Centralの404エラーに関するガイドを参照してください。

404ページが表示されない場合

カスタム404ページが表示されない場合は、次の項目を確認してください。

ファイルが /public フォルダー内にあるか
ファイル名が +404.essepage になっているか
404ページファイルを公開しているか
修正後に変更を適用（Apply Changes）を選択したか
テストしているアドレスに対応するページが実際に存在しないか
テストしているアドレスがパラメータフォルダーのパスと一致していないか
キャッシュが更新されるまで待ってからページを再読み込みしたか

次のステップ

カスタム404ページを作成したら、次のドキュメントに進んでください。

複数のページで共通の構造を使用する: レイアウト
ホームページと主要なページを接続する: ナビゲーションとリンク
URLの一部を値として受け取る: パラメータフォルダー
ファイル名の詳しい規則を確認する: ファイル命名規則
公開サイトの変更を管理する: 公開、適用、一括適用

言語

目次

Title