Meta tag HTML

I meta tag HTML sono dati inseriti nell’header, ma non visibili, che for­ni­sco­no in­for­ma­zio­ni im­por­tan­ti su un sito web. Ri­por­tan­do in­di­ca­zio­ni sulla struttura, il tipo di pagina, il fun­zio­na­men­to e la lingua, i meta tag in­flui­sco­no non solo sulla rap­pre­sen­ta­zio­ne e sull’in­di­ciz­za­zio­ne, ma servono anche come strumento SEO per un migliore ranking nei motori di ricerca.

Cosa sono i meta tag HTML?

I meta tag HTML sono speciali tag HTML es­sen­zia­li per la rap­pre­sen­ta­zio­ne, l’in­ter­pre­ta­zio­ne e l’in­di­ciz­za­zio­ne dei siti web da parte dei browser e dei motori di ricerca. Po­si­zio­na­ti nell’header di un sito internet, non sono visibili agli utenti. Usando abilmente <meta> in HTML, gli svi­lup­pa­to­ri e le svi­lup­pa­tri­ci possono mettere a di­spo­si­zio­ne le proprietà del sito per mi­glio­ra­re la leg­gi­bi­li­tà da parte dei motori di ricerca e definire in­for­ma­zio­ni come lingua, contenuto, struttura o codifica dei caratteri.

I meta tag sono quindi uno strumento es­sen­zia­le in HTML per ot­ti­miz­za­re le pagine per i motori di ricerca, mi­glio­ra­re il ranking e gestire la vi­sua­liz­za­zio­ne su diversi di­spo­si­ti­vi. Anche se a oggi le meta in­for­ma­zio­ni non rientrano più tra i criteri di ranking più im­por­tan­ti per i siti web, so­prat­tut­to il titolo HTML e la meta de­scrip­tion con­ti­nua­no a svolgere un ruolo rilevante.

I campi di ap­pli­ca­zio­ne più im­por­tan­ti dei meta tag HTML

Tra i campi di ap­pli­ca­zio­ne più im­por­tan­ti dei meta elementi HTML troviamo:

• Ot­ti­miz­za­zio­ne per i motori di ricerca: i meta tag come de­scrip­tion e title for­ni­sco­no ai motori di ricerca in­for­ma­zio­ni sul contenuto e i punti chiave di una pagina. Per­met­to­no così di rias­su­me­re in modo chiaro il contenuto di una pagina, suscitare interesse e generare clic.
• In­di­ciz­za­zio­ne: i metadati come robots indicano ai motori di ricerca se in­di­ciz­za­re una pagina oppure no.
• Vi­sua­liz­za­zio­ne o rap­pre­sen­ta­zio­ne: i meta tag possono contenere in­for­ma­zio­ni e istru­zio­ni sulla codifica dei caratteri, la vi­sua­liz­za­zio­ne sui di­spo­si­ti­vi mobili o gli ag­gior­na­men­ti e i tra­sfe­ri­men­ti au­to­ma­ti­ci.
• Social media: i social network uti­liz­za­no meta tag dedicati che devono essere tenuti in con­si­de­ra­zio­ne affinché i contenuti condivisi siano rap­pre­sen­ta­ti cor­ret­ta­men­te.
• Ac­ces­si­bi­li­tà: i metadati sono im­por­tan­ti per l’ac­ces­si­bi­li­tà, perché aiutano gli screen reader a ca­te­go­riz­za­re i contenuti. Servono anche a rap­pre­sen­ta­re i contenuti cor­ret­ta­men­te nei vari di­spo­si­ti­vi con l’elemento viewport.

Quanto sono im­por­tan­ti i meta tag HTML?

Oggi, uti­liz­zan­do termini di ricerca e domande, i motori di ricerca come Google for­ni­sco­no un ranking tematico molto concreto e preciso. In passato i metadati erano molto più rilevanti per il ranking di un sito web. Poiché con i meta tag e le meta parole chiave è molto più facile ma­ni­po­la­re il ranking del sito web, talvolta si è abusato dei metadati, ad esempio con il keyword stuffing.

Tuttavia, per i motori di ricerca moderni i metadati e la marcatura con i meta tag HTML non hanno perso la loro im­por­tan­za, anzi: se i metadati vengono usati in modo errato, il rischio è di essere ignorati com­ple­ta­men­te. Un utilizzo corretto dei metadati rilevanti come il tag <title> e la meta de­scrip­tion, oltre a una ma­nu­ten­zio­ne regolare dei metadati, possono con­ti­nua­re a essere criteri decisivi per un buon ranking che rimane stabile nel tempo.

I meta tag HTML più im­por­tan­ti e la loro sintassi

Le funzioni che svolgono i meta tag e per cosa sono uti­liz­za­ti dipendono dal loro tipo. Nelle sezioni che seguono abbiamo rie­pi­lo­ga­to per te alcuni dei meta tag più im­por­tan­ti.

Ot­ti­miz­za­zio­ne per i motori di ricerca (SEO)

L’ot­ti­miz­za­zio­ne per i motori di ricerca è una delle funzioni prin­ci­pa­li di <meta> in HTML. Sono im­por­tan­ti in par­ti­co­la­re i seguenti meta tag rilevanti per la SEO:

Title

Con il titolo o elemento <title> spie­ghia­mo bre­ve­men­te ai motori di ricerca e agli utenti di cosa tratta il sito web. Per l’esattezza, non è un meta tag, ma un tag autonomo che sta davanti a tutti gli altri meta tag. Spesso, tuttavia, il titolo è men­zio­na­to nell’ambito dei meta tag più im­por­tan­ti, in quanto è letto anche dai motori di ricerca ed è usato come uno dei fattori più im­por­tan­ti per il ranking.

Essendo l’elemento clic­ca­bi­le nei risultati di ricerca, è im­por­tan­te che il titolo sia chiaro e conciso, che susciti interesse e sia della lunghezza adatta per essere vi­sua­liz­za­to com­ple­ta­men­te.

Sintassi:

<title>Inserire qui il titolo del documento</title>

Meta de­scrip­tion

La meta de­scrip­tion non incide di­ret­ta­men­te sul ranking, ma al pari del titolo co­sti­tui­sce il primo contatto con gli utenti, fornendo le prime in­for­ma­zio­ni che generano clic. Sono im­por­tan­ti anche la lunghezza ed elementi come icone o simboli che mettono in evidenza concetti rilevanti o una CTA (call to action).

Sintassi:

<meta name="description" content="Qui si trova la meta description del sito web, che in condizioni ottimali dovrebbe avere una lunghezza di circa 150 caratteri.">

robots

Con l’attributo HTML robots puoi fornire ai motori di ricerca le seguenti istru­zio­ni sull’in­di­ciz­za­zio­ne, il follow, gli snippet o il sal­va­tag­gio, che sono rilevanti per la SEO:

• index: la pagina può essere in­di­ciz­za­ta
• noindex: la pagina non può essere in­di­ciz­za­ta
• follow: i crawler possono seguire i link nella pagina
• nofollow: i crawler non possono seguire i link nella pagina
• nosnippet: i contenuti non possono essere usati come featured snippet
• noarchive: la pagina salvata nella cache di Google non può essere vi­sua­liz­za­ta

Se non sono presenti dati robots, i motori di ricerca in­ter­pre­ta­no questa assenza come un consenso all’in­di­ciz­za­zio­ne, alla vi­sua­liz­za­zio­ne di snippet e al follow dei link. La gestione dell’in­di­ciz­za­zio­ne con robots è pertanto una funzione molto im­por­tan­te dei meta tag.

Esempio di sintassi di una pagina che può essere in­di­ciz­za­ta e per cui i crawler possono seguire i link:

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

viewport

Il meta attributo HTML viewport è di im­por­tan­za fon­da­men­ta­le nel design re­spon­si­ve dei siti web. Anche se il meta tag in sé non ha rilevanza diretta per la SEO, è un im­por­tan­te fattore di ranking per l’ot­ti­miz­za­zio­ne dei siti web per i di­spo­si­ti­vi mobili, ovvero il mobile SEO. Con viewport comunichi a un motore di ricerca se il tuo sito web supporta una rap­pre­sen­ta­zio­ne re­spon­si­ve su diversi di­spo­si­ti­vi ed è ot­ti­miz­za­to per i di­spo­si­ti­vi mobili. Inoltre, viewport assicura la rap­pre­sen­ta­zio­ne corretta del sito web a seconda del di­spo­si­ti­vo, e quindi un’usabilità ottimale.

Sintassi :

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

Codifica dei caratteri con charset

Con il meta tag charset comunichi ai browser la codifica dei caratteri uti­liz­za­ta per garantire una corretta rap­pre­sen­ta­zio­ne dei testi. Questo so­prat­tut­to se non hai definito il set di caratteri nell’header HTTP oppure se il browser non richiama i file HTML tramite HTTP(S), ma di­ret­ta­men­te da dischi rigidi.

Sintassi:

<meta charset="utf-8"/>

Me­mo­riz­za­zio­ne tem­po­ra­nea con expires

Se non vuoi impedire del tutto il sal­va­tag­gio nella cache, con expires puoi definire un momento o un in­ter­val­lo di tempo dopo cui far scadere i dati HTML salvati. Tuttavia, nelle ap­pli­ca­zio­ni web moderne expires è usato ancora molto raramente, in quanto nella maggior parte dei casi il caching è gestito at­tra­ver­so l’header HTTP.

Sintassi:

<meta http-equiv="expires" content="tempo di scadenza in secondi"/>

Dati sull’autore e il copyright

Per inserire nel codice sorgente dati sull’autore e il copyright puoi usare i meta tag HTML author e copyright. In questo modo sem­pli­fi­chi l’am­mi­ni­stra­zio­ne del sito e assicuri tra­spa­ren­za sulle ultime modifiche di una pagina.

Sintassi:

<meta name="author" content="autore"/>
<meta name="copyright" content="proprietario del sito"/>

Parole chiave

In passato le meta parole chiave erano con­si­de­ra­te uno dei criteri di ranking più im­por­tan­ti per la creazione dei siti web. Oggi sono molto meno rilevanti e, perlomeno da Google, sono ignorate per quanto riguarda la rilevanza SEO e il ranking. Le parole chiave de­scri­vo­no i punti più im­por­tan­ti di una pagina, che nel caso ideale coin­ci­do­no con le in­ten­zio­ni di ricerca degli utenti. Usate in de­ter­mi­na­ti settori, le meta parole chiave possono offrire vantaggi sulla con­cor­ren­za. Per il ranking hanno però ormai un’im­por­tan­za se­con­da­ria.

Sintassi:

<meta name="keywords" content="Keyword1, Keyword2, Keyword3…">