Meta tag e anteprime social: cosa viene mostrato

Un link al vostro sito web rappresenta spesso il primo contatto che un potenziale cliente ha con voi — nei risultati di ricerca, in un canale Slack o in un messaggio WhatsApp scambiato tra colleghi. L'aspetto con cui il link viene visualizzato è regolato da circa sei righe di codice HTML che la maggior parte dei siti compila in modo parzialmente errato.

La confusione nasce dal fatto che ogni piattaforma legge un insieme differente di tag, in ordine diverso e con regole di fallback distinte. Ecco perché una pagina può apparire impeccabile su Facebook e mostrare solo un logo rimpicciolito su un riquadro grigio su LinkedIn.

Ecco cosa legge effettivamente ciascuna piattaforma.

Google

Google utilizza i tag <title> e <meta name="description"> — per poi ignorarli frequentemente.

Gli studi evidenziano costantemente che Google riscrive i titoli per circa un terzo dei risultati e le descrizioni per oltre la metà, estraendo direttamente dal testo della pagina frasi che corrispondono meglio alla specifica query dell'utente. Non si tratta di un errore e non esiste alcun meta tag in grado di impedirlo.

Ciò non significa che non siano importanti. Google rispetta il titolo e la descrizione originali soprattutto per le query di brand e navigazionali — quando qualcuno cerca direttamente il nome della vostra azienda ed è già vicino alla conversione. Sono proprio i risultati in cui il controllo del messaggio è più rilevante.

Limiti pratici:

• I titoli vengono troncati a circa 580 pixel, corrispondenti a circa 55–60 caratteri. Inserite le parole chiave distintive all'inizio; inserire "Live Ajans" alla fine del titolo funziona bene, metterlo all'inizio spreca spazio prezioso su ogni pagina.
• Le descrizioni si estendono fino a circa 155–160 caratteri su desktop e meno su dispositivi mobili.
• Un solo <title> per pagina, e dovrebbe differire dall'H1. Il titolo si rivolge ai risultati di ricerca; l'H1 si rivolge all'utente già approdato sulla pagina.

Facebook, LinkedIn, WhatsApp, Slack, Discord, Signal

Tutte queste piattaforme leggono i protocolli Open Graph:

<meta property="og:title"       content="…" />
<meta property="og:description" content="…" />
<meta property="og:image"       content="https://example.com/share.jpg" />
<meta property="og:url"         content="https://example.com/page/" />
<meta property="og:type"        content="website" />
<meta property="og:site_name"   content="Example" />

Notate l'uso di property=, non di name=. Scrivere name="og:title" è un comune errore di copia-incolla che fa sì che molti crawler ignorino del tutto il tag.

Se og:image è assente, ciascuna piattaforma effettua lo scraping della pagina cercando la prima immagine disponibile. Il risultato sarà un logo sgranato, un'icona di interfaccia o un segnaposto grigio — mai l'immagine ottimale che avreste scelto.

Regole fondamentali per le immagini:

• 1200×630 pixel è la dimensione ideale. Rispetta le proporzioni richieste da ogni piattaforma.
• Dimensioni inferiori a 200×200 pixel vengono completamente ignorate da Facebook.
• Utilizzate sempre un URL assoluto. I percorsi relativi falliscono.
• Mantenete il file sotto i 5 MB, idealmente sotto 1 MB — molti crawler vanno in timeout con file pesanti.
• Le immagini verticali vengono ritagliate al centro, ed è così che spesso ci si ritrova con volti tagliati a metà nelle anteprime.

og:type dovrebbe essere impostato su article per gli articoli del blog e su website per tutte le altre pagine. Il valore article abilita tag aggiuntivi come article:published_time e article:author, mostrati da alcune piattaforme.

X (Twitter)

X controlla innanzitutto i propri tag proprietari, per poi utilizzare Open Graph come fallback:

<meta name="twitter:card"        content="summary_large_image" />
<meta name="twitter:title"       content="…" />
<meta name="twitter:description" content="…" />
<meta name="twitter:image"       content="https://example.com/share.jpg" />

Notate che qui si usa name=, non property=. X adotta la convenzione opposta a Open Graph, creando frequente confusione.

Il tag più importante è twitter:card. Senza di esso viene visualizzata solo una piccola miniatura quadrata, a prescindere dalla qualità dell'immagine. Con summary_large_image si ottiene la scheda a larghezza intera, che genera molti più clic. Se dovete aggiungere una sola riga, scegliete questa.

Tutti gli altri valori utilizzano correttamente Open Graph come fallback, quindi non occorre duplicare titolo e descrizione a meno che non desideriate un testo formulato diversamente per X.

L'ostacolo principale: il caching

Ogni piattaforma applica una memorizzazione nella cache molto aggressiva per i dati Open Graph, e correggere il tag sul server non aggiorna i link già condivisi.

• Facebook memorizza i dati nella cache per circa 30 giorni. È necessario forzare l'aggiornamento tramite il tool Sharing Debugger.
• LinkedIn memorizza i dati per circa 7 giorni e non ripete lo scraping automaticamente. Occorre utilizzare il Post Inspector.
• X memorizza la cache per URL; aggiungere un parametro fittizio alla query string è spesso la soluzione più rapida.
• WhatsApp conserva la cache molto a lungo e non offre alcuno strumento pubblico per svuotarla.

La regola fondamentale: verificate prima della pubblicazione, non dopo che qualcuno vi segnala un'anteprima errata. A quel punto la versione difettosa è già memorizzata nella cache su più piattaforme.

Potete verificare qualsiasi URL su tutte le piattaforme simultaneamente con il nostro free meta tag and social preview checker — analizza il codice HTML reale e simula la scheda di ciascun social esattamente come verrà renderizzata.

Esempio di sezione head completa e corretta

<title>Lavorazioni meccaniche CNC di precisione a Stoccarda — Acme Manufacturing</title>
<meta name="description" content="Fresatura CNC a 5 assi con tolleranza ±0,005mm per automotive e aerospazio. Lotti da 500 pezzi. Certificata IATF 16949. Preventivi in 48 ore." />
<link rel="canonical" href="https://example.com/services/cnc-milling/" />

<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/services/cnc-milling/" />
<meta property="og:title" content="Lavorazioni meccaniche CNC di precisione a Stoccarda" />
<meta property="og:description" content="Fresatura a 5 assi con tolleranza ±0,005mm. Lotti da 500 pezzi. Certificata IATF 16949." />
<meta property="og:image" content="https://example.com/img/cnc-share.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Acme Manufacturing" />

<meta name="twitter:card" content="summary_large_image" />

Due dettagli importanti da evidenziare nel testo.

Primo, la descrizione contiene dati numerici precisi — una tolleranza, un volume minimo d'ordine, una certificazione, tempi di risposta. Rispetto a frasi vaghe come "offriamo soluzioni meccaniche di altissima qualità", i dati concreti possono essere estratti e citati anche dai motori di risposta AI.

Secondo, il titolo Open Graph è più breve rispetto al tag title principale della pagina. I risultati dei motori di ricerca hanno spazio per indicare sede e marchio; una scheda social non ne ha bisogno, poiché il brand e il dominio compaiono già subito sotto.

Siti web multilingue

Se il vostro sito supporta più lingue, og:locale e og:locale:alternate indicano alle piattaforme quale versione linguistica stanno analizzando:

<meta property="og:locale" content="it_IT" />
<meta property="og:locale:alternate" content="en_US" />

Inoltre, ciascuna versione linguistica necessita del proprio titolo tradotto, della propria descrizione e — se l'immagine contiene testo grafico — di un'immagine dedicata nella lingua corretta.

Checklist di verifica

1. Ogni pagina possiede un titolo e una descrizione univoci? I duplicati sono frequenti negli e-commerce e negli archivi impaginati e rappresentano il problema più penalizzante.
2. og:image è presente, con URL assoluto e risoluzione minima di 1200×630?
3. twitter:card è impostato su summary_large_image?
4. I tag Open Graph usano property= e i tag Twitter usano name=?
5. Le anteprime vengono renderizzate correttamente? Effettuate sempre la verifica prima della distribuzione ufficiale.

Nessuno di questi passaggi è complesso, eppure trascurarli significa degradare la prima impressione che gli utenti ricevono del vostro marchio.

Apri strumento Meta Tag e Anteprima Social Visualizzate l'aspetto esatto della vostra pagina su Google e sulle principali piattaforme social direttamente dal vostro HTML attivo. →