Guida HTML interattiva: Redirect

Q: Come reindirizzo una pagina HTML verso un'altra pagina?

Aggiungi all' della vecchia pagina, e nel body un normale link alla nuova pagina come riserva. Se controlli il server, un redirect 301 è meglio.

Q: Come faccio aggiornare una pagina da sola in automatico?

Usa un meta refresh con un ritardo e senza URL: ricarica la pagina ogni 30 secondi. Ricarica l'intera pagina e interrompe il lettore, quindi per i dati in tempo reale di solito è meglio aggiornare una parte della pagina con JavaScript.

Q: Come faccio un redirect con JavaScript?

Usa location.replace('https://example.com/new'). Sostituisce la pagina corrente nella cronologia, quindi il tasto indietro non torna alla pagina che ha reindirizzato. Funziona anche location.href = url, ma lascia la vecchia pagina nella cronologia.

Redirect con un tag meta refresh

In HTML puro, un redirect è un tag <meta http-equiv="refresh"> nell'<head> della vecchia pagina:

<meta http-equiv="refresh" content="0; url=https://example.com/new-page">

Il numero è il ritardo in secondi, poi un punto e virgola, poi url= e l'indirizzo di destinazione. 0 reindirizza appena la pagina si carica. Ecco un file completo "la pagina è stata spostata". Il ritardo è impostato a un'ora così questa anteprima resta ferma; su una pagina vera useresti 0 o pochi secondi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="refresh" content="3600; url=https://example.com/new-page">
  <link rel="canonical" href="https://example.com/new-page">
  <title>This page has moved</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>This page has moved</h1>
  <p>Go to the <a href="https://example.com/new-page">new page</a>.</p>
  <p id="out" style="color: #6b7280;"></p>
  <script>
    const content = document.querySelector('meta[http-equiv="refresh"]').content;
    const [seconds, target] = content.split(';');
    document.getElementById('out').textContent =
      'The browser will go to ' + target.trim().slice(4) + ' in ' + seconds + ' seconds.';
  </script>
</body>
</html>

Due riserve rendono sicura la pagina: il link visibile (per chi ha un browser che non segue il refresh, e per chi usa uno screen reader e vuole scegliere) e <link rel="canonical">, che dice ai motori di ricerca qual è l'URL vero. Se qui cambi il ritardo in 0, l'anteprima stessa se ne andrà su example.com; premi Reset per riavere l'esempio.

Aggiornare una pagina in automatico

Lascia fuori l'URL e la pagina si ricarica da sola dopo il ritardo. content="5" ricarica ogni 5 secondi. Il primo riquadro qui sotto è una piccola pagina con quel tag, così puoi osservarla: il suo orario di caricamento salta avanti ogni 5 secondi, e il testo che scrivi nel suo campo viene cancellato dal ricaricamento. Il secondo riquadro invece tiene aggiornato l'orologio con JavaScript, e conserva il tuo testo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Auto refresh</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .pane { flex: 1; min-width: 220px; border: 2px solid #e5e7eb; border-radius: 8px; padding: 10px; }
    iframe { width: 100%; height: 110px; border: 0; }
    h2 { font-size: 14px; margin: 0 0 6px; }
  </style>
</head>
<body>
  <div class="row">
    <div class="pane">
      <h2>meta refresh, content="5"</h2>
      <iframe id="refreshing" title="Page that refreshes itself"></iframe>
    </div>
    <div class="pane">
      <h2>JavaScript, setInterval</h2>
      <p>Time: <strong id="clock"></strong></p>
      <input placeholder="Type here">
    </div>
  </div>
  <script>
    document.getElementById('refreshing').srcdoc =
      '<meta http-equiv="refresh" content="5">' +
      '<body style="font-family: system-ui, sans-serif; margin: 0;">' +
      '<p>Loaded at: <strong id="t"></strong></p>' +
      '<input placeholder="Type here">' +
      '<script>t.textContent = new Date().toLocaleTimeString();<\/script>';
    const tick = () => { document.getElementById('clock').textContent = new Date().toLocaleTimeString(); };
    tick();
    setInterval(tick, 1000);
  </script>
</body>
</html>

Un refresh carica di nuovo l'intera pagina, quindi qualsiasi cosa il lettore stesse facendo viene interrotta. Va bene per una pagina con cui nessuno interagisce, come uno schermo di stato appeso a una parete. Per dashboard, punteggi e feed, aggiorna solo la parte che cambia, come fa il secondo riquadro.

Redirect con JavaScript

Quando il redirect dipende da qualcosa che sa solo il browser (la scelta dell'utente, lo stato di login, la dimensione dello schermo), usa JavaScript:

// Replaces the current page in the history: Back skips it
location.replace('https://example.com/new-page');

// Adds a history entry: Back returns to this page
location.href = 'https://example.com/new-page';

Per un redirect, location.replace è quasi sempre ciò che ti serve. Con location.href, premendo Indietro si torna sulla pagina che ha reindirizzato, che reindirizza di nuovo, e l'utente resta bloccato.

Meglio un redirect lato server

Un meta refresh o uno script vengono eseguiti solo dopo che il browser ha scaricato la vecchia pagina. Un redirect lato server risponde alla richiesta con un codice di stato e il nuovo indirizzo, prima che venga inviato qualsiasi HTML:

301 (spostato in modo permanente) o 308: la pagina ha una nuova casa definitiva. I motori di ricerca trasferiscono il posizionamento del vecchio URL a quello nuovo.
302 (trovato) o 307: uno spostamento temporaneo; il vecchio URL resta quello principale.

Come configurarne uno dipende dal tuo hosting. Alcune forme comuni:

# Apache (.htaccess)
Redirect 301 /old-page https://example.com/new-page

# nginx (inside a server block)
location = /old-page { return 301 https://example.com/new-page; }

# Netlify or Cloudflare Pages (_redirects file)
/old-page  /new-page  301

Usa un meta refresh quando non puoi proprio modificare il server, per esempio su un hosting statico senza regole di redirect. Google tratta un meta refresh immediato come un redirect permanente e uno ritardato come un redirect temporaneo, quindi un ritardo 0 è quello più vicino a un 301.

Redirect temporizzati e accessibilità

Un redirect con un ritardo può portare via un lettore a metà di una frase. Le linee guida sull'accessibilità (WCAG) considerano un errore i redirect temporizzati; un redirect immediato va bene. Se devi aspettare, dillo sulla pagina ("Verrai reindirizzato tra 10 secondi"), e includi sempre il link così le persone possono andare con i propri tempi.

Errori comuni

Un ciclo di redirect. Due pagine che si reindirizzano a vicenda fanno rimbalzare il lettore all'infinito. Controlla dove manda le persone la pagina di destinazione.
Un URL relativo che punta nel posto sbagliato. url=new-page viene risolto rispetto all'URL corrente, quindi da /docs/old porta a /docs/new-page. Nel dubbio usa un percorso completo come url=/new-page.
Nessun link di riserva. Aggiungi sempre nel body un normale link alla nuova pagina.
Usare location.href per i redirect. Il tasto indietro porta allora in un ciclo di redirect. Usa location.replace.
Usare il meta refresh quando controlli il server. Configura invece un 301; è più veloce e più chiaro per ogni strumento.

Domande frequenti

Come reindirizzo una pagina HTML verso un'altra pagina?

Aggiungi <meta http-equiv="refresh" content="0; url=https://example.com/new"> all'<head> della vecchia pagina, e nel body un normale link alla nuova pagina come riserva. Se controlli il server, un redirect 301 è meglio.

Come faccio un redirect dopo 5 secondi in HTML?

Imposta il numero prima del punto e virgola al ritardo in secondi: <meta http-equiv="refresh" content="5; url=https://example.com/new">. Avvisa il lettore sulla pagina che verrà reindirizzato, e dagli un link.

Come faccio aggiornare una pagina da sola in automatico?

Usa un meta refresh con un ritardo e senza URL: <meta http-equiv="refresh" content="30"> ricarica la pagina ogni 30 secondi. Ricarica l'intera pagina e interrompe il lettore, quindi per i dati in tempo reale di solito è meglio aggiornare una parte della pagina con JavaScript.

Un redirect con meta refresh fa male alla SEO?

Google lo segue: un meta refresh immediato (ritardo 0) viene trattato come un redirect permanente e uno ritardato come un redirect temporaneo. Un 301 lato server resta comunque il metodo consigliato, perché è più veloce e ogni crawler e browser lo capisce.

Come faccio un redirect con JavaScript?

Usa location.replace('https://example.com/new'). Sostituisce la pagina corrente nella cronologia, quindi il tasto indietro non torna alla pagina che ha reindirizzato. Funziona anche location.href = url, ma lascia la vecchia pagina nella cronologia.

Concetti correlati