Twitter Card meta tags
Twitter Card è il sistema con cui Twitter, oggi noto come X, genera anteprime ricche quando un link viene condiviso. Tramite specifici meta tag nel tag <head>, puoi controllare titolo, descrizione, immagine e tipo di card mostrata. Una configurazione corretta aumenta visibilità, click e interazioni con i post, oltre a rafforzare la coerenza visiva del brand sulla piattaforma.
Tipi di Twitter Card
Esistono quattro tipi principali: summary (anteprima compatta con immagine quadrata), summary_large_image (immagine grande orizzontale), app (per promuovere applicazioni mobili) e player (per video o audio embeddati). Il più comune per blog e siti aziendali è summary_large_image, che massimizza l'impatto visivo nel feed e attira più click rispetto al formato compatto.
Differenza con Open Graph
Twitter Card e Open Graph sono protocolli distinti ma complementari. Twitter ricade su Open Graph quando mancano i tag specifici, però per il controllo completo conviene configurarli entrambi. I tag Twitter usano l'attributo name (non property come OG) e iniziano con il prefisso twitter:* per essere identificati correttamente dal crawler della piattaforma.
Card di tipo player e app
La card player permette di embeddare video o audio direttamente nel tweet, con riproduzione inline. Richiede twitter:player (URL iframe HTTPS), twitter:player:width e twitter:player:height. È riservata a publisher approvati da Twitter, perché soggetta a moderazione preventiva. La card app promuove applicazioni mobili: include twitter:app:name, twitter:app:id, twitter:app:url per iPhone, iPad e Google Play. Cliccare la card apre direttamente l'app o invia all'app store per il download su dispositivo dell'utente.
Best practice di immagine
Le immagini per Twitter Card devono essere pubblicamente accessibili (no auth o paywall), sotto i 5MB, in formato JPG, PNG, WebP o GIF (non animata). Le proporzioni 2:1 minimizzano il crop. Evita testo importante vicino ai bordi perché può essere tagliato in alcune anteprime. Per accessibility aggiungi sempre twitter:image:alt con descrizione concisa. Una buona immagine può raddoppiare il click-through rate rispetto a una scelta improvvisata, rappresenta un'investimento di pochi minuti con ROI ottimo.
Card Validator e debugging
Twitter's Card Validator (cards-dev.twitter.com/validator) permette di testare le card prima di pubblicare. Ti mostra l'anteprima esattamente come apparirà nel feed, evidenzia errori sintattici e tag mancanti, fa refresh della cache dopo modifiche. Strumento gratuito disponibile dopo login Twitter, utilizzato dai sviluppatori per verificare card di tipo player che richiedono approvazione preventiva. Per debugging tecnico fai una richiesta HEAD all'URL controllo che server risponda 200, con Content-Type text/html e nessun blocco di Twitterbot via robots.txt o firewall WAF aziendale che blocca crawler.
Card per blog e news
Per articoli giornalistici la combinazione tipica è summary_large_image con immagine featured, titolo dell'articolo, sommario, account Twitter del giornale e dell'autore (via twitter:creator). Aggiungi anche meta tag Open Graph per copertura più ampia su altre piattaforme. Per sezioni come homepage o categorie, la card può puntare al brand piuttosto che al singolo contenuto. Strategia editoriale: scegli con cura l'immagine cover (oltre il 60% del successo della card dipende dalla qualità grafica), testo conciso ma intrigante, call-to-action implicita.
Twitter Card e API
Per pubblicazione programmatica via Twitter API v2, le card vengono generate automaticamente quando includi un'URL nel tweet, basandosi sui meta tag della pagina linkata. Questo significa che la qualità della card dipende esclusivamente dalla configurazione del sito di destinazione. Per pubblicazioni bulk via tool come Buffer, Hootsuite o IFTTT, verifica che ogni URL abbia card correttamente configurate prima dello schedule. Per analytics sulle card vai su Twitter Ads (richiede account business) per vedere impression, engagement e click rate. Strumento Buffer integra preview Twitter Card direttamente nell'editor di composizione del post per workflow editoriale efficiente.
Procedura passo-passo
- Inserisci <meta name="twitter:card" content="summary_large_image"> nel head.
- Aggiungi <meta name="twitter:site" content="@tuoaccount"> con l'handle del sito.
- Specifica <meta name="twitter:title" content="Titolo della pagina"> (max 70 caratteri).
- Inserisci <meta name="twitter:description" content="Descrizione..."> (max 200 caratteri).
- Imposta <meta name="twitter:image" content="https://esempio.it/img.jpg"> con URL assoluto.
- Aggiungi <meta name="twitter:image:alt" content="Descrizione alternativa"> per l'accessibilità.
- Convalida il risultato con il Card Validator di Twitter (cards-dev.twitter.com).
Errori comuni e come risolverli
- Card type errato: usare summary quando vuoi un'immagine grande riduce l'impatto visivo; scegli summary_large_image per il massimo risalto.
- Immagine troppo leggera: Twitter richiede almeno 300x157 px per summary_large_image; usa risoluzioni elevate come 1200x630.
- Handle mancante: senza twitter:site la card mostra meno informazioni; aggiungi sempre l'account.
- Mancanza di alt text: penalizza l'accessibilità; inserisci twitter:image:alt descrittivo.
- Cache non aggiornata: usa il Card Validator per forzare il refresh dopo le modifiche.
Domande frequenti
D: Devo configurare entrambi Open Graph e Twitter Card?
R: Sì, sono protocolli diversi. Twitter ricade su Open Graph se mancano i suoi tag, ma per il controllo completo usali entrambi.
D: Quale dimensione immagine è ottimale?
R: Per summary_large_image, 1200x628 px (rapporto 1.91:1) è lo standard più condiviso.
D: Twitter Card funziona ancora su X?
R: Sì, la piattaforma supporta tuttora il protocollo originale.
D: Posso usare GIF o video?
R: Con la card di tipo player puoi includere contenuti multimediali, ma richiede approvazione e markup specifico.
Hai bisogno di aiuto?
Se vuoi sviluppo web con il team di G Tech Group, scrivici tramite il modulo di contatto.