Custom 404 Pages

When a visitor opens an address that does not exist, the web server returns a 404 Not Found response, indicating that it could not find the requested page.

A 404 page may appear when an address is entered incorrectly, a page has been deleted or moved, or a visitor follows an outdated link.

By default, Essepage displays the following 404 page when the requested page does not exist.

You can create a /public/+404.essepage file to replace the default page with a 404 page that uses your own content and design.

Create a 404 Page

Create the 404 page at the following location:

/public/+404.essepage

The website’s file structure will look like this:

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

Write the 404 Page Content

Add the following code to /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>

Instead of displaying only the number 404, provide a short explanation and a link that helps visitors decide what to do next.

Publish the 404 Page

After writing the 404 page, save and publish the file.

Right-click /public/+404.essepage.
Select Publish.
Wait for publishing to finish.

When you edit the file later, follow the same workflow used for other pages:

Edit the code.
Save the file.
Check the result in the preview.
Select Apply Changes.
Check the final result on the live site.

After applying changes, it may take up to one minute for the cache to refresh.

Check the 404 Page

To confirm that the 404 page is displayed correctly, open an address that does not exist on your site.

If your project code is my-website, you can use an address such as:

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

If no page exists at page-does-not-exist, the custom 404 page will be displayed.

If you have connected a custom domain, you can check it in the same way:

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

Add Links for Visitors

You can provide links to important pages so visitors can continue using your site from the 404 page.

Replace the homepage link in the previous example with navigation such as:

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

A useful 404 page should clearly explain what happened and provide links to important content.

For more recommendations, see Google Search Central’s guide to 404 errors.

If the 404 Page Is Not Displayed

If your custom 404 page is not displayed, check the following:

The file is inside /public.
The file is named +404.essepage.
The 404 page file has been published.
You selected Apply Changes after editing it.
No existing page is connected to the address you are testing.
The address does not match the path of a parameter folder.
You waited for the cache to refresh and then reloaded the page.

Next Steps

After creating a custom 404 page, continue with the following guides:

Use a shared structure across multiple pages: Layouts
Connect the homepage and important pages: Navigation and Links
Receive part of a URL as a value: Parameter Folders
Learn the detailed rules for file names: File Naming Rules
Manage changes to the live site: Publish, Apply, and Apply All

Languages

On this page

Title