Smart Multilingual 404 Pages in Jekyll

Why Localized 404 Pages Matter

Standard 404 pages serve a purpose: to notify users that the page they're looking for no longer exists. But for multilingual Jekyll sites, a generic 404 page in one language can confuse users browsing in another. Creating localized, intelligent 404 pages improves user experience, reduces bounce rate, and strengthens the credibility of your brand internationally.

Step 1: Set Up a Global 404 Page Template

Start by creating a 404.html file in the root of your Jekyll site. This file will use Liquid logic to detect the user’s preferred language and redirect or render accordingly.

Basic 404 Structure

---
layout: default
permalink: /404.html
---

<script>
  const supportedLangs = ['en', 'es', 'fr', 'de', 'jp'];
  const userLang = (navigator.language || navigator.userLanguage).substring(0, 2);

  const matchedLang = supportedLangs.includes(userLang) ? userLang : 'en';
  const redirectURL = `/${matchedLang}/404/`;

  window.location.href = redirectURL;
</script>

<noscript>
  <h2>Page not found</h2>
  <p>It seems you landed on a page that doesn't exist. Please use the navigation above.</p>
</noscript>

This script detects the browser’s language and redirects to a localized version of the 404 page. The <noscript> fallback ensures basic functionality for users without JavaScript.

Step 2: Create Localized 404 Pages

For each language, you can create custom pages like en/404/index.html, es/404/index.html, etc.

---
layout: default
title: "Page Not Found"
lang: en
permalink: /en/404/
---

<h2>Oops! Page Not Found</h2>
<p>We couldn’t find the page you were looking for. Try using the menu or go back to the <a href="/en/">homepage</a>.</p>

Translate this page for each supported language and place it in the corresponding directory.

Example for Spanish

---
layout: default
title: "Página no encontrada"
lang: es
permalink: /es/404/
---

<h2>¡Vaya! Página no encontrada</h2>
<p>No pudimos encontrar la página que estabas buscando. Usa el menú o regresa a la <a href="/es/">página principal</a>.</p>

Step 3: Fallback Navigation Options

Even with redirection, some users might land directly on a language 404 page. Enhance these pages with useful links:

• Top 5 most visited pages
• Search bar with Lunr.js
• Link to contact or support

Example Enhancement

<p>Here are some useful links:</p>
<ul>
  <li><a href="/en/docs/">Documentation</a></li>
  <li><a href="/en/blog/">Blog</a></li>
  <li><a href="/en/support/">Support</a></li>
</ul>

Step 4: SEO Considerations

Make sure your global 404.html page returns the correct HTTP status. Jekyll on GitHub Pages does this automatically. Don’t redirect server-side from 404 pages — use JavaScript only — to avoid indexing problems with crawlers.

Use Case: Developer Documentation in 6 Languages

A SaaS product with localized docs in English, Japanese, German, French, Spanish, and Portuguese implemented per-language 404s. When a user in Berlin lands on a broken URL, they’re redirected to /de/404/ with help links in German. This reduced bounce rate from 65% to 35% on documentation landing pages.

Advanced: Dynamic Language Selector in 404

If you want to go further, add a language picker to your 404 page so users can switch manually.

<label for="lang-select">Choose your language:</label>
<select id="lang-select">
  <option value="en">English</option>
  <option value="fr">Français</option>
  <option value="de">Deutsch</option>
</select>

<script>
  document.getElementById('lang-select').addEventListener('change', function() {
    const lang = this.value;
    window.location.href = `/${lang}/404/`;
  });
</script>

Multilingual 404 pages go beyond aesthetics — they reinforce trust, respect the user's context, and offer pathways to recovery. With Liquid, JavaScript, and careful planning, your Jekyll site can deliver a smarter fallback experience that aligns with the rest of your multilingual strategy.

Next up: we'll explore automating navigation menus per language using Jekyll data files and Liquid includes to make your multilingual site truly scalable and maintainable.