HTML - Meta Tags

HTML permette di specificare dei campi metadata (ossia delle importanti informazioni riguardo il documento) in diversi modi. Gli elementi META possono essere usati per includere coppie di nomi/valori che descrivono le proprietà del documento HTML, come l' autore, la data di scadenza, delle parole chiave, ecc.

Il tag <meta> viene usato per fornire informazioni aggiuntive. Questo tag è un elemento vuoto, perciò non avrà un tag di chiusura, ma trasporta le informazioni attraverso i suoi attributi.

Si possono includere diversi tag meta all' interno del documento, in base a quale informazioni si vogliono conservare nel documento ma in generale, i tag meta non hanno un impatto visivo nel documento, perciò dal punto di vista grafico, cambia poco se vengono inclusi o meno.

Aggiungere Tag Meta nei Documenti

Si possono inserire tag meta nell' header di un documento utilizzando il tag <meta>. In aggiunta agli attributi principali, un tag meta può avere i seguenti attributi aggiuntivi:

Attributo	Descrizione
Name	Il nome della proprietà Can be anything. Examples include, keywords, description, author, revised, generator etc.
content	Indica il valore
scheme	Definisce uno schema per interpretare le proprietà dei valori(come dichiarato nell' attributo content).
http-equiv	Usato per un messaggio di intestazione http.Per esempio http-equiv può essere usato per aggiornare la pagina o impostare un cookie. I valori possono essere content-type, expires, refresh e set-cookie.

Definire Parole Chiave

Si possono utilizzare i tag <meta> per specificare le parole chiave più importanti del documento, in modo che i motori di ricerca possano indicizzare al meglio la pagina web.

Esempio

A seguire un esempio dove viene aggiunto un Meta Tag per definire le parole chiave del documento.

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Produrrà il seguente risultato:

Hello HTML5!

Descrizione Documento

Si può usare un tag <meta> per dare una breve descrizione della pagina. Viene utilizzato dai motori di ricerca per indicizzare la pagina in base al tipo di ricerca effettuato.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Data Revisione

Si può utilizzare un tag <meta> per dare informazioni riguardo l'ultimo aggiornamento della pagina.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="Tutorialspoint, 3/7/2014" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Regresh Pagina

È possibile indicare la durata dopo la quale la pagina verrà refreshata automaticamente.

Esempio

A seguire un esempio per aggiornare la pagina automaticamente ogni 5 secondi.

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="Tutorialspoint, 3/7/2014" />
<meta http-equiv="refresh" content="5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Reindirizzazione Pagina

Si può utilizzare il tag <meta> per effettuare un redirect dalla tua pagina web ad un altra. Si può anche definire un tempo, in modo da effettuare il redirect dopo che sono passati un tot di secondi.

Esempio

Following is an example of redirecting current page to another page after 5 seconds. If you want to redirect page immediately then do not specify content attribute.

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="Tutorialspoint, 3/7/2014" />
<meta http-equiv="refresh" content="5; url=https://www.tutorialspoint.com" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Impostare Cookies

I cookie sono dei dati, memorizzati in piccoli file di testo sul vostro computer che vengono scambiati tra il browser e il server web per tenere traccia di varie informazioni in base alle esigenze delle applicazioni web.

È possibile utilizzare tag <meta> per memorizzare i cookie sul client e in seguito possono essere riutilizzate dal server Web per tenere traccia di un visitatore del sito.

Esempio

A seguire un esempio per impostare la scadenza dei cookies.

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="Tutorialspoint, 3/7/2014" />
<meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15 23:59:59 GMT;" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Se non viene indicata data e ora di scadenza i cookie scadranno alla chiusura del browser.

Nota: Per una guida completa ai cookies puoi seguire la guida PHP and Cookies.

Impostare l'Autore

Con il seguente meta tag sarà possibile indicare l' autore della pagina:

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="author" content="Mahnaz Mohtashim" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Definire il Set di Caratteri

Con il tag <meta> si può definire il set di caratteri utilizzato all' interno della pagina.

Esempio

Di default, Web servers e Web browsers usano la codifica ISO-8859-1 (Latin1) per elaborare le pagine web. A seguire un esempio per impostare la codifica UTF-8:

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="author" content="Mahnaz Mohtashim" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

Per mostrare una pagina con caratteri tradizionali Cinesi, è necessario che la pagina contenga un tag <meta> che imposta la codifica Big5:

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="author" content="Mahnaz Mohtashim" />
<meta http-equiv="Content-Type" content="text/html; charset=Big5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>