Come aggiungere automaticamente miniatura e descrizione ai tweet di post di blog su Blogger con Twitter Cards.

Come mostrare i tweet di condivisione del blog con titolo, descrizione e miniatura della pagina twittata con il sistema di markup Twitter Cards.

Quando si condivide una pagina del nostro blog su Facebook o su Google+ viene mostrato un link comprensivo oltre che del titolo anche della descrizione e della miniatura della prima immagine. Per attivare questa procedura su Facebook occorre inserire dei metatag mentre per la corretta condivisione su Google Plus bisogna andare su Impostazioni > Preferenze di Ricerca e attivare questa opzione per tutti gli articoli. Anche Twitter si è uniformato a questo sistema di markup con un meccanismo che è stato denominato Twitter Cards. La procedura è suddivisa in tre passaggi. Si deve scegliere il tipo di card che vogliamo implementare nei nostri tweet, aggiungere i metatag al modello e inserire l'URL del nostro sito nel Validator Tool per la sua approvazione.

La Card disponibili sono Summary Card, Large Image Summary Card, Photo Card, Gallery Card, App Card, Player Card e Product Card. Per esempio nel caso della Summary Card, dopo aver completato tutta la procedura, alla fine dei tweet di condivisione di pagine del vostro sito, verrà inserito il pulsante View Summary che, se cliccato, mostrerà il tweet in modo molto più ricco e esauriente

View Summary si trasformerà in Hide Summary e sotto al tweet si vedrà l'anteprima della pagina con la descrizione e l'immagine di miniatura come mostrato nello screenshot.

METATAG DELLA SUMMARY CARD DI TWITTER PER BLOGGER

Vediamo come attivare la Summary Card per i siti ospitati nella piattaforma Blogger. Innanzitutto devono essere state attivate le Preferenze di Ricerca per ciascun post. Si va su Impostazioni > Preferenze di Ricerca e si mette la spunta su Sì a Abilitare le descrizioni della ricerca. Successivamente quando si pubblica un articolo con l'Editor di Blogger, bisognerà andare nella colonna di destra e inserire un riassunto dei temi trattati nell'articolo su Descrizione della Ricerca che sarà diventata visibile sotto Impostazioni post.

Fatto questo, dopo aver salvato il template, si va su Modello > Modifica HTML e si digita Ctrl+F per cercare la riga </head> . Subito sopra si incolla il  blocco di codice qui sotto

<!-- Twitter Card Start -->
<meta content='summary' name='twitter:card'/>
<meta content='@ipcei' name='twitter:site'/>
<meta content='@parsifal32' name='twitter:creator'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQBNHfZJs-Lx5a9_K6jAg4KC-MMMOYK3hf63XU5wH49uLxhq3ESKUlKsa8GGbpayD1TNOjo1lPIPDMzyOgtvZXx6BRwJFZDTisveDggvdJmtNQiN86o9kcLW5HYYGRvlR2E7g9qp9ZFQQ/s593/logo-ipcei-rettangolo.png' name='twitter:image'/>
</b:if>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<!-- Twitter Card End -->

come mostrato nel seguente screenshot

I metatag presenti saranno in grado di rilevare il dominio della pagina, il suo titolo, la sua descrizione e la miniatura della prima immagine presente. I dati in rosso rappresentano gli account Twitter di questo sito (@IpCeI), del suo autore (@parsifal32) e il logo del sito. Se non avete account disgiunti potete benissimo mettere lo stesso account in tutte e due le righe. Si salva il modello.

L'ultimo passaggio è il più noioso visto che dobbiamo farci validare i markup inseriti dallo stesso Twitter. Si va su Card Validator da loggati su Twitter. Ci verrà chiesto di entrare nuovamente e di consentire alla applicazione di accedere al nostro account. Si sceglie la scheda Validate & Apply  

Dopo aver incollato l'URL del blog si pigia su Go!. L'approvazione ci verrà comunicata da Twitter con una email che arriverà in tempi rapidi

Aggiornamento: Il codice è stato modificato per renderlo funzionante non solo nei post ma anche nella homepage del blog. E' stato inoltre introdotto il metatag della immagine del logo quando si condividano pagine che non siano post e in cui non vi siano miniature.