Meta tag HTML

I meta tag HTML sono dati inseriti nell’header, ma non visibili, che forniscono informazioni importanti su un sito web. Riportando indicazioni sulla struttura, il tipo di pagina, il funzionamento e la lingua, i meta tag influiscono non solo sulla rappresentazione e sull’indicizzazione, 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 essenziali per la rappresentazione, l’interpretazione e l’indicizzazione dei siti web da parte dei browser e dei motori di ricerca. Posizionati nell’header di un sito internet, non sono visibili agli utenti. Usando abilmente <meta> in HTML, gli sviluppatori e le sviluppatrici possono mettere a disposizione le proprietà del sito per migliorare la leggibilità da parte dei motori di ricerca e definire informazioni come lingua, contenuto, struttura o codifica dei caratteri.

I meta tag sono quindi uno strumento essenziale in HTML per ottimizzare le pagine per i motori di ricerca, migliorare il ranking e gestire la visualizzazione su diversi dispositivi. Anche se a oggi le meta informazioni non rientrano più tra i criteri di ranking più importanti per i siti web, soprattutto il titolo HTML e la meta description continuano a svolgere un ruolo rilevante.

I campi di applicazione più importanti dei meta tag HTML

Tra i campi di applicazione più importanti dei meta elementi HTML troviamo:

• Ottimizzazione per i motori di ricerca: i meta tag come description e title forniscono ai motori di ricerca informazioni sul contenuto e i punti chiave di una pagina. Permettono così di riassumere in modo chiaro il contenuto di una pagina, suscitare interesse e generare clic.
• Indicizzazione: i metadati come robots indicano ai motori di ricerca se indicizzare una pagina oppure no.
• Visualizzazione o rappresentazione: i meta tag possono contenere informazioni e istruzioni sulla codifica dei caratteri, la visualizzazione sui dispositivi mobili o gli aggiornamenti e i trasferimenti automatici.
• Social media: i social network utilizzano meta tag dedicati che devono essere tenuti in considerazione affinché i contenuti condivisi siano rappresentati correttamente.
• Accessibilità: i metadati sono importanti per l’accessibilità, perché aiutano gli screen reader a categorizzare i contenuti. Servono anche a rappresentare i contenuti correttamente nei vari dispositivi con l’elemento viewport.

Quanto sono importanti i meta tag HTML?

Oggi, utilizzando termini di ricerca e domande, i motori di ricerca come Google forniscono 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 manipolare 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 importanza, anzi: se i metadati vengono usati in modo errato, il rischio è di essere ignorati completamente. Un utilizzo corretto dei metadati rilevanti come il tag <title> e la meta description, oltre a una manutenzione regolare dei metadati, possono continuare a essere criteri decisivi per un buon ranking che rimane stabile nel tempo.

I meta tag HTML più importanti e la loro sintassi

Le funzioni che svolgono i meta tag e per cosa sono utilizzati dipendono dal loro tipo. Nelle sezioni che seguono abbiamo riepilogato per te alcuni dei meta tag più importanti.

Ottimizzazione per i motori di ricerca (SEO)

L’ottimizzazione per i motori di ricerca è una delle funzioni principali di <meta> in HTML. Sono importanti in particolare i seguenti meta tag rilevanti per la SEO:

Title

Con il titolo o elemento <title> spieghiamo brevemente 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 è menzionato nell’ambito dei meta tag più importanti, in quanto è letto anche dai motori di ricerca ed è usato come uno dei fattori più importanti per il ranking.

Essendo l’elemento cliccabile nei risultati di ricerca, è importante che il titolo sia chiaro e conciso, che susciti interesse e sia della lunghezza adatta per essere visualizzato completamente.

Sintassi:

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

Meta description

La meta description non incide direttamente sul ranking, ma al pari del titolo costituisce il primo contatto con gli utenti, fornendo le prime informazioni che generano clic. Sono importanti 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 istruzioni sull’indicizzazione, il follow, gli snippet o il salvataggio, che sono rilevanti per la SEO:

• index: la pagina può essere indicizzata
• noindex: la pagina non può essere indicizzata
• 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 visualizzata

Se non sono presenti dati robots, i motori di ricerca interpretano questa assenza come un consenso all’indicizzazione, alla visualizzazione di snippet e al follow dei link. La gestione dell’indicizzazione con robots è pertanto una funzione molto importante dei meta tag.

Esempio di sintassi di una pagina che può essere indicizzata e per cui i crawler possono seguire i link:

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

viewport

Il meta attributo HTML viewport è di importanza fondamentale nel design responsive dei siti web. Anche se il meta tag in sé non ha rilevanza diretta per la SEO, è un importante fattore di ranking per l’ottimizzazione dei siti web per i dispositivi mobili, ovvero il mobile SEO. Con viewport comunichi a un motore di ricerca se il tuo sito web supporta una rappresentazione responsive su diversi dispositivi ed è ottimizzato per i dispositivi mobili. Inoltre, viewport assicura la rappresentazione corretta del sito web a seconda del dispositivo, 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 utilizzata per garantire una corretta rappresentazione dei testi. Questo soprattutto se non hai definito il set di caratteri nell’header HTTP oppure se il browser non richiama i file HTML tramite HTTP(S), ma direttamente da dischi rigidi.

Sintassi:

<meta charset="utf-8"/>

Memorizzazione temporanea con expires

Se non vuoi impedire del tutto il salvataggio nella cache, con expires puoi definire un momento o un intervallo di tempo dopo cui far scadere i dati HTML salvati. Tuttavia, nelle applicazioni web moderne expires è usato ancora molto raramente, in quanto nella maggior parte dei casi il caching è gestito attraverso 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 semplifichi l’amministrazione del sito e assicuri trasparenza 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 considerate uno dei criteri di ranking più importanti 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 descrivono i punti più importanti di una pagina, che nel caso ideale coincidono con le intenzioni di ricerca degli utenti. Usate in determinati settori, le meta parole chiave possono offrire vantaggi sulla concorrenza. Per il ranking hanno però ormai un’importanza secondaria.

Sintassi:

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