Quando condividi un link su X (precedentemente Twitter), la piattaforma cerca di generare un'anteprima, chiamata Twitter Card. Senza i meta-tag corretti, il tuo link appare come un URL semplice. Tuttavia, con le Twitter Cards configurate correttamente, X recupera un titolo, una descrizione e un'immagine, trasformando il tuo link condiviso in un teaser visivo su cui è molto più probabile che le persone clicchino.
Cosa viene visualizzato esattamente?
Una Twitter Card non è qualcosa che carichi o progetti. Viene generata automaticamente da X in base ai meta-tag nell'HTML della pagina collegata. Quando qualcuno incolla il tuo URL in un tweet, il crawler di X visita la pagina, legge i meta-tag e assembla l'anteprima. Se i tag sono mancanti o configurati in modo errato, l'anteprima è incompleta o assente del tutto.
I due tipi principali di card
X supporta più tipi di card, ma in pratica ne incontrerai solo due:
- Summary Card — Un'anteprima compatta con una piccola thumbnail sulla sinistra e il titolo e la descrizione sulla destra. Questo è ciò che la maggior parte dei post di blog, articoli e pagine di documentazione utilizzano. La thumbnail è quadrata, tipicamente almeno 144×144 pixel.
- Summary Card with Large Image — L'immagine occupa l'intera larghezza sopra il testo. Funziona bene per landing page, pagine di prodotto, pezzi di portfolio o qualsiasi pagina in cui l'elemento visivo è il principale attrattore. L'immagine deve essere di almeno 300×157 pixel, idealmente 1200×628 per una visualizzazione nitida su schermi ad alta risoluzione.
C'erano anche altri tipi (Player Card per audio/video, App Card per app mobili), ma la maggior parte dei siti non ne avrà mai bisogno.
I meta-tag di cui hai bisogno
Inseriscili nella sezione <head> della tua pagina:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Il titolo della tua pagina" />
<meta name="twitter:description" content="Una breve descrizione della tua pagina." />
<meta name="twitter:image" content="https://example.com/image.jpg" />
<meta name="twitter:site" content="@IlTuoHandle" />Il tag twitter:card controlla il layout. Il tag twitter:site è opzionale ma aggiunge il tuo handle come attribuzione sotto la card.
Il fallback Open Graph
Ecco qualcosa che molti proprietari di siti non si rendono conto: X ricade sui tag Open Graph (quelli utilizzati da Facebook, LinkedIn e WhatsApp) se i tag specifici di Twitter sono mancanti. Quindi se hai già impostato og:title, og:description e og:image, il tuo link mostrerà comunque un'anteprima su X, solo senza il controllo esplicito che ti danno i tag Twitter Card.
In pratica, questo significa che un plugin SEO ben configurato come Yoast o Rank Math spesso si occupa automaticamente delle basi. Ma fare affidamento sul fallback ha degli svantaggi: le dimensioni dell'immagine potrebbero non essere ideali per il layout di X e la descrizione potrebbe essere troncata diversamente. Per il risultato più pulito, configura entrambi i set di tag.
Problemi comuni nella pratica
Anche se i tag sono presenti, qualcosa può comunque andare storto:
- Problemi di caching — X memorizza nella cache le anteprime delle card in modo aggressivo. Se ripari un'immagine rotta o aggiorni un titolo, la vecchia anteprima può rimanere per giorni. Puoi forzare un aggiornamento con lo strumento Card Validator di X.
- Immagine troppo piccola — Se la tua immagine è sotto la dimensione minima, X può ignorarla completamente e non mostrare alcuna immagine di anteprima.
- URL relativi — Il valore di
twitter:imagedeve essere un URL assoluto. I percorsi relativi come/images/header.jpgnon funzioneranno. - Robots bloccano il crawler — Se il tuo
robots.txtblocca Twitterbot, X non può leggere i tuoi meta-tag e non verrà generata alcuna card.
Come WordPress gestisce le Twitter Cards
WordPress stesso non produce meta-tag Twitter Card per impostazione predefinita. Hai bisogno di un plugin SEO (Yoast SEO, Rank Math, The SEO Framework) o di un plugin di social media dedicato per generarli. La maggior parte di questi plugin ti permette di impostare un tipo di card predefinito a livello di sito e sovrascrivere l'immagine e la descrizione per post o pagina.
Se utilizzi WooCommerce, controlla le tue pagine di prodotto separatamente — a volte hanno bisogno di una configurazione aggiuntiva perché l'immagine e la descrizione del prodotto devono essere recuperate dai dati del prodotto, non dai campi generici della pagina.
Come aiuta InspectWP
InspectWP legge i meta-tag sul tuo sito WordPress e ti mostra esattamente quali tag Twitter Card sono presenti — o mancanti. Il report mostra il tipo di card rilevato, il titolo, la descrizione, l'URL dell'immagine e l'handle del sito, in modo da poter verificare che l'anteprima appaia come desideri prima di condividere il tuo contenuto.