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ร