Cosa sono i meta tag e a cosa servono?

I meta tag sono tag HTML speciali che forniscono metadati (informazioni sul documento) per browser e motori di ricerca. Si trovano nella sezione <head> del documento HTML.

I principali tipi di meta tag e il loro scopo:

charset: Indica la codifica dei caratteri della pagina, ad esempio UTF-8. È importante per la corretta visualizzazione del testo.
```
<meta charset="UTF-8">
```
name="description": Definisce una breve descrizione del contenuto della pagina. Viene utilizzata dai motori di ricerca nei risultati.
```
<meta name="description" content="Breve descrizione della tua pagina per i motori di ricerca.">
```
name="keywords": Elenco di parole chiave che descrivono il contenuto della pagina. Il suo impatto sul SEO è diminuito, ma può essere utilizzato da alcuni sistemi vecchi.
```
<meta name="keywords" content="parola chiave1, parola chiave2, parola chiave3">
```
name="viewport": Controlla lo zoom e le dimensioni dell'area di visualizzazione sui dispositivi mobili. È cruciale per il design reattivo.
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
- width=device-width: La larghezza dell'area di visualizzazione è uguale alla larghezza dello schermo del dispositivo.
- initial-scale=1.0: Scala iniziale della pagina al caricamento.

name="robots": Indica ai robot dei motori di ricerca le regole di indicizzazione della pagina.

Tabella dei valori dell'attributo content:

Valore	Descrizione
`index`	Permette l'indicizzazione della pagina.
`noindex`	Impedisce l'indicizzazione della pagina.
`follow`	Permette di seguire i link sulla pagina e di indicizzarli.
`nofollow`	Impedisce di seguire i link sulla pagina.
`all`	Equivale a `index, follow`. (Valore predefinito)
`none`	Equivale a `noindex, nofollow`.

<meta name="robots" content="index, follow">

property (Open Graph, Twitter Cards): Viene utilizzato per definire come il contenuto della pagina verrà visualizzato durante la pubblicazione sui social network.

<meta property="og:title" content="Titolo per social media">
<meta property="og:description" content="Descrizione per social media">
<meta property="og:image" content="URL dell'immagine di anteprima">
<meta property="og:url" content="URL della pagina">
<meta name="twitter:card" content="summary_large_image">

La necessità dei meta tag si riassume in:

SEO (Ottimizzazione per i motori di ricerca): Aiutano i motori di ricerca a capire la tematica e il contenuto della pagina, influenzando il posizionamento e la visualizzazione nei risultati di ricerca (description, keywords, robots).
UX (User Experience): Migliorano la visualizzazione e l'interazione con la pagina su diversi dispositivi (viewport).
Social network: Determinano l'aspetto attraente del link durante la pubblicazione, aumentando il tasso di clic (property - Open Graph, Twitter Cards).
Informazioni tecniche: Forniscono dati tecnici importanti per il browser (ad esempio, codifica).

L'uso dei meta tag è obbligatorio per creare pagine web corrette, ottimizzate e user-friendly.