Pagina 404 personalizzata: come configurarla correttamente

Quando un utente segue un link rotto, il server deve restituire lo status 404 Not Found. Ma nei progetti reali questa regola viene violata sorprendentemente spesso: la CMS restituisce 200 OK, un redirect porta alla homepage, oppure la pagina «404» tecnicamente restituisce il codice giusto ma sembra uno schermo vuoto. Ognuna di queste situazioni è un problema distinto sia per la SEO sia per l'utente.

Una pagina 404 configurata correttamente risolve tre problemi in una volta: segnala a Google che l'URL non esiste; tiene l'utente sul sito e lo aiuta a trovare la sezione giusta; e protegge il crawl budget da passaggi sprecati. Vediamo ogni aspetto in ordine.

Cos'è una pagina 404

404 Not Found è il codice di risposta HTTP che un server restituisce quando la risorsa richiesta non esiste. Il codice significa che il server funziona bene e la rotta è stata risolta, ma il documento richiesto è assente. Questo distingue il 404 dal 500 (errore del server) e dal 503 (servizio non disponibile).

Una pagina 404 esiste su due livelli. Il livello HTTP è il codice di risposta nell'header che il crawler vede. Il livello visivo è il contenuto HTML che l'utente vede. Entrambi contano allo stesso modo: un codice HTTP sbagliato è un problema SEO; un design visivo scadente è un problema UX.

La regola principale: restituire sempre HTTP 404

La prima e più importante regola: una pagina di errore deve restituire lo status HTTP 404 (o 410) — mai 200. Si chiama «hard 404» in contrapposizione al «soft 404».

Puoi controllare lo status HTTP di qualsiasi pagina direttamente nel browser: F12 → Network → ricarica la pagina → trova la prima richiesta → colonna Status. Oppure via curl nel terminale:

# Check HTTP status of a page
curl -s -o /dev/null -w "%{http_code}" https://example.com/non-existent-url
# Expected output: 404

# Check full response headers
curl -I https://example.com/non-existent-url

Soft 404 e 410: la differenza

Oltre all'«hard 404» esistono due casi correlati spesso confusi nella pratica: il soft 404 e lo status 410. Capirne la differenza è importante per gestire correttamente le pagine eliminate.

Google classifica come soft 404 anche qualsiasi redirect da un URL in 404 verso la homepage o un'altra pagina irrilevante. Dal punto di vista del motore di ricerca: l'utente cercava A, è finito su B, e il contenuto di B non risponde alla query. Questo degrada il segnale di qualità della pagina di destinazione.

Cosa deve contenere una buona pagina 404

Un utente che arriva su una 404 è già leggermente frustrato. Il compito della pagina è attenuare quella frustrazione e dare alla persona un prossimo passo chiaro. Una 404 efficace segue una struttura riconoscibile.

zoom_in

Cosa non fare su una pagina 404: reindirizzare automaticamente l'utente alla homepage via JavaScript (window.location.href = '/'). Google può trattarlo come soft 404 — l'utente si aspettava A, ha ricevuto B, il contenuto è irrilevante. I redirect 301 a livello server da URL in 404 sono appropriati solo quando esiste una vera pagina sostitutiva.

Implementazione: Next.js, Nginx, Apache

Come configuri una pagina 404 personalizzata dipende dal tuo stack. Vediamo le tre configurazioni più comuni: Next.js App Router, Nginx e Apache.

Next.js App Router

In Next.js 13+ con App Router, una pagina 404 personalizzata si crea con un file not-found.tsx dentro la directory app/. Per l'i18n (es. con next-intl) il file vive in app/[locale]/.

// app/[locale]/not-found.tsx
import Link from 'next/link';

export default function NotFound() {
  return (
    <main style={{ textAlign: 'center', padding: '4rem 1rem' }}>
      <h1>404 — Page Not Found</h1>
      <p>The link may be outdated or the address was mistyped.</p>
      <Link href="/">Back to homepage</Link>
    </main>
  );
}

// Next.js automatically returns HTTP 404 for this file.

Per generare un 404 programmatico (es. in una rotta dinamica app/[locale]/blog/[slug]/page.tsx), usa la funzione notFound() da next/navigation. Chiamandola, il rendering si interrompe subito e viene restituito l'HTTP 404 + renderizzato not-found.tsx.

// app/[locale]/blog/[slug]/page.tsx
import { notFound } from 'next/navigation';
import { getArticleDoc } from '@/messages/blog-articles/registry';

export default async function ArticlePage({ params }: { params: { slug: string } }) {
  const article = getArticleDoc(params.slug);

  // If slug does not exist — return HTTP 404 and render not-found.tsx
  if (!article) {
    notFound();
  }

  return <ArticleRenderer article={article} />;
}

// Pages Router: pages/blog/[slug].tsx (legacy approach)
export async function getServerSideProps({ params }) {
  const article = getArticleDoc(params.slug);

  if (!article) {
    // Next.js will return HTTP 404 and show pages/404.tsx
    return { notFound: true };
  }

  return { props: { article } };
}

Nginx

In Nginx, una pagina 404 personalizzata si configura con la direttiva error_page dentro il blocco server. Assicurati che il file 404.html esista al percorso indicato e che servirlo non inneschi un redirect interno a 200.

server {
    listen 80;
    server_name example.com;
    root /var/www/html;

    # Custom page for 404 errors
    error_page 404 /404.html;

    # The location for the file itself — returns 404, not 200
    location = /404.html {
        internal;
    }

    # Custom pages for other errors
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        internal;
    }
}

Apache / .htaccess

Per Apache, la 404 personalizzata si configura via ErrorDocument — nella config principale o in .htaccess.

# .htaccess in the site root

# Custom 404 page
ErrorDocument 404 /404.html

# You can also point to a PHP file
# ErrorDocument 404 /404.php

# Custom pages for other errors
ErrorDocument 403 /403.html
ErrorDocument 500 /500.html

# Enable mod_rewrite for SPA routing
<IfModule mod_rewrite.c>
    RewriteEngine On
    # For React/Vue SPA: all non-existent routes → index.html
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^ /index.html [L]
</IfModule>

PHP (WordPress e altre CMS)

In WordPress, la pagina 404 personalizzata è il file 404.php del tuo tema. WordPress restituisce automaticamente l'HTTP 404 per gli URL inesistenti quando i permalink sono configurati correttamente. Se la CMS restituisce 200 invece di 404, il problema è di solito nel .htaccess o nella configurazione del server.

<?php
// themes/your-theme/404.php
// WordPress automatically returns HTTP 404
get_header();
?>
<main class="error-404">
    <h1>Page Not Found</h1>
    <p>Try using search:</p>
    <?php get_search_form(); ?>
    <p>Or return to the <a href="<?php echo home_url(); ?>">homepage</a>.</p>
</main>
<?php
get_footer();

Trovare e correggere i link rotti

Una pagina 404 configurata bene è solo metà del lavoro. L'altra metà è trovare tutti i link che puntano a pagine inesistenti e risolverli. I link rotti sono la causa principale degli errori 404 nell'indice.

# Find top-20 broken URLs in Nginx/Apache logs
grep ' 404 ' /var/log/nginx/access.log \
  | awk '{print $7}' \
  | sort \
  | uniq -c \
  | sort -rn \
  | head -20

# Example output:
# 143 /old-product-page
#  87 /blog/removed-article
#  34 /wp-login.php  (attack attempts — not critical)

Monitorare gli errori 404

Un audit una tantum va bene. Ma nuovi 404 compaiono in continuazione: pagine rinominate, prodotti eliminati, siti esterni che linkano URL inesistenti. È importante configurare un monitoraggio regolare.

Per i siti grandi (10.000+ pagine) i log del server sono particolarmente preziosi: coprono il 100% delle richieste, inclusi bot, utenti e script. Search Console mostra solo ciò che Googlebot ha trovato scansionando — un sottoinsieme del quadro completo.

Checklist della pagina 404 corretta

Status HTTP

• La pagina 404 restituisce lo status HTTP 404 (verificato con curl o DevTools)
• Nessun soft 404: la pagina con il messaggio di errore non restituisce 200 OK
• Nessun redirect JavaScript da URL inesistenti verso la homepage
• Il 410 Gone è usato per le pagine eliminate in blocco senza sostituto
• I redirect 301 sono configurati solo per gli URL con una pagina sostitutiva pertinente

Contenuto della pagina

• Messaggio di errore chiaro, in linguaggio semplice, senza gergo tecnico
• Presente una casella di ricerca o un link alla ricerca del sito
• Presente un link alla homepage
• Presenti link a 2–4 sezioni o categorie popolari
• La pagina è coerente col brand del sito (header, footer, font)

Implementazione

• Next.js: file not-found.tsx creato; notFound() viene chiamato per slug inesistenti
• Nginx: direttiva error_page 404 configurata; il file 404.html è marcato come internal
• Apache: ErrorDocument 404 impostato in .htaccess o nella config principale
• WordPress: 404.php esiste nel tema attivo
• SPA (React/Vue senza SSR): meta tag noindex aggiunto lato client sulle pagine 404

Monitoraggio

• Google Search Console collegato e avvisi email configurati
• Crawl regolare con Screaming Frog o equivalente (almeno mensile)
• Log del server accessibili e analizzati per i siti ad alto traffico
• Tutti i link interni che puntavano a URL in 404 sono stati trovati e corretti

FAQ

Risposte alle domande comuni sulla configurazione delle pagine 404 che emergono durante audit e sviluppo.