Codewith.it

Tag <meta>


Definizione

Il tag <meta> serve a definire i meta dati di una pagina web. Per meta dati si intendono tutte le informazioni "meta" riguardo un determinato documento HTML.

Per esempio, i meta dati potrebbero essere, la descrizione della pagina, il titolo o il nome dell'autore. Il tag <meta> non appare visivamente all'interno della pagina web, poiché questo deve essere scritto all'interno di <head>.

 

I meta dati hanno un'importante funzione e aiutano anche nell'indicizzazione delle pagine nei motori di ricerca. Si consiglia sempre di inserire queste informazioni.

L'unico "metadata" escluso dal tag <meta> è il titolo della pagina, per questo si deve usare il tag <title>.

 

Tra i differenti arrtibuti del tag <meta>, degno di maggior nota è "viewport" che ha la funzione di adattare il contenuto di una pagina web anche su dispositivi mobili, per questo motivo dovrebbe sempre essere presente:

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

 

<meta>

tag HTML

Definisce i meta dati di una pagina web.


Posizione: <head>
Tag di chiusura: No

Esempio

<head>   <title>Mio sito</title>   <meta name="description" content="Questa è la descrizione del mio sito">   <meta name="keywords" content="categoria, tag, genere, argomento">   <meta charset="utf-8">   <meta name="author" content="Mario Rossi">   <meta name="viewport" content="width=device-width, initial-scale=1.0">        <!-- Refresh e reindirizzamento della pagina ogni 30 secondi -->   <meta http-equiv="refresh" content="30;url=https://codewith.it"> </head>



Attributi

 

Attributo Valore Descrizione
name application-name
author
description
generator
keywords
viewport		 Tipo/nome del meta data. Dipende dal valore nell'attributo "content"
content

testo

 Valore testuale, legato strettamente al'attributo "name" o "http-equiv"
charset codifica dei caratteri Tipo di codifica dei caratteri (es. utf-8)
http-equiv content-security-policy
content-type
default-style
x-ua-compatible
refresh		 Fornisce una direttiva in base al valore in "content"

 



Compatibilità

Tutti i moderni browser supportano questo elemento.

Approfondimento

Ogni meta data deve essere completato con informazioni complete ed esaustive. Questo porterà vantaggi SEO e migliorerà la qualità del sito. 

Ad esempio, nella "meta description" va inserità una descrizione di almeno 140- 160 caratteri. Questa è quella che poi verrà visualizzata nei risultati dei motori di ricerca.

 

Nel campo "meta viewport" è importante impostare la scala di visualizzaizone iniziale, basata sulla larghezza del dispositivo in uso. 
Il valore predefinito è "width=device-width, initial-scale=1.0".