Come inserire i metadati in HTML

In questa lezione del corso HTML ti spiego come usare i metadati in un documento.

Cosa sono i metadati? I metadati sono altre informazioni che descrivono il contenuto del documento. Ad esempio, in un documento HTML, i metadati potrebbero includere la codifica dei caratteri da utilizzare, le parole chiave che un motore di ricerca dovrebbe usare per classificare il documento, ecc. I metadati non sono visualizzati sulla pagina. L'utente non li vede sullo schermo. Sono però utilizzati dal browser per visualizzare meglio il contenuto del documento o dai motori di ricerca per catalogare i contenuti della pagina in modo più appropriato e fornire una migliore esperienza utente.

Per inserire i metadati in un documento HTML devi utilizzare il tag <meta>

<meta>

Inserisci i tag <meta> nella sezione <head> quanto più vicino possibile all'inizio.

In particolar modo, il browser cerca nei primi 512 byte (caratteri) del documento indicazioni sulla codifica dei caratteri.

Se il browser non trova indicazioni entro i primi 512 byte, potrebbe decidere da sé quale codifica dei caratteri utilizzare.

Oltre alla definizione della codifica dei caratteri puoi usare il tag <meta> per molte altre informazioni.

Esempio. Ecco un esempio di documento HTML nella versione 5 con diversi tag <meta> in sequenza nella sezione <head>. Puoi inserire più tag <meta> in un documento ipertestuale a seconda dei metadati che vuoi definire.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="descrizione della pagina">
<meta name="keywords" content="elenco di parole chiavi">
<meta name="robots" content="index">
</head>
<body>
...
</body>
</html>

Nel resto di questa lezione ti parlo dei vari utilizzi pratici del tag <meta> in un documento HTML.

Le parole chiave (keywords) del documento
La descrizione del documento
L'indicizzazione sui motori di ricerca
Altre funzioni del tag meta
Gli attributi del tag <meta>

Le parole chiave (keywords) del documento

Puoi usare il tag <meta> per indicare l'elenco delle keyword (parole chiave) del documento

L’attributo name=keyword indica al browser che stai definendo le parole chiave.

L’attributo content, invece specifica l’elenco delle parole chiave che descrivono la pagina.

Le parole chiave sono separate tra loro tramite una virgola.

La descrizione del documento

Puoi anche usare il tag <meta> per scrivere una breve descrizione sintetica del contenuto del documento.

L’attributo name=description indica al browser che stai definendo la descrizione della pagina.

L’attributo content indica la descrizione della pagina.

L'indicizzazione sui motori di ricerca

Puoi usare il tag <meta> per indicare ai motori di ricerca se la pagina deve essere indicizzata o meno

L’attributo name=robots indica al browser che vuoi fornire informazioni ai robots (spider) dei motori di ricerca.

L’attributo content fornisce l’informazione:

index se vuoi indicizzare la pagina sui motori di ricerca
noindex se non vuoi indicizzare la pagina sui motori di ricerca

Altre funzioni del tag meta

Puoi usare diversi metadati per personalizzare la pagina.

1] Per impostare le dimensioni della visualizzazione per dispositivi mobili

2] Per specificare l'autore della pagina:

3] Per fornire informazioni sul copyright:

4] Per fornire informazioni sulla lingua usata nel documento

5] Per specificare il tipo di documento

6] Per attivare o meno la cache del browser o sui motori di ricerca

Questi sono solo alcuni esempi per spiegarti come può essere utilizzato il tag <meta> per inserire metadati all'interno del documento HTML.

Gli attributi del tag <meta>

In questo schema trovi gli attributi principali del tag <meta>

Attributo	Valore	Descrizione
charset	codice della codifica	specifica la codifica dei caratteri da utilizzare sul documento (es. UTF-8)
content	testo	specifica il valore da associare all'attributo name o http-equiv
http-equiv	content-security-policy content-type dEcco alcune funzioni utili che puoi usareefault-style refresh	Fornisce informazioni al protocollo HTTP
name	application-name author description generator keywords viewport	specifica il nome o proprietà del metadato