Quando qualcuno condivide la tua pagina WordPress su X (precedentemente Twitter), la piattaforma cerca i meta tag Twitter Card per generare un'anteprima ricca con un'immagine, un titolo e una descrizione. Senza questi tag, i link condivisi appaiono come semplici URL di testo, riducendo significativamente la percentuale di clic e l'engagement complessivo. Le Twitter Card sono uno dei modi più semplici per far risaltare i tuoi contenuti nei feed social e richiedono solo pochi minuti per essere impostate.
Comprendere i tipi di Twitter Card e il loro impatto
Prima di immergerti nell'implementazione, aiuta capire quali tipi di Twitter Card esistono e quando usare ciascuno:
- Summary Card: Mostra una piccola thumbnail quadrata accanto al titolo e alla descrizione. Funziona bene per homepage, pagine di categoria e contenuti dove l'immagine è secondaria rispetto al testo.
- Summary Card with Large Image: Mostra un'immagine grande e prominente sopra il titolo e la descrizione. Questa è la scelta migliore per articoli del blog, articoli, pagine di prodotto e qualsiasi contenuto in cui un'anteprima visiva aumenta l'engagement.
- Player Card: Incorpora un player video o audio direttamente nel tweet. Richiede l'approvazione di X ed è utilizzato da piattaforme media come YouTube o SoundCloud.
- App Card: Progettata per la promozione di app mobili con un link di download diretto. Richiede anch'essa l'approvazione di X.
Per la maggior parte dei siti WordPress, la Summary Card with Large Image è la migliore scelta predefinita. Gli studi mostrano costantemente che i tweet con card di grandi immagini generano 2-3 volte più engagement rispetto ai tweet di solo testo. L'elemento visivo attira l'attenzione mentre gli utenti scorrono il loro feed, rendendoli più propensi a fermarsi e cliccare.
Meta tag Twitter Card richiesti spiegati
Ogni Twitter Card richiede un set specifico di meta tag nella sezione <head> della tua pagina. Ecco cosa fa ogni tag:
twitter:card: Definisce il tipo di card. Impostalo susummaryosummary_large_image.twitter:title: Il titolo visualizzato nella card. Mantienilo sotto i 70 caratteri per evitare il troncamento.twitter:description: Un breve riassunto del contenuto. Mantienilo sotto i 200 caratteri. Questo testo appare sotto il titolo nell'anteprima della card.twitter:image: L'URL dell'immagine visualizzata nella card. Per le card summary_large_image, usa immagini di almeno 1200 x 628 pixel. Per le card summary, le immagini devono essere di almeno 144 x 144 pixel. La dimensione massima del file è di 5 MB.twitter:image:alt: Testo alternativo per l'immagine, importante per l'accessibilità. Descrivi il contenuto dell'immagine in meno di 420 caratteri.twitter:site: L'handle X del tuo sito web (ad es.@TuoSito). Opzionale, ma aiuta con l'attribuzione.twitter:creator: L'handle X dell'autore. Utile per blog con più autori.
X supporta anche un meccanismo di fallback. Se mancano i tag Twitter Card, la piattaforma tenta di utilizzare invece i tag Open Graph (og:title, og:description, og:image). Questo significa che se hai già impostato i tag Open Graph, i tuoi link ottengono anteprime di base, anche senza tag Twitter Card specifici. Tuttavia, aggiungere tag Twitter Card espliciti ti dà più controllo su come i tuoi contenuti appaiono specificamente su X.
Aggiungere Twitter Card con Yoast SEO
Yoast SEO è il plugin SEO più popolare per WordPress e include il supporto integrato per le Twitter Card. Se usi già Yoast, abilitare le Twitter Card richiede solo pochi clic:
- Vai a SEO > Social nel tuo pannello di amministrazione WordPress.
- Clicca sulla scheda X (Twitter).
- Abilita "Aggiungi metadati Twitter Card".
- Seleziona il tipo di card predefinito. Scegli Summary with large image per la maggior parte dei siti.
- Salva le tue modifiche.
Da questo momento in poi, Yoast genera automaticamente tag Twitter Card per ogni articolo e pagina del tuo sito, prendendo il titolo, la descrizione e l'immagine in evidenza dal tuo contenuto.
Per personalizzare la Twitter Card per un articolo specifico, apri l'editor degli articoli e scorri fino alla metabox Yoast. Clicca sulla scheda Social (icona di condivisione) e poi seleziona la scheda X. Qui puoi sovrascrivere il titolo, la descrizione e l'immagine predefiniti per quella pagina specifica. Questo è utile quando vuoi che l'anteprima sui social media differisca dal titolo SEO sulla pagina, ad esempio utilizzando un titolo più accattivante per la condivisione social.
Aggiungere Twitter Card con Rank Math
Rank Math è un altro popolare plugin SEO con un'ampia integrazione con i social media:
- Vai a Rank Math > Titoli & Meta > Meta globali.
- Scorri fino alla sezione Meta social.
- Attiva il Tipo Twitter Card e scegli il formato di card preferito.
- Inserisci facoltativamente il tuo nome utente X predefinito nei campi Twitter.
- Salva le tue modifiche.
Per la personalizzazione per articolo, apri qualsiasi articolo o pagina nell'editor. Clicca sull'icona Rank Math nella barra degli strumenti superiore, poi naviga alla scheda Social. Passa alla sezione X per impostare titoli, descrizioni e immagini personalizzati per quel pezzo di contenuto specifico.
Rank Math ti consente anche di impostare immagini social diverse per articolo, il che è utile quando la tua immagine in evidenza non ha le proporzioni corrette per le Twitter Card. Puoi caricare un'immagine separata di 1200 x 628 pixel ottimizzata specificamente per la condivisione social.
Aggiungere Twitter Card con All in One SEO (AIOSEO)
All in One SEO offre anche funzionalità per Twitter Card:
- Naviga a All in One SEO > Reti social.
- Clicca sulla scheda X (Twitter).
- Attiva Twitter Card e scegli il tipo di card predefinito.
- Inserisci il nome utente X del tuo sito.
- Configura le impostazioni predefinite per articoli e pagine.
- Salva le modifiche.
AIOSEO offre anche impostazioni Twitter Card per articolo nell'editor degli articoli sotto il pannello AIOSEO Settings, scheda Social.
Implementazione manuale di Twitter Card senza plugin
Se preferisci non usare un plugin SEO, o se hai bisogno del controllo completo sull'output, puoi aggiungere manualmente i tag Twitter Card tramite il file functions.php del tuo tema o un plugin personalizzato specifico per il sito:
function custom_twitter_cards() {
if (is_singular()) {
global $post;
$title = get_the_title();
$url = get_permalink();
// Genera la descrizione dall'estratto o dal contenuto
$excerpt = has_excerpt()
? wp_strip_all_tags(get_the_excerpt())
: wp_trim_words(wp_strip_all_tags($post->post_content), 30);
// Recupera l'immagine in evidenza
$image = get_the_post_thumbnail_url($post->ID, 'large');
// Recupera l'handle Twitter dell'autore dai metadati utente
$author_twitter = get_the_author_meta('twitter', $post->post_author);
echo '<meta name="twitter:card" content="summary_large_image" />' . "\n";
echo '<meta name="twitter:title" content="' . esc_attr($title) . '" />' . "\n";
echo '<meta name="twitter:description" content="' . esc_attr($excerpt) . '" />' . "\n";
echo '<meta name="twitter:url" content="' . esc_url($url) . '" />' . "\n";
if ($image) {
echo '<meta name="twitter:image" content="' . esc_url($image) . '" />' . "\n";
// Aggiungi il testo alt dall'immagine in evidenza
$thumbnail_id = get_post_thumbnail_id($post->ID);
$alt_text = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
if ($alt_text) {
echo '<meta name="twitter:image:alt" content="' . esc_attr($alt_text) . '" />' . "\n";
}
}
// Handle Twitter del sito
echo '<meta name="twitter:site" content="@TuoSiteHandle" />' . "\n";
// Handle Twitter dell'autore (se impostato)
if ($author_twitter) {
echo '<meta name="twitter:creator" content="@' . esc_attr($author_twitter) . '" />' . "\n";
}
} elseif (is_front_page()) {
echo '<meta name="twitter:card" content="summary_large_image" />' . "\n";
echo '<meta name="twitter:title" content="' . esc_attr(get_bloginfo('name')) . '" />' . "\n";
echo '<meta name="twitter:description" content="' . esc_attr(get_bloginfo('description')) . '" />' . "\n";
echo '<meta name="twitter:site" content="@TuoSiteHandle" />' . "\n";
}
}
add_action('wp_head', 'custom_twitter_cards');Sostituisci @TuoSiteHandle con il tuo nome utente X effettivo. Per memorizzare gli handle Twitter degli autori, puoi aggiungere un campo meta utente personalizzato twitter al profilo di ciascun utente, oppure utilizzare un plugin come "Extra User Details" per aggiungere il campo alla schermata di modifica del profilo.
Best practice e specifiche per le immagini Twitter Card
L'immagine è l'elemento più importante di una Twitter Card. Sceglierla correttamente fa una differenza significativa nell'engagement:
- Summary Card with Large Image: Usa immagini con un rapporto 2:1. La dimensione consigliata è 1200 x 628 pixel. Il minimo è 300 x 157 pixel, ma le immagini più grandi appaiono notevolmente migliori, soprattutto su schermi ad alta densità di pixel.
- Summary Card: Usa immagini quadrate con un rapporto 1:1. La dimensione consigliata è 400 x 400 pixel. Il minimo è 144 x 144 pixel.
- Formato file: JPG, PNG, WEBP e GIF sono supportati. JPG è la scelta più sicura per le foto. PNG funziona meglio per immagini con testo o parti trasparenti (anche se la trasparenza viene unita a uno sfondo bianco).
- Dimensione del file: Mantieni le immagini sotto i 5 MB. I file più grandi potrebbero non caricarsi o essere ignorati dall'elaboratore di card.
- Evita immagini ricche di testo: X ritaglia le immagini in modo diverso su mobile e desktop. Il testo ai bordi di un'immagine può essere tagliato. Mantieni i contenuti importanti centrati.
- Usa immagini uniche per articolo: Non riutilizzare la stessa immagine per ogni articolo. Visual unici aiutano i tuoi contenuti a risaltare e impediscono che i tuoi tweet sembrino ripetitivi.
Come le Twitter Card lavorano con i tag Open Graph
X usa una specifica gerarchia di fallback per determinare cosa visualizzare in un'anteprima di card:
- Prima controlla i meta tag espliciti
twitter:*. - Se manca un tag
twitter:*, ripiega sul tag Open Graph equivalente (og:title,og:description,og:image). - Se entrambi mancano, usa il tag
<title>della pagina e tenta di estrarre una descrizione dal contenuto.
Questo significa che non hai necessariamente bisogno di entrambi i set di tag. Se i tuoi tag Open Graph sono già impostati (ad esempio, per la condivisione su Facebook), le anteprime base di Twitter Card funzioneranno. Tuttavia, ci sono situazioni in cui desideri contenuti diversi su piattaforme diverse. Ad esempio, potresti usare un'immagine in formato orizzontale per X, ma un'immagine quadrata per Facebook. In quello scenario, impostare sia og:image che twitter:image su URL diversi ti dà il controllo specifico per piattaforma.
Il tag twitter:card non ha un equivalente Open Graph, quindi devi sempre includerlo esplicitamente per definire il tipo di card. Senza questo tag, X non renderizza alcuna card, anche se tutti gli altri tag sono presenti.
Testare e debuggare le tue Twitter Card
Dopo aver aggiunto i tag, verifica che tutto funzioni correttamente:
- Controlla i meta tag con InspectWP: Esegui il tuo URL attraverso InspectWP per verificare che tutti i meta tag Twitter Card siano presenti nel sorgente della pagina. InspectWP elenca ogni meta tag che trova, in modo da poter confermare che vengano emessi i valori corretti.
- Testa direttamente su X: Pubblica un link in un tweet (puoi eliminarlo subito dopo). L'anteprima della card nel composer del tweet ti mostrerà esattamente come apparirà il tuo link. Se la card non appare, attendi un minuto e riprova. X può richiedere del tempo per recuperare e memorizzare nella cache i dati della card per i nuovi URL.
- Forza il refresh della cache: X memorizza nella cache i dati della card in modo aggressivo. Se hai aggiornato i tuoi tag ma vedi ancora dati vecchi, aggiungi un parametro di query come
?v=2al tuo URL. Questo fa sì che X la tratti come un nuovo URL e recuperi nuovamente le informazioni della card. - Controlla problemi HTTPS: Tutti gli URL delle immagini nei tag Twitter Card devono usare HTTPS. Gli URL delle immagini HTTP vengono bloccati e la card viene renderizzata senza immagine.
- Convalida le dimensioni dell'immagine: Se la tua card mostra una piccola thumbnail invece dell'anteprima dell'immagine grande, la tua immagine probabilmente è più piccola delle dimensioni minime. Controlla il rapporto e la dimensione in pixel.
Problemi comuni con Twitter Card e soluzioni
- La card non viene mostrata affatto: Assicurati che il meta tag
twitter:cardsia presente. Questo tag è obbligatorio. Senza di esso, X ignora tutti gli altri meta tag twitter. Verifica anche che la tua pagina sia pubblicamente accessibile e non bloccata da un muro di login, protezione con password o robots.txt. - Immagine sbagliata visualizzata: X memorizza nella cache i dati della card, quindi le immagini modificate di recente potrebbero non aggiornarsi immediatamente. Usa un parametro di query cache-busting sull'URL per forzare il refresh. Verifica anche che il tag
twitter:imagepunti all'URL corretto e pubblicamente accessibile. - Immagine troppo piccola o ritagliata male: Usa immagini che soddisfano i requisiti di dimensione minima. Per le card summary_large_image, mantieni 1200 x 628 pixel o più grandi. Evita di posizionare contenuti importanti vicino ai bordi.
- Meta tag duplicati: Se usi un plugin SEO e in aggiunta codice manuale aggiunge tag Twitter Card, otterrai tag duplicati. X di solito usa il primo che incontra, ma i duplicati possono causare comportamenti imprevedibili. Rimuovi il codice manuale se un plugin lo gestisce, o viceversa.
- Interferenza del plugin di caching: Se usi un plugin di caching delle pagine, svuota la cache dopo aver aggiornato la tua configurazione Twitter Card. Altrimenti, la versione memorizzata nella cache delle tue pagine può ancora contenere i vecchi (o mancanti) meta tag.
Best practice per l'ottimizzazione di Twitter Card in WordPress
- Imposta summary_large_image come predefinito: Il formato di immagine grande supera costantemente il formato thumbnail piccolo nelle metriche di engagement. Usalo per tutti gli articoli del blog e gli articoli.
- Scrivi descrizioni accattivanti: Il testo twitter:description è il tuo pitch. Scrivilo come un mini-titolo che incoraggi le persone a cliccare. Mantienilo sotto i 200 caratteri e metti le informazioni più importanti per prime.
- Imposta sia tag OG che Twitter: Anche se X ripiega sui tag OG, avere entrambi i set garantisce anteprime coerenti su tutte le piattaforme social, inclusi Facebook, LinkedIn, Slack e app di messaggistica.
- Testa dopo aggiornamenti di tema o plugin: Gli aggiornamenti di tema o plugin a volte possono rompere l'output dei meta tag. Dopo aggiornamenti importanti, esegui una scansione rapida con InspectWP per verificare che le tue Twitter Card funzionino ancora correttamente.
- Usa un'immagine fallback predefinita: Configura un'immagine predefinita a livello di sito nelle impostazioni del tuo plugin SEO. Questo garantisce che anche le pagine senza un'immagine in evidenza mostrino comunque un'immagine brandizzata nella Twitter Card, come il tuo logo o un'immagine brandizzata generica.