Pubblicato il 13/06/13 - aggiornato il  | 17 commenti :

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

twitter-card-summary

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 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

twitter-card

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  

validare-account-twitter-card

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.


17 commenti :

  1. Quando hanno aggiornato il layout di Google+ non mi appare più la descrizione dell'articolo, nonostante le impostazioni nel blog non siano cambiate. Viene fuori soltanto il titolo del post, la miniatura della prima immagine e l'url.

    RispondiElimina
  2. "invalid card type" è la risposta di Twitter alla mia richiesta di validazione. E dire che questa volta mi sembrava tutto facile... :( niente da fare, sono proprio negato.

    RispondiElimina
  3. e invece per Large Image Summary Card, quali sono i metatag? o prevedi di fare un post apposito e spiegare tutta la procedura. Grazie

    RispondiElimina
    Risposte
    1. @# Per adesso contentiamoci di Summary Card poi vedremo ...

      Elimina
  4. Tutto ok fino ai segni segni verdi sulla sinistra e all'anteprima del tweet ma dell'opzione Visualizza Sommario nessuna traccia! Mi sembra, e scusami se sbaglio, che nemmeno sui tuoi profili twitter funzioni. Ciao Giuliana

    RispondiElimina
    Risposte
    1. @# Secondo quanto letto nelle "istruzioni" Twitter in circa una decina di giorni dovrebbe comunicare con una email di aver attivato la summary card. Come ho già detto alla fine del post bisognerà vedere se la validazione di un solo URL sarà sufficiente per avere tutto il dominio validato. Solo allora si potrà vedere il link Visualizza Sommario alla fine dei tweet

      Elimina
  5. Innazitutto grazie per il tuo post, queste informazioni per la tweet cards su blogger non si trovano da nessuna parte. Ho seguito le istruzioni, ma nella preview mi ritrovo con l'immagine del tuo sito e non del mio: cosa ho sbagliato?
    Grazie mille!!

    RispondiElimina
    Risposte
    1. Semplice, non hai sostituito l'URL del logo del mio sito
      https://lh3.googleusercontent.com/-GnYopGwV-gs/UdGjliQbbtI/AAAAAAAAidc/wJc5KXBElok/s593/logo-ipcei-rettangolo.png
      con quello del tuo :)
      @#

      Elimina
  6. A me funziona per la homepage, ma non per i singoli post, sbaglio qualcosa?

    RispondiElimina
    Risposte
    1. Non te lo so dire. Controlla che il Card Validator di dia l'OKche adesso è in questa pagina
      https://cards-dev.twitter.com/validator

      @#

      Elimina
  7. Per motivi che mi sfuggono l'immagine nell'anteprima è sgranata (anche se l'immagine originale è di degna qualità). A cosa potrebbe essere dovuto?

    RispondiElimina
    Risposte
    1. È molto strano perché la miniatura è piuttosto piccola, non mi viene in mente nulla al momento :(
      @#

      Elimina
  8. Grazieeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

    RispondiElimina
  9. Ciao Ernesto, ho seguito passo passo l'articolo. Quando inserisco il codice però mi da questo errore:Open quote is expected for attribute "content" associated with an element type "meta" (ho un unico account twitter).
    Come potrei risolvere?

    Grazie in anticipo

    RispondiElimina
  10. Il Tema ti dice anche la riga che non può salvare. Dopo averla scoperta controlla che ci sia la slash / prima del tag di chiusura, eventualmente togli gli spazi
    @#

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy