Cosa sono i metatag HTML e come si usano?

Question

Accepted Answer

Cosa sono i meta tag

In questo articolo andremo a vedere come si gestiscano tutti i tipi di meta tag di una pagina HTML: si tratta delle informazioni che vengono rilevate dai crawler dei motori di ricerca, oltre che dai social network quando condividiamo un articolo del nostro sito. In genere, come prima cosa da sapere, i meta tag vanno inseriti nella sezione della pagina, altrimenti non verrebbero rilevati correttamente all'interno della stessa. I meta tag sono tag HTML che non sono visibili ad occhio nudo (come gli heading o il testo nei paragrafi), ma indicano dati aggiuntivi o meta-dati sulla pagina, come una specie di "carta di identità " della pagina web.

Come inserire il tag meta-description

In genere la forma di un meta-tag descrittivo è cosà¬:

potete copiare ed incollare questo formato, ed inserirlo nel template HTML della vostra pagina adattandolo al vostro scopo. In questo caso gli attributi sono due:

name, che deve essere con valore description;
content, che deve contenere il valore della meta description, quindi la meta descrizione per quella pagina.

Per rendere dinamico il valore delle meta description si possono usare delle funzioni (ad esempio PHP per WordPress) predefinite o create da noi, diversamenteÂ -a seconda del plugin o del CMS che usiamo - bisogna richiamare correttamente la funzione ed inserire in automatico, per ogni pagina, quello corretto.

Come inserire i tag per Facebook

In genere la forma di un meta-tag per un URL da condividere su facebook, per far apparire l'immagine, il titolo, l'autore e la descrizione, è cosà¬:

 property="og:url"                content="http://urlpagina.est/percorso" />
 property="og:type"               content="article" />

 property="og:title" content="Titolo dell'articolo su FB" /> 
 property="og:description" content="Descrizione dell'articolo su FB" /> 
 property="og:image" content="http://urlimmagine.est/percorso/immagine.jpg" />

potete copiare ed incollare questo formato, ed inserirlo nel template HTML della vostra pagina adattandolo volta per volta. In questo caso gli attributi sono cinque, che rispondono alle specifiche di Open Graph:

og:url, che deve essere con valore content uguale all'URL assoluto dell'articolo;
og:type, che deve essere con valore content uguale ad article;
article:author, che indica l'autore dell'articolo (o una lista di autori separati da virgola);
og:url, che deve essere con valore content uguale al titolo cliccabile dell'articolo;
og:url, che deve essere con valore content uguale alla descrizione testuale estesa dell'articolo;
og:image, che deve essere con valore content pari all'URL assoluto dell'immagine da mostrare nell'anteprima dell'articolo;

Per verificare che i meta tag di Facebook siano correttamente impostati per una pagina è possibile sfruttare il Facebook Debugger.

Come inserire i tag per Twitter

L'abilitazione delle cosiddette card di Twitter si può fare seguendo questo modello:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />

il funzionamento è abbastanza semplice anche in questo caso: ci sono vari campi che devono essere valorizzati a seconda dei casi. Abbiamo, nell'ordine:

twitter:card che deve avere valore summary;
twitter:site che deve avere valore pari al nome del sito web;
twitter:title che deve avere valore content uguale al titolo dell'articolo nell'anteprima di Twitter;
twitter:description che deve avere valore content uguale alla descrizione dell'articolo nell'anteprima di Twitter
twitter:immagine che deve avere valore content pari all'URL dell'immagine di anteprima;

Come inserire il tag meta-keywords

Il meta tag keywords è ormai considerato inutile dalla maggiorparte delle pagine web; questo perchè è fin troppo facile da manipolare e, per questo, viene in genere ignorato dai motori di ricerca. Se uno volesse inserirlo lo stesso, comunque, la sintassi corretta è la seguente:

Come inserire i meta tag in una pagina web