A More Useful 404 Page in Hugo

A 404 page appears after something has already gone wrong. Repeating “Page not found” is accurate, but it leaves the visitor with the same broken URL and no useful next move.

I prefer treating the page as a small recovery screen: explain what may have happened, offer a few likely destinations, and keep the response itself fast.

Start with layouts/404.html

A common location for the Hugo template is:

layouts/
└── 404.html

The surrounding blocks depend on the theme, but the useful part can stay small:

{{ define "main" }}
  <main>
    <h1>Page not found</h1>

    <p>
      The page may have moved or the link may be wrong.
    </p>

    <p>
      <a href="{{ site.Home.RelPermalink }}">
        Go to homepage
      </a>
    </p>
  </main>
{{ end }}

That already gives someone a way out. It is more useful than a decorative illustration followed by another dead end.

Offer the paths people are likely to want

Home is not always the best answer. A small list can point to the site’s main areas:

<ul>
  <li><a href="/blogs/">Blog</a></li>
  <li><a href="/projects/">Projects</a></li>
  <li><a href="/foto/">Photography</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>

If the site has search, link to it rather than trying to guess the missing page:

<p>
  Or try <a href="/search/">searching the site</a>.
</p>

A blog can also show a short recent-post list:

<h2>Recent articles</h2>

<ul>
  {{ range first 5
    (where site.RegularPages "Section" "blogs") }}
    <li>
      <a href="{{ .RelPermalink }}">
        {{ .LinkTitle }}
      </a>
    </li>
  {{ end }}
</ul>

I would stop at a handful of choices. The 404 page does not need to become a miniature copy of the entire site.

Keep the message human and the status technical

This tells the visitor what happened without sounding like a server log:

I couldn't find that page. It may have moved, or the link may be old.

The hosting platform must still return an actual HTTP 404 status. Friendly HTML does not replace the status browsers and search engines use to understand that the resource is missing.

Likewise, a helpful page does not replace redirects. If /old-article/ deliberately moved to /new-article/, add a permanent redirect. The 404 page is for URLs the site cannot map.

Keep the fallback dependable

A complete minimal version might be:

{{ define "main" }}
  <main class="not-found">
    <h1>Page not found</h1>

    <p>
      The page may have moved or no longer exists.
    </p>

    <p>
      <a href="/">Back to homepage</a>
      or
      <a href="/blogs/">browse the blog</a>.
    </p>
  </main>
{{ end }}

Use the site’s normal typography and navigation, but avoid making this one of its heaviest pages. If analytics or server logs already exist, 404 reports can reveal broken internal links; I would not add a large tracking setup only for that purpose.

The visitor is still on your site. A useful 404 page acknowledges the broken path and makes the next click obvious, then gets out of the way.