I meta tag sono elementi del markup HTML, molto importanti perché definiscono le caratteristiche e funzionalità del documento e influiscono sul modo in cui una pagina web appare nei risultati dei motori di ricerca – la SERP.
In pratica, tramite del markup specifico è possibile trasmettere ai bot dei motori di ricerca delle informazioni aggiuntive.
I meta dati possono avere un grosso impatto sul traffico organico e sul CTR – Click Through Rate che la pagina ottiene in SERP, sono fattori che possono influire sulla SEO e sul posizionamento.
L’ottimizzazione dei meta tag è una parte critica di una solida strategia SEO. Sebbene alcuni tag potrebbero non avere un impatto diretto sul ranking, influiscono sul modo in cui il tuo sito appare all’interno dell’ecosistema Google e non solo.
Inoltre, alcuni meta tag potrebbero essere un fattore in molti risultati di ricerca non tradizionali, come il Knowledge Graph, la ricerca di immagini di Google, le ricerche vocali e altro.
Meta tag HTML?
Il tag <meta> definisce alcuni metadati in un documento HTML. I metadati sono dati, informazioni sui dati presentati in pagina.
I <meta> tag vanno sempre posizionati all’interno del tag <head> del documento HTML. Sono generalmente usati per specificare alcune informazioni, come ad esempio:
- il set di caratteri utilizzato dal documento HTML,
- il titolo del documento
- la descrizione della pagina
- le parole chiave rappresentative del contenuto,
- il markup open graph,
- l’autore del documento
- le impostazioni del viewport per i dispositivi mobile
- e molte altre cose.
Come sai, un documento HTML è definito con questa struttura:
<html>
<head>
</head>
<body>
</body>
</html>Il tag head, ovvero l’intestazione di un documento HTML, è la parte che non viene visualizzata nel browser quando la pagina viene caricata. Il browser mostra solo il contenuto del tag <body>.
I metadati sono informazioni invisibili per il lettore ma non per i bot dei motori di ricerca. I meta tag sono informazioni utilizzate per comunicare ai motori di ricerca, e ai suoi utenti, maggiori informazioni sui contenuti delle tue pagine.
Attributi del tag meta
Il tag meta può usare quattro attributi:
- L’attributo charset specifica la codifica dei caratteri per il documento HTML. La specifica HTML5 incoraggia gli sviluppatori web a utilizzare il set di caratteri UTF-8, che copre quasi tutti i caratteri e simboli del mondo.
- L’attributo http-equiv fornisce un’intestazione HTTP per le informazioni/il valore dell’attributo content. L’attributo http-equiv può essere utilizzato per simulare un’intestazione di risposta HTTP.
- L’attributo name specifica il nome per i metadati, il tipo. L’attributo name specifica un nome per le informazioni/valore dell’attributo content. Se è impostato l’attributo http-equiv, l’attributo name non deve essere impostato.
- L’attributo content fornisce il valore associato all’attributo http-equiv o name.
I meta tag di una pagina HTML generalmente hanno questo aspetto:
<meta http-equiv="refresh" content="30">
<meta http-equiv="content-security-policy" content="default-src 'self'">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="default-style" content="the document's preferred stylesheet">
<meta charset="UTF-8" />
<meta name="keywords" content="Guida, HTML">
<meta name="description" content="Guida HTML">
<meta name="author" content="Giovanni Sacheli">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name='robots' content='max-image-preview:large' />Altri tag (non solo meta) che possiamo trovare nelle pagine web sono:
- Tag title: non è classificato come un tag meta, ma è un requisito fondamentale per una pagina HTML, è importante citarlo dato che definisce il titolo della tua pagina, che dovrebbe essere unico per ogni URL.
- Tag Viewport: influisce sul modo in cui i tuoi contenuti vengono visualizzati sui dispositivi mobili.
- Robot: possono essere utilizzati per indicare il contenuto che si desidera un “noindex” o un “nofollow”
- Tag Hreflang: consente al motore di ricerca di identificare la lingua e il paese in cui si desidera visualizzare il contenuto quando si ha un pubblico internazionale
- Tag Canonical: utilizzati per specificare la versione principale o principale della pagina
- Tag Open graph: utilizzati per specificare quali risorse vengono visualizzate nel titolo e nell’immagine per impostazione predefinita quando si condividono i collegamenti sui siti social
- Tag Content type: influisce sul modo in cui la tua pagina viene visualizzata nel browser
I meta tag quindi forniscono informazioni sulla pagina web nell’HTML del documento. Queste informazioni sono chiamate “metadati” e sebbene non vengano visualizzate sulla pagina stessa, possono essere lette dai motori di ricerca e dai web crawler.
Quali meta tag comprende Google?
Cliccando questo link puoi trovare informazioni sui meta dati compatibili con Google.
<meta name="description" content="A description of the page" />
<meta name="robots" content="..., ..." />
<meta name="googlebot" content="..., ..." />
<meta name="google" content="nositelinkssearchbox" />
<meta name="googlebot" content="notranslate" />
<meta name="google" content="nopagereadaloud" />
<meta name="google-site-verification" content="..." />
<meta http-equiv="Content-Type" content="...; charset=..." />
<meta charset="..." >
<meta http-equiv="refresh" content="...;url=..." />
<meta name="viewport" content="...">
<meta name="rating" content="adult" />
<meta name="rating" content="RTA-5042-1996-1400-1577-RTA" />
Google supporta sia i meta tag a livello di pagina che le direttive in linea nell’HTML per controllare come verranno visualizzate le pagine del tuo sito nei risultati di ricerca.
I motori di ricerca come Google utilizzano i metadati dei meta tag per comprendere ulteriori informazioni sulla pagina web. Possono utilizzare queste informazioni per scopi di ranking, per interpretare la pagina e per visualizzare frammenti di questi dati nei risultati di ricerca.
I meta tag a livello di pagina, il markup inserito nel tag head, sono un ottimo modo per fornire ai motori di ricerca informazioni sulle pagine web.
E gli altri?
I meta tag possono essere utilizzati per fornire informazioni a tutti i tipi di client e ogni sistema elabora solo i meta tag che comprende e ignora il resto.
Cosa sono le Direttive in linea?
Indipendentemente dai meta-tag a livello di pagina, puoi escludere specifiche parti di una pagina HTML dagli snippet in SERP.
Puoi farlo aggiungendo l’attributo HTML data-nosnippet a uno dei tag HTML supportati: span, div e section.
Esempio:
<p>
Questo testo può essere incluso nello snippet
<span data-nosnippet>e questa parte non verrà mostrata nello snippet in SERP</span>.
</p>Quali sono gli utilizzi?
Meta Description e title influiranno sulla pertinenza delle tue pagine nelle SERP. Andrebbero sempre usati.
Con gli altri tag, inclusi i tag Content type e viewport, puoi aiutare Google a comprendere meglio il tuo tipo di contenuto. I tag Viewport garantiranno che i tuoi contenuti forniscano agli utenti di dispositivi mobili un’esperienza fluida e positiva.
I tag Robots e Hreflang tornano utili quando hai particolari restrizioni per i tuoi contenuti, come i contenuti che non vuoi indicizzare, oppure se i tuoi contenuti sono stati scritti specificamente per le persone in determinati paesi.
La compilazione di questi tag migliora l’esperienza utente e fanno in modo che i tuoi contenuti siano indicizzati in modo appropriato e visualizzati al pubblico giusto.
Per un sito web sarebbe un problema mostrare contenuti nella lingua o nel paese sbagliato, e l’indicizzazione di contenuti duplicati potrebbe ridurre la visibilità organica. Per questi e molti altri motivi è importante conoscere le possibilità offerte dai meta tag.
Tag title e meta description
Ho scritto una guida per copywriter dedicata all’ottimizzazione del tag title, meta description e altri tag HTML, in questa pagina non starò a dilungarmi molto sui concetti già espressi.
Quando gli utenti eseguono una ricerca su Google in risposta ricevono il loro elenco di risultati (SERP), vedranno il titolo del tuo sito (tag title) e una breve descrizione dei tuoi contenuti (meta description). Gli utenti scansionano queste informazioni con gli occhi in cerca del risultato ideale.
Includere la parola chiave principale del contenuto in modo naturale in queste sezioni può aumentare la tua apparente pertinenza nella SERP, aumentando la percentuale di clic – CTR.
Poiché il tag title viene visualizzato anche nella scheda dei browser, quando gli utenti hanno più pagine aperte, questo titolo può aiutare a invogliare l’utente a fare clic di nuovo sui tuoi contenuti e interagire ulteriormente con la tua pagina.
Un documento HTML senza tag title non è un documento valido. Dal punto di vista SEO, il tag title è probabilmente il più importante di tutti i tag, e non è classificato come meta tag. Il tag title ha un impatto reale sul ranking.
<title>100 strumenti di Web Reputation gratuiti e premium</title>Il tag meta description è utile in quanto, molto semplicemente, spiega ai motori di ricerca e (a volte) agli stessi utenti di cosa tratta la tua pagina, sfruttando più caratteri rispetto al tag title.
<meta name="description" content="Problemi di Brand Web Reputation? Monitorare la propria reputazione online è diventato importante per chiunque, con questi Web reputation Tools Gratuiti sarà tutto più facile">È importante notare che il tag meta description non verrà sempre visualizzato nei risultati di una ricerca su Google, dato che Google sceglie spesso un frammento di testo dalla pagina stessa, ma è utile in altri modi.
Google ha affermato che le parole chiave nel tag meta description non influiscono direttamente sul posizionamento. Tuttavia, un tag meta description accattivante potrebbe invogliare gli utenti a fare clic dalla SERP al tuo sito, soprattutto se la descrizione include la sequenza di parole chiave che stavano cercando. E un ottimo CTR in SERP potrebbe indirettamente migliorare i tuoi posizionamenti.
Posso compilare i meta tag con WordPress?
Un sito WordPress senza particolari plugin per la SEO permette di editare solo il tag title. Tramite l’interfaccia classica non possiamo inserire il tag meta description o altri meta tag custom, a meno che non si abbia un tema o un framework che lo permetta.
Per avere piena liberta di modifica di tag title e meta description serve un framework SEO per WordPress, come Genesis, oppure un plugin per la SEO come Yoast, Rank Math o All in one SEO.
Specificare la codifica dei caratteri per il documento HTML
<meta charset="utf-8">Questo elemento specifica al client la codifica dei caratteri del documento, ovvero il set di caratteri che il documento può utilizzare.
utf-8 è un set di caratteri universale che include praticamente qualsiasi carattere di qualsiasi lingua umana. Ciò significa che la tua pagina web sarà in grado di gestire la visualizzazione di qualsiasi lingua e carattere speciale come lettere accentate; è quindi una buona idea impostarlo correttamente in ogni pagina web che crei.
Ad esempio, in una pagina web contenente caratteri italiani e giapponesi, con la codifica dei caratteri impostata su universal, o utf-8, entrambe le lingue vengono visualizzate correttamente. Invece, se si imposta la codifica dei caratteri su ISO-8859-1 potresti avere dei problemi di rendering dei caratteri
Alcuni browser come Chrome risolvono automaticamente le codifiche errate, quindi, a seconda del browser utilizzato, potresti non riscontrare questo problema.
Dovresti comunque impostare una codifica di utf-8 sulla tua pagina per evitare potenziali problemi in altri browser.
Configurazione del viewport
Puoi utilizzare il meta tag viewport per visualizzare correttamente le pagine web sui dispositivi mobili.
Senza un meta tag viewport, i browser per dispositivi mobili visualizzano le pagine web con le larghezze e proporzioni tipiche dello schermo del desktop, quindi le ridimensionano per adattarle allo schermo del dispositivo mobile. Di conseguenza, è necessario zoommare e ingrandire per visualizzare correttamente la pagina nei dispositivi mobili, il che è molto scomodo.
Il meta tag viewport consente di impostare le migliori dimensioni della viewport e i limiti di ridimensionamento per la visualizzazione delle pagine web sui dispositivi mobili.
Una tipica definizione di meta tag viewport avrà il seguente aspetto:
<meta name="viewport" content="width=device-width, initial-scale=1">Altro? Aggiungere favicon ed icone personalizzate al tuo sito
Per arricchire ulteriormente il design del tuo sito, puoi aggiungere riferimenti a icone personalizzate nei tuoi metadati e questi verranno visualizzati in determinati contesti. La più comunemente usata è la favicon (abbreviazione di “icona dei preferiti”, con riferimento al suo utilizzo negli elenchi dei “preferiti” o dei “segnalibri” nei browser).
La favicon esiste da molti anni. È un’icona quadrata di 16×16 pixel utilizzata dal browser in diversi punti. Potresti vedere (a seconda del browser) le favicon visualizzate nella scheda del browser contenente ogni pagina aperta e accanto alle pagine con segnalibri nel pannello dei segnalibri.
Una favicon può essere aggiunta al tuo sito web caricandola nella /root del web server, ovvero la stessa directory della pagina index del sito, salvata in formato .ico, .gif o .png.
Aggiungendo la seguente riga nel blocco del tuo HTML per fare riferimento ad esso:
<link rel="icon" href="favicon.ico" type="image/x-icon">Nota: se il tuo sito utilizza una Content Security Policy (CSP) per migliorare la sua sicurezza, la policy si applica anche alla favicon. Se riscontri problemi con la favicon che non si carica, verifica che la direttiva img-src dell’intestazione Content-Security-Policy non ne impedisca l’accesso.
Articoli correlati
Autore
