Meta tag Twitter Card

Twitter (X) ha definito il proprio protocollo per le schede di anteprima prima che esistesse OpenGraph e lo mantiene tuttora. Sebbene Twitter moderno utilizzi come fallback i tag OG quando mancano i tag twitter:*, dichiarare esplicitamente twitter:card offre il layout della scheda più prevedibile.

Esistono quattro tipi di scheda: summary (miniatura piccola accanto a titolo e descrizione), summary_large_image (immagine principale a larghezza intera), app (installazione di un'app mobile) e player (video o audio incorporato). Scelga summary_large_image per gli articoli con molti contenuti.

Se presenti, questi tag sostituiscono og:title e og:description su Twitter. Li utilizzi quando desidera un titolo diverso per il pubblico di Twitter rispetto a quello destinato agli utenti generici di OpenGraph; in caso contrario, lasci che Twitter utilizzi come fallback i valori OG.

Per le schede summary, utilizzi un'immagine quadrata 1:1 di almeno 144x144. Per summary_large_image, utilizzi un'immagine 2:1, idealmente di 1200x600 o superiore. Twitter rifiuta le immagini di oltre 5 MB. Utilizzi un URL assoluto, proprio come per og:image: i percorsi relativi non funzionano.

Testo alternativo per l'immagine della scheda, fino a 420 caratteri. Migliora l'accessibilità per gli utenti di lettori di schermo che navigano su Twitter e fornisce una descrizione alternativa quando le immagini non vengono caricate. Lo fornisca sempre: è un risultato importante per l'inclusività che richiede solo 30 secondi.

twitter:site è l'handle Twitter del sito, incluso il simbolo @. twitter:creator è l'handle dell'autore. Compilando questi valori, Twitter può mostrare "from @yoursite" e collegare l'autore a un account reale.

OpenGraph utilizza property="og:...", mentre Twitter utilizza name="twitter:...". La differenza è storica (RDFa rispetto a HTML5 meta). Entrambi sono tecnicamente validi; utilizzare l'attributo corretto per ciascun protocollo evita problemi con i validator più rigorosi.

twitter:card="app" consente di promuovere un'app iOS/Android con twitter:app:id:iphone, twitter:app:id:ipad, twitter:app:id:googleplay e i deep link twitter:app:url:*. Toccando la scheda si apre l'App Store/Play Store oppure direttamente l'app, se installata.

twitter:card="player" incorpora un player video o audio direttamente nel tweet. Richiede twitter:player (URL di un iframe HTTPS), twitter:player:width e twitter:player:height. Twitter approva manualmente le schede player per prevenire abusi: la richiesta va inviata tramite developer.twitter.com.

Twitter ha disattivato l'interfaccia pubblica di Card Validator, ma le schede vengono ancora visualizzate in anteprima in una bozza di tweet. Incolli l'URL in una bozza privata per vedere esattamente quale tipo di scheda e quale immagine verranno visualizzati prima di pubblicare il tweet.

Includa sempre sia twitter:card sia l'insieme completo di tag OG. La maggior parte delle piattaforme diverse da Twitter ignora i tag twitter:*, mentre la maggior parte dei client Twitter moderni utilizza come fallback i tag OG; la combinazione produce quindi un'anteprima corretta ovunque con una duplicazione minima.

Se twitter:title è assente ma og:title è presente, che cosa appare nella scheda Twitter?

Le schede Twitter (dichiarate tramite name="twitter:card") offrono alle pagine un'anteprima prevedibile su X. Scelga summary_large_image per i contenuti editoriali, aggiunga twitter:image con un URL assoluto e twitter:image:alt, attribuisca il sito e l'autore tramite gli handle e lasci che i valori OG completino i tag che non sovrascrive.