Attributo content in HTML
L'attributo HTML content imposta il valore abbinato all'attributo name o http-equiv di un tag meta. Scopri i valori comuni per SEO, viewport e altro.
L'attributo content contiene il valore di una dichiarazione di metadati. Di per sé non ha significato — è sempre una metà di una coppia chiave-valore, e fornisce i dati per ciò che l'attributo name o http-equiv del tag meta definisce come chiave.
Puoi usare content solo sull'elemento <meta>, che si trova all'interno del <head> del documento. Pensa a name/http-equiv come alla chiave e a content come al valore:
name+content— metadati a livello di documento per browser, motori di ricerca e piattaforme social (descrizione, parole chiave, viewport, ecc.).http-equiv+content— una direttiva pragma che simula un'intestazione di risposta HTTP (ad esempio un aggiornamento della pagina o un tipo di contenuto).
Se scrivi un tag <meta> con un name o http-equiv ma senza content, la dichiarazione non ha alcun effetto.
Sintassi
<meta name="description" content="A description of the document">Valori name comuni e il loro content
Il valore di content viene interpretato in base al name con cui è abbinato. Questi sono quelli che utilizzerai più spesso:
name | Cosa contiene content |
|---|---|
viewport | Come la pagina si adatta allo schermo del dispositivo. Il valore standard è width=device-width, initial-scale=1, che fa sì che la pagina venga renderizzata in modo responsivo sui dispositivi mobili. |
description | Un breve riassunto della pagina. I motori di ricerca spesso lo mostrano come snippet sotto il risultato, quindi tienilo sotto circa 160 caratteri. |
keywords | Un elenco di parole chiave separate da virgola. Ampiamente ignorato dai moderni motori di ricerca, ma ancora comune nel markup legacy. |
robots | Istruzioni per i crawler dei motori di ricerca (vedi i dettagli di seguito). |
author | Il nome dell'autore della pagina. |
Il meta viewport è il più importante da ricordare — senza di esso, i browser mobili assumono un layout a larghezza desktop e rimpiccioliscono la visualizzazione:
<meta name="viewport" content="width=device-width, initial-scale=1">I valori della direttiva robots
Il content di un meta robots è un elenco di direttive separate da virgola che indicano ai crawler cosa possono fare con la pagina. Le due più fraintese — noindex e nofollow — controllano cose diverse:
| Valore | Cosa comunica al crawler |
|---|---|
index | La pagina può apparire nei risultati di ricerca. Questo è il valore predefinito, quindi raramente è necessario specificarlo. |
follow | Il crawler può seguire i link sulla pagina per scoprire altre pagine. Anche questo è il valore predefinito. |
noindex | Non mostrare questa pagina nei risultati di ricerca — anche se il crawler può comunque leggerla e seguire i suoi link. |
nofollow | Non seguire i link su questa pagina. La pagina stessa può comunque essere indicizzata. |
Poiché sono indipendenti, spesso si combinano. Ad esempio, per nascondere una pagina dalla ricerca e impedire ai crawler di seguire i suoi link:
<meta name="robots" content="noindex, nofollow">Metadati Open Graph e condivisione sui social
Quando una pagina viene condivisa sulle piattaforme social (Facebook, LinkedIn, Slack, ecc.), la piattaforma legge i tag meta Open Graph per costruire la scheda di anteprima. Open Graph usa l'attributo property (invece di name) insieme a content:
<meta property="og:title" content="HTML content Attribute - W3docs" />
<meta property="og:description" content="Learn how the HTML content attribute pairs with a meta tag's name or http-equiv to set page metadata." />
<meta property="og:image" content="https://www.w3docs.com/assets/preview.png" />og:title— il titolo mostrato nella scheda di condivisione (usa il titolo della pagina se omesso).og:description— il testo di riepilogo sotto il titolo.og:image— un URL assoluto all'immagine di anteprima. Usa sempre un URL completohttps://qui; i percorsi relativi non verranno risolti su altri siti.
Questi sono tra gli usi reali più comuni di content, quindi vale la pena aggiungerli insieme al meta description.
Valori http-equiv comuni e il loro content
L'attributo http-equiv permette a un tag <meta> di fungere da intestazione HTTP. L'attributo content trasporta quindi il valore di quell'intestazione:
http-equiv | Cosa contiene content |
|---|---|
refresh | Un numero di secondi prima che la pagina si ricarichi. Aggiungi ;url=... per reindirizzare invece — es. content="5;url=https://www.w3docs.com". Vedi l'avviso sull'accessibilità di seguito. |
content-type | Il tipo MIME e il set di caratteri del documento, es. text/html; charset=UTF-8. In HTML5 il più breve <meta charset="UTF-8"> è preferito. |
Il valore X-UA-Compatible (es. IE=edge) ha influenzato solo la modalità di rendering di Internet Explorer. Internet Explorer è giunto a fine vita, quindi questa direttiva è legacy e può essere omessa dalle nuove pagine.
Usare <meta http-equiv="refresh"> per reindirizzare a un'altra pagina è sconsigliato per l'accessibilità. È un errore documentato WCAG 2.2 (Criteri di successo 2.2.1 e 3.2.5): non dà all'utente alcun controllo sui tempi e può disorientare le persone che usano lettori di schermo o che hanno bisogno di più tempo per leggere. Preferisci un reindirizzamento HTTP lato server reale (una risposta 301/302). Se devi reindirizzare dal client, imposta il ritardo a 0 in modo che avvenga immediatamente, oppure fornisci un link visibile che l'utente possa attivare autonomamente.
Esempio dell'attributo content in HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Free hands-on tutorials and references on HTML, CSS, JavaScript, PHP and Git, with runnable examples to learn web development step by step." />
<meta name="keywords" content="HTML,CSS,JavaScript,PHP, Git" />
<meta http-equiv="refresh" content="30" />
</head>
<body>
<h1>Example of the HTML "content" attribute</h1>
<p>Lorem ipsum, or lorem ipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Ecco cosa fa ogni valore di content nell'esempio precedente:
width=device-width, initial-scale=1indica al browser di adattare il layout alla larghezza dello schermo del dispositivo e di avviare con uno zoom del 100%.- Il valore
description("Free hands-on tutorials and references on HTML, CSS, JavaScript, PHP and Git…") è il riepilogo della pagina che un motore di ricerca può visualizzare come snippet del risultato. "HTML,CSS,JavaScript,PHP, Git"è l'elenco di parole chiave separate da virgola."30"sulla direttivarefreshricarica la pagina ogni 30 secondi. Usa l'aggiornamento automatico con parsimonia — consulta la nota sull'accessibilità qui sopra prima di affidarti ad esso.