I meta tag HTML sono elementi invisibili agli utenti ma fondamentali per il funzionamento del web. Inseriti nella sezione <head> del documento, comunicano informazioni cruciali a browser, motori di ricerca e piattaforme social. Un uso corretto dei meta tag può migliorare significativamente il posizionamento SEO, l’aspetto dei link condivisi sui social media e il comportamento della pagina sui diversi dispositivi. Per una guida completa alla sezione head, consulta il nostro articolo su cos’è l’HTML Head.
Meta Charset e Viewport: I Fondamentali
Il meta tag <meta charset="UTF-8"> specifica la codifica dei caratteri del documento. UTF-8 è la codifica standard per il web moderno e supporta praticamente tutti i caratteri di tutte le lingue del mondo, incluse le lettere accentate dell’italiano, i caratteri cinesi, gli emoji e i simboli matematici. Questo tag deve essere il primo elemento all’interno del <head>, prima del <title> e di qualsiasi altro meta tag, perché il browser deve conoscere la codifica prima di interpretare qualsiasi testo.
Il meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> è essenziale per il responsive design. Senza questo tag, i browser mobili visualizzano la pagina come se fosse un desktop, ridimensionandola per adattarla allo schermo piccolo — risultando in testo illeggibile e necessità di zoom. Il valore width=device-width imposta la larghezza del viewport alla larghezza del dispositivo, e initial-scale=1.0 impedisce lo zoom automatico iniziale.
Evita di aggiungere maximum-scale=1 o user-scalable=no al viewport: questi valori impediscono all’utente di fare zoom sulla pagina, creando un grave problema di accessibilità per le persone con difficoltà visive. Google penalizza anche le pagine che non permettono lo zoom, considerandolo un fattore negativo nella valutazione della user experience mobile.
Meta Description: Il Tuo Biglietto da Visita nei Risultati di Ricerca
La meta description è uno dei meta tag più importanti per il SEO. Si scrive come: <meta name="description" content="Descrizione della pagina">. Questo testo viene spesso visualizzato come snippet (anteprima) nei risultati dei motori di ricerca, sotto il titolo della pagina.
Anche se Google ha dichiarato che la meta description non è un fattore di ranking diretto, la sua importanza è enorme per il CTR (Click-Through Rate). Una meta description ben scritta può fare la differenza tra un utente che clicca sul tuo risultato o su quello del concorrente. Ecco le best practice:
- Lunghezza ideale: tra 140 e 155 caratteri. Google tronca le description più lunghe con “…” nei risultati di ricerca.
- Unica per ogni pagina: ogni pagina deve avere la propria meta description personalizzata. Le description duplicate sono considerate un errore SEO.
- Include la keyword principale in modo naturale. Google evidenzia in grassetto i termini cercati dall’utente che appaiono nella description.
- Call to action: includi un invito all’azione come “Scopri come…”, “Guida completa a…”, “Impara a…”.
- Rifletti il contenuto reale: una description ingannevole aumenta il bounce rate, penalizzando il posizionamento.
Se non specifichi una meta description, Google genererà automaticamente uno snippet estraendo testo dalla pagina. Questo snippet automatico potrebbe non essere ottimale, quindi è sempre preferibile scrivere una description personalizzata.
Meta Robots: Controllare l’Indicizzazione
Il meta tag <meta name="robots" content="..."> comunica ai crawler dei motori di ricerca come devono comportarsi con la pagina. I valori più comuni sono:
index, follow— Indicizza la pagina e segui tutti i link (comportamento predefinito, non è necessario specificarlo)noindex, follow— Non indicizzare la pagina ma segui i link presentiindex, nofollow— Indicizza la pagina ma non seguire i linknoindex, nofollow— Non indicizzare e non seguire i linknoarchive— Impedisce ai motori di ricerca di mostrare la copia cache della paginanosnippet— Non mostrare uno snippet testuale nei risultati di ricercamax-snippet:N— Limita la lunghezza dello snippet a N caratteri
Per indirizzare un crawler specifico, puoi sostituire robots con il nome del bot: <meta name="googlebot" content="noindex"> si applica solo a Google. Il meta robots è complementare al file robots.txt: il robots.txt impedisce il crawling (l’accesso alla pagina), mentre il meta tag robots controlla l’indicizzazione (l’inserimento nell’indice di ricerca).
Open Graph: Ottimizzare la Condivisione su Facebook e LinkedIn
I meta tag Open Graph (OG) controllano come appare il link alla tua pagina quando viene condiviso su Facebook, LinkedIn, WhatsApp e altre piattaforme che supportano il protocollo Open Graph, sviluppato originariamente da Facebook.
I tag Open Graph essenziali sono:
<meta property="og:title" content="Titolo">— Il titolo visualizzato nell’anteprima del link<meta property="og:description" content="Descrizione">— La descrizione nell’anteprima<meta property="og:image" content="URL immagine">— L’immagine dell’anteprima (dimensione consigliata: 1200×630 pixel)<meta property="og:url" content="URL canonico">— L’URL della pagina<meta property="og:type" content="article">— Il tipo di contenuto (article, website, product…)<meta property="og:locale" content="it_IT">— La lingua del contenuto
L’immagine Open Graph è particolarmente importante: un link condiviso con un’immagine attraente riceve significativamente più clic di uno senza immagine o con un’immagine generica. Assicurati che l’immagine sia di alta qualità, pertinente al contenuto e delle dimensioni consigliate per evitare ritagli indesiderati.
Twitter Cards e il Tag Canonical
I Twitter Cards (ora X Cards) funzionano in modo simile agli Open Graph ma con meta tag specifici per la piattaforma X (ex Twitter):
<meta name="twitter:card" content="summary_large_image">— Il tipo di card (summary, summary_large_image, app, player)<meta name="twitter:title" content="Titolo">— Il titolo<meta name="twitter:description" content="Descrizione">— La descrizione<meta name="twitter:image" content="URL immagine">— L’immagine della card
Il tipo summary_large_image è il più utilizzato perché mostra un’immagine grande e prominente sopra il testo, attirando maggiore attenzione nel feed. Se non specifichi i Twitter Cards, la piattaforma utilizzerà i tag Open Graph come fallback.
Il tag <link rel="canonical" href="URL"> merita una menzione speciale, pur non essendo tecnicamente un meta tag. Indica ai motori di ricerca l’URL canonico (preferito) di una pagina. È fondamentale quando lo stesso contenuto è accessibile da URL diversi (con o senza www, con parametri di tracciamento, versione HTTP e HTTPS). Senza il canonical, i motori di ricerca potrebbero considerare queste varianti come contenuti duplicati, disperdendo il valore SEO.
Altri meta tag utili includono <meta name="author" content="Nome"> per specificare l’autore della pagina, e i meta tag http-equiv come <meta http-equiv="refresh" content="5;url=nuova-pagina.html"> per redirect automatici (anche se i redirect server-side sono sempre preferibili).
I meta tag sono un elemento spesso sottovalutato ma cruciale per il successo di un sito web. Una configurazione corretta dei meta tag può migliorare il posizionamento SEO, aumentare il traffico dai social media e garantire una visualizzazione ottimale su tutti i dispositivi. Per approfondire gli aspetti strutturali dell’HTML, leggi anche il nostro articolo sulla struttura di una pagina HTML.
Hai bisogno di aiuto con i meta tag e l’ottimizzazione SEO del tuo sito web? G Tech Group offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a su*****@********up.it o via WhatsApp al 0465 84 62 45.