Vai al contenuto principale

Migliorare l'aspetto dei propri articoli su Twitter

Uccello stilizzato con fumetto
Tweetta con stile

Se condividete e leggete notizie sui maggiori social network, cioè Facebook e Twitter, avrete notato che molti dei siti più grandi, o quelli ospitati su le maggiori piattaforme, appaiono molto più professionali di quelli dei piccoli siti: una piccola descrizione, immagine, link al sito autore, etc. Questo è possibile grazie a due sistemi chiamati Open Graph e Twitter Cards.

In passato per avere questa esperienza più avanzata, su Twitter, bisognava essere approvati dalla medesima. Ho sempre pensato che questa politica di Twitter fosse bislacca ed infatti ho appena scoperto che dal 20 marzo non c'è più bisogno di approvazione. Sono stupito che mi sia sfuggita, ma sempra che sia un fatto comune, come si dice: mal comune mezzo gaudio.

In realtà per far sì che i vostri contenuti abbiano un aspetto più piacevole non bisogna fare molto, basta indicare a Twitter cosa deve mostrare e loro faranno il resto. In pratica si tratta di aggiungere pochi meta tag nello head delle pagine che desiderate.

Prima di farlo però bisogna scegliere il tipo di carta che volete utilizzare, per i siti le possibilità sono due: Summary Summary with Large Image, la cui differenza è la grandezza dell'immagine mostrata. A meno che siate particolarmente attenti alle questioni di marketing1, la scelta migliore per diffondere i contenuti di testo è Summary, mentre la seconda serve per chi predilige le foto e/o catturare l'attenzione dei lettori. Ad esempio, la maggior parte dei più grandi siti di notizie (es. Techcrunch) utilizzano l'immagine grande, mentre i blog di Wordpress.com usano la versione dove il testo ha più risalto. In ogni caso per cambiare basta modificare una riga. Tenete anche conto che l'immagine deve essere almeno di 120x120 nel caso di Summary e 280x150 nel caso di Summary with Large Image, ma in nessun caso deve eccedere 1MB di dimensioni.

<meta name="twitter:card" content="summary" />
<!-- oppure -->
<meta name="twitter:card" content="summary_large_image" />
<!-- il vostro account twitter, se lo avete-->
<meta name="twitter:site" content="@menstechnica" />
<!-- il titolo dell'articolo -->
<meta name="twitter:title" content="Migliorare l'aspetto dei propri articoli su Twitter" />
<!-- breve descrizione, massimo 200 caratteri -->
<meta name="twitter:description" content="Ora chiunque può implementare le Twitter Cards sul proprio sito" />
<!-- indirizzo dell'immagine principale dell'articolo (non il logo del sito) -->
<meta name="twitter:image" content="immagine.jpg" />

In teoria potreste riutilizzare i tag di Open Graph, visto che Twitter Cards li supporta, e aggiungere semplicemente i due tag specifici di Twitter, ma per quanto sia comodo non è necessariamente la mossa migliore. Infatti i due siti hanno caratteristiche leggermente diverse, ad esempio se la descrizione su Twitter deve essere al massimo di 200 caratteri Facebook indica come limite 2-4 frasi. Simili differenze esistono per l'immagine. In ogni caso si tratta solo di aggiungere qualche qualche riga in più.

Potete trovare l'elenco di tutti i possibili tag su Cards Markup Tag Reference.


Note

1. nel qual caso dovreste fare le vostre prove []

Aggiornamento
Pubblicazione