back to top

Redirect HTML: come funzionano e come crearli

Esistono diverse tecniche per redirezionare automaticamente gli utenti. Normalmente le tecniche di redirect più utilizzate coinvolgono Javascript oppure linguaggi server-side come PHP o ASP. In realtà, per fare un semplice redirect, non è necessario scomodare linguaggi di scripting. Sfruttando i metatag, infatti, è possibile effettuare redirect sia immediati che temporizzati in puro HTML.

Prima di addentrarci nel codice, tuttavia, è opportuna una premessa di carattere generale.

Cos’è un redirect?

Un redirect è una operazione automatica effettuata dalla risorsa web richiesta che invece di mostrare il proprio contenuto, effettua un redirezionamento dell’utente su un’altra risorsa web. In pratica l’utente chiede di visualizzare la risorsa "A" ma questa, in modo automatico, lo trasferisce sulla risorsa "B".

Quando si utilizza un redirect?

Le casistiche di utilizzo dei redirect sono molteplici. Le più frequenti sono:

  • la pagina web cercata non esiste più in quanto rimossa;
  • oppure la pagina web è stata spostata su un nuovo indirizzo web.

In questi casi può essere utile prevedere un redirect al fine di non far atterrare l’utente su una pagina di errore 404 che comporterebbe un maggior rischio di fuga dal sito (con l’effetto di avere una dispersione di traffico potenzialmente utile).

Oltre ai casi citati, i redirect possono rivelarsi utili anche in altre circostanze, ad esempio se si vuole spostare l’utente al verificarsi di un determinato evento come, ad esempio, il semplice passare del tempo o la selezione di una voce di un menu di selezione.

Sintassi dei redirect in puro HTML

La sintassi dei redirect HTML prevede l’utilizzo del tag <meta> all’interno della sezione <head> della pagina. Questo tag deve essere utilizzato in combinazione con l’attributo http-equiv che dovrà avere come valore "refresh" (si tratta dello stesso metatag utilizzato per gestire i refresh di pagina). Nell’attributo content, invece, dovrà essere indicata una cadenza temporale (in secondi) separata, tramite un punto e virgola, dall’indicazione di una URL. Vediamo un esempio:

<meta http-equiv="refresh" content="0;URL=http://www.miosito.com/nuova-pagina.html">

Nel nostro esempio il redirect è immediato (l’attesa è impostata a 0) pertanto l’utente verrà redirezionato alla pagina indicata senza nemmeno visualizzare i contenuti della pagina HTML che contiene il metatag in questione (ne consegue, quindi, che la pagina può essere lasciata vuota).

E’ evidente che variando (aumentando) il valore numerico dei secondi di attesa è possibile gestire altrettanto semplicemente un redirect temporizzato, cioè un redirect dell’utente non immediato ma che si realizza dopo tot secondi dal caricamento della pagina che contiene il metatag. Vediamo un esempio di redirect HTML con temporizzazione a 15 secondi:

<meta http-equiv="refresh" content="15;URL=http://www.miosito.com/nuova-pagina.html">

In questo caso, di solito, si inserisce un messaggio di avviso nel body della pagina. Ecco un esempio di pagina di redirect temporizzato con avviso all’utente:

<html>
  <head>
    <title>Pagina di Redirect</title>
    <meta http-equiv="refresh" content="15;URL=http://www.miosito.com/nuova-pagina.html">
  </head>
  <body>
    <p>
    Tra 15 secondi avverrà un redirect automatico alla nuova pagina.<br>
    Se non vuoi aspettare <a href="http://www.miosito.com/nuova-pagina.html">clicca qui</a>.
    </p>
  </body>
</html>

Redirect 301 in HTML

Purtroppo le tecniche di redirect basate sull’utilizzo di HTML o di linguaggi lato client (come Javascript) hanno un grosso limite: non è possibile impostare redirect 301. Attraverso HTML, infatti, non possiamo agire sullo scambio di informazioni tra server e client a livello di protocollo HTTP e pertanto non è possibile settare l’intestazione "301 Moved permanently". Qualora vi sia tale esigenza, pertanto, si rende necessario l’utilizzo di tecniche di redirect basate su linguaggi lato server come PHP.

Per una trattazione completa sulle tecniche attraverso le quali implementare un redirect permanente di tipo 301 si consulti questa guida.

Pubblicità