Aggiungere le Twitter Cards al proprio sito

Aggiornato il

Cosa sono le Twitter Cards

Twitter ha appena rilasciato una nuova funzionalità: le Twitter Cards. Ora è possibile allegare contenuti extra ad ogni tweet che linka alle pagine del nostro sito. Per certi versi, assomiglia molto allo status di Facebook: basta copiare un link all’interno del tweet, ed ecco apparire magicamente in basso le nuove informazioni.

Le nuove Twitter Cards

Vedete in tempo reale questa funzione sul mio profilo di twitter: basta cliccare su “visualizza repilogo” (sotto un qualsiasi tweet contenente un link verso un sito che le ha abilitate) per far scendere la tendina delle Twitter Cards.

A cosa servono

E il vantaggio qual’è? Semplice: quello di attribuire al giusto autore la paternità del contenuto che si va a linkare. Ad esempio, se @tizio ritwitta un post che proviene dal blog di @caio senza dargli la giusta attribuzione (senza scrivere cioè @caio nella citazione), un follower di @tizio che legge il tweet potrebbe decidere di seguirlo, ma non di seguire @caio (cioè l’autore originale)!
Con le Twitter Cards, questo non succede più: adesso all’interno del tweet compare sempre tale attribuzione.

Ma non solo: le Twitter Cards e le loro informazioni aggiuntive aiutano anche ad “allungare la vita” dei 140 caratteri, che sono sempre stati il limite massimo all’interno di un singolo tweet (anche se a mio parere, questo era anche uno dei punti più affascinanti di Twitter).

Le varie cards

Le Twitter Cards esistono in varie forme e dimensioni, e al momento in cui scrivo ce ne sono di 3 tipi (update: alla data di settembre 2103 ne sono stati aggiunti altri 4):

  • summary: usata soprattutto nei blog, mostra un estratto del testo più un’immagine.
  • photo: mostra solo un’immagine, ma di dimensioni maggiori (comodo ad esempio per chi sfrutta Instagram).
  • player: può utilizzare video, suoni ed eventi in streaming.

Ogni card ha quindi la sua funzione particolare, ma presenta sempre almeno 2 tipi di attribuzione: quella riguardante il sito e quella riguardante l’autore dell’articolo (entrambi i links sono presenti nella parte inferiore).

Come implementarle

Twitter ha dedicato un’intera sezione dove spiega passo per passo come inserire le cards all’interno dei siti. Ad esempio, questo è il codice necessario da inserire nella <head> per utilizzare la card di tipo summary:


<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:url" content="http://www.nytimes.com/2012/02/19/arts/music/amid-police-presence-fans-congregate-for-whitney-houstons-funeral-in-newark.html">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

WordPress e le Twitter Cards

Vorrei qui aprire una piccola parentesi dedicata a chi possiede un sito realizzato con WordPress. In questo caso, implementare le Twitter Cards è semplicissimo: il consiglio è quello di scaricare l’ottimo plugin gratuito SEO by Yoast.
Nella sezione del plugin Social » Twitter bisoigna spuntare “Add Twitter card meta data“, compilando anche il campo “username” con il proprio nome utente di Twitter (ma senza la "@").
Occorre poi spostarsi nella sezione Users » My Profile ed inserire la propria username di Twitter anche lì. Se per un blog ci sono autori multipli, ognuno di questi dovrà aggiornare il proprio profilo allo stesso modo.

Twitter Cards e WordPress

Un ultimo step: chiedere a Twitter l’approvazione!

Perché le Cards vengano attivate nel nostro sito, bisogna ricordarsi di fare richiesta a Twitter tramite l’apposito form. La richiesta dovrà essere prima accettata, ma esiste anche un rapido tool per verificare in precedenza che la nostra pagina sia formattata in modo corretto.

di Mattia Frigeri

COMMENTI

  • Ciao, mi chiedevo solo una cosa, come si collega il metatag a Twitter, ovvero una volta esisteva la dichiarazione name space :-) ora sembra che tutto questo non serva più, vedi Open Graph, Twitter e altro.
    Così mi vengono sempre i dubbi che in questi casi sia omesso per insicurezza sull’uso oppure è così e basta.

    M.
    @stilisticamente

    • Esatto Marco, in pratica Twitter “controlla” la pagina che viene collegata dall’utente, e se trova i meta tags corretti attiva le cards. Per conoscere a fondo il funzionamento vero e proprio, puoi dare un’occhio alla documentazione, e se hai dubbi sulla corretta implementazione, il tool di verifica è lì proprio per quello!

  • Lascia un commento

    Puoi usare questi tags e attributi HTML se necessario:
    <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    *