Test anteprima link

Q: X ha ancora bisogno dei tag twitter:?

Solo di uno. X legge og:title , og:description e og:image quando mancano le versioni twitter: . Aggiungi twitter:card con il valore summary_large_image per avere l’immagine larga.

Incolla un link in una chat e diventa una card con un’immagine, un titolo e una riga di testo. Oppure un triste riquadro grigio. Questo controllo legge i tag che alimentano la card, misura l’immagine e disegna il risultato per sei piattaforme.

Cosa succede quando incolli un link

Nel momento in cui incolli un indirizzo in un post o in una chat, un server di quel servizio richiede la pagina. Non la mostra. Legge la prima parte dell’HTML, cerca una manciata di tag <meta>, scarica l’immagine indicata da uno di essi e costruisce una card con questi pezzi. Poi salva la card, e chiunque veda il link riceve la versione salvata.

I tag seguono una convenzione chiamata Open Graph, introdotta da Facebook nel 2010 e oggi letta da quasi tutti i social network e le app di messaggistica. Ognuno comincia con og:. X legge gli stessi tag e ne aggiunge uno suo, twitter:card, per scegliere l’impaginazione.

I tag, in ordine di effetto

og:image: L’immagine. Più di ogni altra cosa, è lei a decidere se il link viene notato. L’indirizzo deve essere assoluto e cominciare con https://.
og:title: Il titolo della card. Senza, i servizi ripiegano sul tag <title>, che spesso finisce con un nome del sito che non volevi ripetuto.
og:description: Una o due frasi sotto il titolo. Il ripiego è la meta description e, dopo, un passaggio scelto dal servizio al posto tuo.
twitter:card: Impostalo su summary_large_image e X mostra l’immagine a tutta larghezza. Senza, ottieni un quadratino accanto al testo.
og:url: L’indirizzo sotto cui vengono contati like e condivisioni. Dovrebbe essere uguale all’URL canonico della pagina.
og:site_name, og:type, og:locale, og:image:alt: Dettagli di contorno: l’etichetta sopra il titolo in Slack e Discord, il tipo di contenuto, la lingua e una descrizione dell’immagine per chi usa uno screen reader.

Come viene giudicata l’immagine

Il nostro server scarica il file indicato in og:image (o in twitter:image quando è l’unico) e lo misura rispetto a queste soglie.

Misura	Risultato
Nessun `og:image`	Problema. Se esiste solo `twitter:image`, diventa un avviso, perché X ha un’immagine e gli altri no.
Il file non si può scaricare, non è un’immagine o supera i 5 MB	Problema
Più piccola di 600 × 315 px	Problema. Facebook e LinkedIn la riducono a miniatura o la scartano
Più piccola di 1200 × 630 px	Avviso. Viene mostrata, ma sfocata sugli schermi ad alta densità
Larghezza divisa per altezza sotto 1,6 o sopra 2,2	Avviso. Le card sono circa 1,91 a 1, quindi i bordi vengono tagliati
Più pesante di 1 MB	Avviso. Alcuni sistemi di anteprima smettono di aspettare
Indirizzo relativo come `/img/share.jpg`	Avviso. Diversi servizi hanno bisogno dell’URL completo

Se vuoi una ricetta che funzioni ovunque, prepara un JPEG o un WebP da 1200 × 630 pixel, sotto i 300 KB, e tieni le scritte lontane dai bordi. Il controllo segnala anche un titolo o una descrizione mancanti, un <title> più lungo di 60 caratteri, una descrizione oltre i 200 e un og:url che non corrisponde al link canonico.

Le sei card disegnate nei risultati sono ricostruzioni fatte a partire dai tuoi tag. Il tuo browser carica l’immagine dal nostro server, in una copia ridotta, quindi il sito testato non vede mai la tua visita.

Aggiungere i tag e aggiornare le vecchie card

I risultati finiscono con un blocco compilato in base a quello che abbiamo trovato. Va messo dentro <head>:

<meta property="og:title" content="How we made our builds twice as fast">
<meta property="og:description" content="Three changes to our pipeline, with the numbers before and after.">
<meta property="og:image" content="https://www.example.com/img/build-time-card.jpg">
<meta property="og:url" content="https://www.example.com/blog/build-time/">
<meta name="twitter:card" content="summary_large_image">

Attenzione all’attributo. I tag Open Graph usano property= e il tag di X usa name=. Su un CMS raramente scrivi tutto questo a mano. I plugin SEO di WordPress, i temi Shopify, Squarespace e Webflow hanno tutti un campo «immagine social» per ogni pagina e un valore predefinito per tutto il sito.

Correggere i tag non cambia le card che esistono già. Ogni servizio tiene la sua copia salvata per giorni o settimane. Puoi chiedere un nuovo recupero con il Sharing Debugger di Facebook o il Post Inspector di LinkedIn. Nelle app di chat, aggiungere al link un parametro in più come ?v=2 lo fa contare come un nuovo indirizzo.

Due limiti da tenere a mente. Le impaginazioni cambiano, quindi i disegni mostrano quali pezzi compaiono, non i pixel esatti. E il controllo legge l’HTML senza eseguire script, che è anche il modo in cui lavorano i sistemi di anteprima. I tag inseriti da JavaScript qui mancheranno, e mancheranno anche sui social.

Domande frequenti

Che dimensioni deve avere un’og:image?

1200 × 630 pixel, un rapporto di 1,91 a 1, in JPEG, PNG o WebP. Tienila sotto i 300 KB se puoi e sotto 1 MB in ogni caso. Sotto 600 × 315, Facebook e LinkedIn smettono di mostrarla come card grande.

Perché il mio link mostra una vecchia immagine dopo che l’ho cambiata?

Il servizio ha messo in cache la card la prima volta che il link è stato condiviso. Passa l’indirizzo nel Sharing Debugger di Facebook e premi «Scrape Again», oppure nel Post Inspector di LinkedIn. WhatsApp, iMessage e Slack non hanno uno strumento simile, quindi cambia leggermente l’URL per forzare una nuova card.

X ha ancora bisogno dei tag twitter:?

Solo di uno. X legge og:title, og:description e og:image quando mancano le versioni twitter:. Aggiungi twitter:card con il valore summary_large_image per avere l’immagine larga.

Perché non compare nessuna anteprima quando incollo il mio link?

Di solito è una pagina che ha bisogno di JavaScript per produrre i suoi tag, un server o un firewall che respinge i bot di anteprima, un muro di login o un indirizzo og:image che restituisce un errore. Questo controllo segnala l’errore dell’immagine quando c’è.

I tag Open Graph aiutano il posizionamento nei motori di ricerca?

No. I motori di ricerca costruiscono i loro snippet a partire dal tag title e dalla meta description. I tag Open Graph decidono solo l’aspetto del link dove le persone lo condividono, e questo influisce su quante di loro ci cliccano.