Invisibili agli utenti ma di vitale importanza per i motori di ricerca, sono piccoli descrittori di contenuto che ci aiutano a comunicare ai crawler di cosa tratta una pagina. Più precisamente, i meta tag sono aree del codice HTML che contengono informazioni su un sito e su quella specifica pagina, e rappresentano pertanto una componente fondamentale per la creazione di pagine web ottimizzate e facilmente indicizzabili dai motori di ricerca. Andiamo quindi ad approfondire cosa e quali sono i meta tag HTML e perché sono una parte importante di una solida strategia SEO.
Che cosa sono i meta tag
I meta tag HTML sono piccoli frammenti di testo che servono a descrivere il contenuto di una pagina per i motori di ricerca: al contrario di altri pezzi di codice o dei vecchi tag che comparivano (e a volte compaiono ancora) in siti e soprattutto blog, infatti, questi snippet esistono solo nel codice della pagina in HTML, non influiscono sulla impaginazione grafica e non sono visibili per i lettori comuni se non attraverso la visualizzazione nel codice sorgente (se usati, infatti, i meta tag compaiono nella parte alta – l’head – del contenuto così visualizzato).
Il nome esteso sarebbe metadata e deriva dall’unione delle parole meta (dal greco μετὰ “oltre, dopo, per mezzo”) e data (plurale latino di datum “informazione”): significa che questi tag danno maggiori informazioni e dati riguardanti la pagina a cui fanno riferimento, e in pratica sono dati sui dati sulla pagina.
Il significato dei meta tag HTML: l’alfabeto della SEO
I meta tag sono quindi elementi HTML che forniscono informazioni sul contenuto di una pagina web ai motori di ricerca, e si trovano all’interno dell’elemento <head> di una pagina HTML.
Pur non essendo visibili all’utente che visita la pagina, svolgono un ruolo cruciale nell’indicizzazione e nel posizionamento del sito nei risultati di ricerca, tanto che spesso sono definiti “alfabeto della SEO“: proprio come le lettere dell’alfabeto si combinano per formare parole e frasi, i meta tag si combinano per creare un quadro complessivo del contenuto di una pagina web, che aiuta i motori di ricerca a capire di cosa tratta la pagina, a chi dovrebbe essere mostrata e come dovrebbe essere classificata nei risultati di ricerca.
La sintassi degli elementi meta: come si compongono e come si inseriscono i meta tag
Per utilizzare correttamente questi elementi dobbiamo familiarizzare con la loro “grammatica”, proprio come avviene con l’alfabeto, e in particolare la scrittura di un meta tag richiede la comprensione della sua sintassi e struttura.
È poi importante premettere che i tag meta non sono formalmente codificati: potenzialmente, il webmaster può quindi usarli a propria discrezione, secondo le proprie necessità, ma ogni sistema elabora solo i meta tag che riconosce, mentre ignora tutti gli altri.
Di base, come detto, questi tag HTML si trovano all’interno dell’elemento <head> di una pagina web e sono solitamente specificati da due attributi: name identifica il tipo di informazione che il tag sta fornendo, mentre content descrive il contenuto effettivo del tag.
Dal punto di vista formale, quindi, un meta tag va aggiunto nella sezione <head> della pagina HTML tra i tag <HEAD> </HEAD>, non richiede un tag di chiusura e appare scritto in questo modo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Description" CONTENT="Author: A.N. Author, Illustrator: P. Picture, Category: Books, Price: £9.24, Length: 784 pages">
<meta name="google-site-verification" content="+nxGUDJ4QpAZ5l9Bsjdi102tLVC21AIh5d1Nl23908vVuFHs34="/>
<title>Example Books - high-quality used books for children</title>
<meta name="robots" content="noindex,nofollow">
</head>
</html>
La grammatica formale richiede che sia presente una coppia nome/valore e almeno due elementi, i citati attributi “name” e “content“, a cui si può aggiungere un terzo elemento principale, “http-equiv”.
Dove Name serve a indicare il tipo di informazione contenuta nel tag e Content informa sul contenuto del tag, determinando il valore da attribuire alla proprietà che lo precede, i dati presenti in http-equiv comunicano al browser che questi sono valori di intestazione della connessione HTTP (HTTP Header).
Un esempio di sintassi corretta
La sintassi di base di un meta tag è la seguente:
<meta name=”nome” content=”contenuto”>
Dove “nome” è il tipo di informazione che il tag sta fornendo e “contenuto” è l’informazione effettiva. Ad esempio, un meta tag che fornisce una descrizione di una pagina web potrebbe apparire così:
<meta name=”description” content=”Questa è la descrizione della mia pagina web.”>
In questo caso, l’attributo name è “description”, che indica che il tag sta fornendo una descrizione della pagina, e l’attributo content è “Questa è la descrizione della mia pagina web.”, che è la descrizione effettiva.
Alcuni meta tag utilizzano un attributo name leggermente diverso. Ad esempio, il meta tag viewport, che controlla come una pagina viene visualizzata sui dispositivi mobili, potrebbe apparire così:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
In questo caso, l’attributo name è “viewport” e l’attributo content è “width=device-width, initial-scale=1”, che indica al browser di adattare la larghezza della pagina alla larghezza del dispositivo e di impostare lo zoom iniziale a 1.
Le linee guida per scrivere i meta tag
Anche se non è particolarmente complicata, la scrittura di meta tag efficaci è comunque un mix di arte e scienza: questi piccoli frammenti di codice HTML, nascosti all’interno dell’elemento <head> di una pagina web, giocano un ruolo fondamentale nel comunicare ai motori di ricerca il contenuto delle nostre pagine, e ci sono alcuni punti da rispettare per assicurarci di inserire meta tag che siano non solo tecnicamente corretti, ma anche efficaci dal punto di vista SEO.
Innanzitutto, è fondamentale comprendere la struttura di base di un meta tag che abbiamo descritto sopra, che però è solo l’inizio, perché per scrivere buoni meta tag dobbiamo anche considerare il contenuto. Ogni pagina del nostro sito dovrebbe avere meta tag unici, che riflettono accuratamente il suo contenuto specifico, e ciò vale in primi per il title tag e il meta tag description, che vengono visualizzati nei risultati di ricerca e possono influenzare se gli utenti scelgono di cliccare sul nostro sito o meno.
La lunghezza è un altro fattore chiave: i motori di ricerca spesso tagliano i title tag e le meta description che sono troppo lunghi, quindi in linea di massima sarebbe importante cercare di mantenere i title tag sotto i 60 caratteri e le meta description sotto i 160 caratteri. Ma non dobbiamo lasciare che la lunghezza limiti la nostra creatività: un buon meta tag dovrebbe essere conciso, ma anche descrittivo e coinvolgente.
Infine, è importante utilizzare le parole chiave in modo appropriato nei meta tag: il keyword stuffing è sconsigliato e rischioso anche qui, perché lo stratagemma di inserire un eccessivo numero di parole chiave nel tentativo di manipolare i motori di ricerca può portare a penalizzazioni, ma al contrario l’inclusione di parole chiave pertinenti e rilevanti può aiutare i motori di ricerca a capire il contenuto della pagina e a classificarla correttamente.
Quali sono i meta tag HTML più importanti
Questi elementi meta tag HTML agiscono quindi come un ponte di comunicazione tra un sito sito e i motori di ricerca, ma non hanno la stessa importanza: anzi, nel tempo alcuni sono diventati obsoleti o comunque meno rilevanti per il search marketing, anche a seguito della diffusione dei dati strutturati, che migliorano e semplificano la comunicazione di informazioni ai motori di ricerca.
Ad ogni modo, ci sono alcuni meta tag che vale la pena conoscere e usare per far sapere a Google chi siamo e cosa forniamo attraverso le nostre pagine, e in particolare:
- Title Tag. Rappresenta il titolo della pagina web, interpretato dai motori di ricerca come l’indicatore principale del contenuto della pagina. Si visualizza nella parte superiore del browser e dovrebbe essere unico per ogni pagina del sito.
- Meta Description. È una sintesi concisa del contenuto della pagina: appare nelle pagine dei risultati dei motori di ricerca e, se ben scritta, può invogliare gli utenti a cliccare sul link e approfondire il contenuto.
- Meta Tag Robots. Sono dei segnali di stop and go per i crawler dei motori di ricerca, che leggono queste istruzioni riservate e si regolano di conseguenza rispetto alle possibilità che hanno di prendere e mostrare i contenuti. Ad esempio, possono essere etichettati come “noindex” o “nofollow”, a seconda del modo in cui vogliamo che i motori di ricerca interagiscano con la pagina.
- Tag Hreflang. Questo attributo aiuta i motori di ricerca a capire la lingua e il Paese a cui è destinato il contenuto, un elemento chiave per i siti multilingua con un pubblico internazionale diversificato.
- Tag canonical. Indicano ai motori di ricerca quale versione di una pagina dovrebbe essere considerata la principale o preferita, aiutando a prevenire problemi di contenuto duplicato.
- Meta Tag Keywords. Questi tag contengono una serie di parole chiave pertinenti al contenuto della pagina. Anche se il loro valore per la SEO è diminuito nel corso degli anni, possono ancora fornire un utile contesto per il contenuto.
- Tag Viewport. Questo attributo controlla il modo in cui il contenuto viene visualizzato sui dispositivi mobili, garantendo un’esperienza utente ottimale su tutti i dispositivi.
- Tag Open Graph. Questi tag determinano come il contenuto viene visualizzato quando viene condiviso sui social media, influenzando l’immagine e il titolo che vengono mostrati: in pratica, consentono di determinare per impostazione predefinita quali risorse vengono visualizzate nel titolo, nella descrizione e nell’immaginequando si condividono i link sui social media.
Meta Tag e Google: le istruzioni riconosciute da Google
Google dedica particolare attenzione alle definizioni generali di meta tag, con una pagina specifica che introduce il topic e chiarisce quali sono gli elementi che Googlebot effettivamente riconosce: è proprio qui che leggiamo che “i meta tag a livello di pagina sono un ottimo strumento a disposizione dei proprietari dei siti web per fornire ai motori di ricerca informazioni sui propri siti“, e che possono servire “a fornire informazioni a tutti i tipi di client“.
Per avere un quadro preciso, possiamo dire che Google riconosce sicuramente questi meta tag – l’elenco non è completo, ma la guida sottolinea che “Google ignorerà i meta tag che non riconosce”:
- <meta name=”description” content=”A description of the page” />
È una breve descrizione del contenuto della pagina che, scrive Google, in alcune situazioni “viene utilizzata nello snippet visibile nei risultati di ricerca”.
- <meta name=”robots” content=”…, …” />
- <meta name=”googlebot” content=”…, …” />
Permettono di controllare il comportamento della scansione e dell’indicizzazione da parte dei motori di ricerca. Il tag <meta name=”robots”> si applica a tutti i motori di ricerca, mentre il tag <meta name=”googlebot”> è specifico per Google. Nel caso di meta tag robots (o googlebot) in conflitto, viene applicato quello più restrittivo. Ad esempio, se una pagina ha entrambi i tag max-snippet:50 e nosnippet, viene applicato il tag nosnippet. I valori predefiniti sono index, follow e non devono essere specificati.
- <meta name=”google” content=”nositelinkssearchbox” />
Quando gli utenti cercano un sito, a volte nei risultati della Ricerca Google vengono visualizzati una casella di ricerca specifica per quel sito e altri link diretti alle sue pagine: questo tag indica a Google di non mostrare la casella di ricerca dei sitelink.
- <meta name=”google” content=”notranslate” />
Quando Google riconosce che i contenuti di una pagina probabilmente non sono nella lingua utilizzata dall’utente, spesso fornisce un link a una traduzione nei risultati di ricerca; di norma, questo consente di offrire contenuti esclusivi e accattivanti a un gruppo di utenti molto più ampio, ma potrebbero verificarsi situazioni in cui non si rivela opportuno. Questo meta tag comunica a Google che non intendiamo fornire una traduzione della pagina.
- <meta name=”google” content=”nopagereadaloud” />
Impedisce ai browser web di leggere ad alta voce la pagina in questione usando i comandi vocali dell’Assistente Google “Leggi questa pagina” e “Leggi”.
- <meta name=”google-site-verification” content=”…” />
Possiamo utilizzare questo tag nella pagina di primo livello del sito per verificare la proprietà per Search Console. I valori degli attributi name e content devono corrispondere esattamente a quelli forniti (rispettando le minuscole e le maiuscole), ma è irrilevante se modifichiamo il tag da XHTML a HTML o se il formato del tag corrisponde al formato della pagina.
- <meta http-equiv=”Content-Type” content=”…;
- charset=…” />
- <meta charset=”…” >
Questo codice definisce il tipo di contenuti e il set di caratteri della pagina.
- <meta http-equiv=”refresh” content=”…;
- url=…” />
Questo tag indirizza l’utente a un nuovo URL dopo un certo periodo di tempo e talvolta è utilizzato come una semplice forma di reindirizzamento. Tuttavia, non è supportato da tutti i browser e può confondere l’utente, al punto che il World Wide Web Consortium (W3C) sconsiglia di utilizzare questo tag (meglio sostituirlo con un redirect 301 lato server).
- <meta name=”viewport” content=”…”>
Questo tag indica al browser come mostrare una pagina su un dispositivo mobile. La presenza di questo tag indica a Google che la pagina è ottimizzata per i dispositivi mobili.
- <meta name=”rating” content=”adult” />
- <meta name=”rating” content=”RTA-5042-1996-1400-1577-RTA” />
Consente di indicare che una pagina include contenuti per adulti in modo che sia filtrata dai risultati di SafeSearch.
Tra gli aspetti da considerare, il documento ufficiale di Mountain View ricorda che Google può leggere meta tag di tipo HTML e XHTML, indipendentemente dal codice utilizzato nella pagina, e che in genere i meta tag non sono case sensitive, per cui l’uso delle maiuscole e delle minuscole è irrilevante (a eccezione di google-site-verification).
Meta Tag e SEO, perché vanno usati correttamente
Se utilizzati correttamente, i meta tag possono potenzialmente aiutare a migliorare la visibilità di un sito nei risultati di ricerca e ad aumentare il traffico organico, e più in generale influiscono sul modo in cui il sito appare nelle SERP e sull’engagement delle persone e dei loro clic: si comprende, quindi, che possono avere un rilevante valore per la SEO, e in particolare titoli e descrizioni sono elementi cruciali per catturare clic e quindi hanno un impatto potenziale su clic e tassi di coinvolgimento.
Questi piccoli frammenti di testo non sono un fattore di ranking diretto e non hanno un impatto diretto sulle classifiche, ma possono comunque influenzare il modo in cui il sito appare all’interno dell’ecosistema digitale, oltre che rappresentare una fonte di informazione per la visibilità in risultati di ricerca non tradizionali, come Knowledge Graph, ricerca di immagini di Google, voce e altro.
In generale, una buona strategia SEO deve badare all’ottimizzazione dei meta tag perché possono aiutare Google a comprendere meglio il tipo di contenuto proposto e migliorare l’esperienza fornita agli utenti, soprattutto da mobile. Altri tag, e in particolare i meta robots e hreflang, sono cruciali per una gestione ottimale dei contenuti da indicizzare o da veicolare pubblico giusto in specifici Paesi, così da evitare problemi come contenuti duplicati o serviti a utenti di aree geografiche sbagliate, che possono danneggiare il posizionamento e la reputazione del sito.
I meta tag sono insomma come un biglietto da visita per i motori di ricerca: forniscono un sommario del contenuto della pagina, permettendo ai motori di ricerca di comprendere di cosa tratta la pagina e di classificarla correttamente nei risultati di ricerca. Certo, non sono tutti utili allo stesso modo ed è fondamentale applicarli in modo corretto e ponderato, evitando tecniche di ottimizzazione eccessive o manipolative che potrebbero portare a penalizzazioni ma, in linea di massima, basta un po’ di pratica per padroneggiare l’arte di gestire i meta tag per migliorare la visibilità del sito, aumentare il traffico e fornire un’esperienza utente di alta qualità.