Cambiare il tag title con JavaScript

Una pagina HTML è composta da numerosi elementi differenti, ognuno di essi ha una funzione specifica.
Questi tags HTML vanno progettati e definiti accuratamente per indirizzare al meglio i visitatori del sito e a far comprendere il contenuto stesso delle pagine.

Il tag title, come abbiamo spiegato nell’apposito articolo del nostro corso HTML, serve a definire il titolo “meta” di una pagina web, quello che verrà poi mostrato nei risultati di ricerca di Google o Bing, e visualizzato nella scheda (o tab) del browser internet, quello che anche in questo momento puoi vedere guardando in alto in questa finestra.

Per nostra esperienza, data dalla grande quantità di progetti sviluppati, il tag title può anche essere cambiato dinamicamente con JavaScript, come vedremo qui di seguito.

Modificare il tag HTML title con JavaScript


Ti starai chiedendo ora: Perché dovrei cambiare il tag title con JavaScript, se questo deve essere definito in fase di progettazione?

Beh, non c’è un solo motivo; questo può cambiare in base al progetto che si intende sviluppare e alle necessità di ognuno di noi.


Ad esempio, nella nostra piattaforma eCurriculum.it, abbiamo utilizzato questa funzione per cambiare dinamicamente il titolo della pagina aggiungendo il nome dell’utente nel momento in cui lo scrive nell’apposito campo.

Questo conferisce un tocco di personalizzazione aggiuntiva. Inoltre la funzione JavaScript per cambiare il titolo della pagina può servire come alert o messaggio, come avviene ad esempio in Booking.com: dal momento in cui cambi scheda del browser, Booking ti avvertirà di non aver completato l’operazione di prenotazione attraverso il cambio del title.

C’è da chiarire però, che la modifica di questo tag HTML non è definitiva, ma avviene al livello locale, solo nel tuo browser, dunque non verrà mostrato nei risultati di ricerca, né si sovrascriverà nel codice HTML.

La funzione

In JavaScript esiste un modo molto semplice per cambiare il contenuto del tag title di una pagina HTML.

Prima di tutto dobbiamo “prendere” il valore di questo tag attraverso una semplice riga:

var title = document.getElementsByTagName('title')[0]

In questo modo abbiamo creato una variabile specifica per gestire il tag title.

Ora non resta che cambiare a nostro piacimento questo valore testuale:

<html>
  <head>
    <title>Titolo pagina</title>
  </head>
  <body>
    <script> 
      var title = document.getElementsByTagName('title')[0]; 
      title.innerHTML = "Nuovo Titolo pagina";
    </script>
  </body>
</html>

Utilizzando il metodo “InnerHTML” è possibile cambiare il testo del titolo.

La funzione può essere applicata ad un evento JavaScript, come ad esempio “onchange” su un area di input, così che il titolo si cambi automaticamente durante la compilazione di un campo “text input“.

<input type="text" onchange="cambiaTitolo()" id="area">
<script>
   var title = document.getElementsByTagName('title')[0]; 
   var testo = document.getElementById("area");
   function cambiaTitolo(){ 
      title.innerHTML = testo.value;
   }
</script>

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!


Articoli recenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

CAPTCHA