Attivare la Twitter Summary Card nei Temi di Blogger per mostrare miniatura e snippet.

Come mostrare miniatura e snippet dei post di Blogger linkati nei tweet attivando la Twitter Summary Card con i metatag e il Card Validator.

Se siete utenti di Twitter avrete certamente notato che nei tweet con link di siti importanti vengono mostrati automaticamente anche la miniatura della prima immagine del post e lo snippet del riassunto.

Vediamo come attivare questa importante funzionalità nei vecchi Modelli di Blogger ma anche nei Nuovi Temi Responsive. In questi Nuovi Temi sono presenti di default delle icone di condivisione. Nel Tema Contempo il lettore può cliccare sulla icona della condivisione posta sulla destra del Titolo per scegliere tra Ottieni Link, Facebook, Twitter, Pinterest, Google+ e Email.

Se il lettore sceglie Twitter verrà creato un tweet che contiene il titolo del post e il suo URL con l'aggiunta della stringa ?spref=tw che può servire per analizzare le statistiche delle condivisioni dei lettori. Il tweet però non mostrerà né la miniatura né lo snippet.

AZIONI PROPEDEUTICHE

1) - Per una migliore condivisione su Twitter occorre innanzitutto modificare il codice del Tema per mostrare prima il titolo del post e poi il nome del blog e non il contrario come accade senza modifiche. Questa impostazione è da modificare anche nei Nuovi Temi di Blogger.

Nei vecchi Modelli va su Tema -> Modifica HTML e si cerca la riga di codice

<title><data:blog.pageTitle/></title>

che  si sostituisce con questo blocco

<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <title><data:blog.title/></title> <b:else/>
  <title><data:blog.pageName/> |  <data:blog.title/></title>
</b:if>

Nei Nuovi Temi si cerca invece questa riga

<title><data:view.title.escaped/></title>

che dovrà essere sostituita con questo blocco di codice

<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <title><data:view.title.escaped/></title>
<b:else/>
  <title><data:blog.pageName/> |  <data:blog.title/></title>
</b:if>

Ovviamente in entrambi i casi dovrà essere salvato il Tema. Questa modifica servirà anche per mostrare il Titolo del Post prima del Nome del blog anche nelle Condivisioni su Facebook.

2) - Occorre attivare la Descrizione di Ricerca per visualizzare lo snippet insieme alla miniatura. Si va su Bacheca -> Impostazioni -> Preferenze di Ricerca -> Metatag -> Descrizione e si mette la spunta su Sì per Abilitare le Descrizioni della Ricerca. Successivamente si digita una descrizione con un massimo di 150 caratteri che illustra gli argomenti trattati nel sito. Si va su Salva Modifiche.

Quando creeremo un nuovo articolo, o quando modificheremo uno vecchio, nella colonna di destra Impostazioni post verrà mostrata la sezione Descrizione della Ricerca in cui digitare un breve riassunto del post. Tale testo sarà quello visibile nello snippet delle condivisioni di Facebook, di Google e di Twitter.

COME ATTIVARE E VALIDARE LA TWITTER SUMMARY CARD SU BLOGGER

Sia nei vecchi Modelli sia nei Nuovi Temi si va su Bacheca -> Tema -> Modifica HTML e si cerca la riga </head>. Subito sopra a questa si incolla un codice come il seguente

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

Si salva il Tema. Il codice dovrà essere personalizzato nei parametri colorati di rosso. I due account Twitter @ipcei e @parsifal32 sono rispettivamente quelli del sito e dell'autore. Se non avete due account disgiunti ma uno soltanto potete benissimo inserire la stessa menzione in entrambe le righe. Il terzo parametro è l'URL del logo del sito e verrà mostrato come miniatura nei tweet che linkano post senza foto.

La validazione della Twitter Summary Card è fondamentale per controllare che il codice inserito funzioni correttamente e ci mostrerà l'anteprima del tweet con il link a quel dato post. Si apre la pagina del Twitter Validator, si incolla l'URL di un post quindi si va su Preview Card

Insieme all'Anteprima del tweet con Titolo, Miniatura e Snippet verranno mostrate le informazioni sul numero dei metatag che sono stati rilevati. Oltre a verificare le anteprime di qualche post è opportuno incollare l'URL della Homepage per verificare che si veda l'immagine del logo che viene mostrata di default in questa pagina. Con questa personalizzazione i vostri tweet saranno certamente più ricchi e susciteranno un maggiore interesse nei vostri followers.