Aggiungi i tag Twitter / X Card - Docs di MetricSpot

Cosa controlla questo check

Scansiona il <head> della pagina cercando <meta name="twitter:card" content="…"> e (dove applicabile) twitter:image, twitter:title, twitter:description e twitter:site. Il check fallisce quando non è presente alcun twitter:card e X deve ripiegare su un tipo di anteprima più piccolo — o su nessuna anteprima.

Perché è importante

X (ex Twitter) rende gli URL postati in uno di tre formati di anteprima:

summary_large_image — una card a piena larghezza con immagine, titolo e descrizione sotto. Il formato ad alta conversione che ogni brand vuole.
summary — una piccola card con thumbnail. Il default se non è impostato twitter:card ma sono presenti i tag Open Graph.
Nessuna card — un URL nudo, senza anteprima. Quello che succede quando non ci sono né tag OG né Twitter.

Una card summary_large_image ottiene tassi di condivisione e click significativamente migliori rispetto a una summary; entrambe stracciano un URL nudo. La differenza è un meta tag.

Come risolvere

Metti quattro meta tag in <head>. Tre possono rispecchiare i tuoi tag Open Graph — X cade sui valori OG se mancano gli equivalenti Twitter, ma tag Twitter espliciti ti permettono di impostare un’immagine diversa per X se vuoi:

<head>
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@metricspot">
  <meta name="twitter:title" content="Free SEO audit in 60 seconds — MetricSpot">
  <meta name="twitter:description" content="See what AI agents and Google see on your site. 91 checks, no signup.">
  <meta name="twitter:image" content="https://metricspot.com/og/home.png">
</head>

Il minimo indispensabile è twitter:card. Se la tua pagina ha già i tag Open Graph principali, X legge da quelli titolo/descrizione/immagine. Il singolo tag twitter:card è ciò che dice a X di renderizzare il layout con immagine grande invece della piccola thumbnail.

Regole per l’immagine (le stesse delle regole per l’immagine OG):

1200×630 (2:1) o più larga — minimo 300×157, massimo 5 MB.
PNG o JPG. WEBP funziona sulla maggior parte delle piattaforme, ma il renderer di X è stato incoerente — attieniti a PNG/JPG.
Vedi la pagina dedicata Immagine Open Graph per dettagli su dimensioni e generazione dinamica.

Astro / Next.js — genera dal frontmatter accanto agli OG:

---
const { title, description, ogImage, twitterHandle = "@metricspot" } = Astro.props;
---
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content={twitterHandle} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={new URL(ogImage, Astro.site).href} />

WordPress — Yoast SEO, Rank Math e SEOPress emettono tutti automaticamente i tag Twitter Card. In Yoast: SEO → Social → Twitter → “Aggiungi metadati Twitter card” → On.

Tipi di card da conoscere.

summary_large_image — quello che vuoi nel 95% dei casi.
summary — piccola thumbnail + testo. Utile per post molto testuali dove l’immagine non è il punto.
player — player video/audio embeddato. Di nicchia; richiede whitelist da parte di X.
app — promuovi l’installazione di un’app mobile. Usa i campi App Store ID.

Il vecchio Card Validator è stato deprecato nel 2023. Per verificare, posta l’URL in una bozza (non pubblicare) e X mostrerà la card renderizzata — oppure usa un tool di terze parti come opengraph.xyz che mostra anteprime sia Twitter sia OG.

Domande frequenti

Servono sia i tag Open Graph sia i Twitter Card?

X cade su Open Graph se non ci sono tag Twitter, quindi solo OG ti dà una card — ma solo una piccola card. Per forzare il layout con immagine grande serve almeno <meta name="twitter:card" content="summary_large_image">. Tutto il resto può cadere su OG.

La mia anteprima della card è rotta — come la aggiorno?

X cachea gli scrape di anteprima fino a 7 giorni. La cache si invalida quando cambi l’URL canonico o quando l’entry cachata scade. Non c’è più un tool pubblico di “refresh” — l’aggiramento è aggiungere un parametro di query cache-busting (?v=2) all’URL una volta, postare l’URL bustato una volta, poi tornare all’URL pulito.

E Mastodon, Bluesky, LinkedIn?

Usano tutti Open Graph, non Twitter Card. Imposta bene gli OG e si renderizzeranno correttamente da soli. Vedi Tag Open Graph principali e Immagine Open Graph.