Pubblicato il 10/05/17 - aggiornato il  | 26 commenti :

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

anteprima-tweet

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.


26 commenti :

  1. CIAO ERNESTO. HO PROVATO AD ESEGUIRE TUTTO CIO' CHE VI E' SCRITTO MA NON RIESCO. COSA MI CONSIGLI?

    RispondiElimina
  2. questo codice con che cosa deve essere sostituito? 'https://lh3.googleusercontent.com/-GnYopGwV-gs/UdGjliQbbtI/AAAAAAAAidc/wJc5KXBElok/s593/logo-ipcei-rettangolo.png

    RispondiElimina
  3. Devi caricare su Blogger una immagine del logo del tuo blog. Puoi farlo creando una Bozza. Andando su HTML nell'editor copi lurol del logo e lo sostituisci a quello di questo blog che è quello che hai incollato
    @#

    RispondiElimina
  4. io ho un'immagine del mio blog caricata (logo), ma non riesco a capire dove andare a cercarla su html. Che parola devo inserire in search? Quando digito ctrl+F? Possibile sia questo? https://lh3.googleusercontent.com/-eUO3hVxixtM/UHkrSghfDiI/AAAAAAAAbK4/YxXDdaTC53Y/s45/twitter.jpg"

    RispondiElimina
    Risposte
    1. Se non ti ricordi l'URL del logo, lo puoi sempre ripubblicare online con questo sistema
      https://www.ideepercomputeredinternet.com/2017/02/blogger-hotlink-google-photos.html
      L'icona di cui hai inserito l'URL è una icona di un pulsante di Twitter
      @#

      Elimina
  5. I due account Twitter @ipcei e @parsifal32 sono rispettivamente quelli del sito e dell'autore.Sarebbe l'indirizzo mio di twitter? oppure devo cercare altro? Grazie della pazienza

    RispondiElimina
  6. Wuelli sono i miei indirizzi di Twitter. Devi sostituirli con i tuoi, o con il tuo se ne hai uno dolo. E spiegato tutto nel post
    @#

    RispondiElimina
  7. Salve, una cortesia per un neofita si tratta di operazioni veramente complesse. Esistono soluzioni più semplici. Tra l'altro non riesco neppure a trovare il punto dove fare gli inserimenti. Grazie

    RispondiElimina
    Risposte
    1. La parte propedeutica puoi tralasciarla. Per trovare la riga nel modello vai su Tema -> Modifica HTML e clicchi sull'area del codice quindi digiti Ctrl+F, incolli la riga da cercare per poi andare su Invio
      @#

      Elimina
  8. Grazie, ci provo. Certo non è facile trovare risposte ai quesiti su Blogger. Pensavo fosse il più semplice perché collegato a Google, ma forse occorre spostarsi su wordpress mi dicono sia più intuitivo... vedremo

    RispondiElimina
  9. ah, scusa ho riletto varie volte la precedente risposta sul logo ma non capisco dove trovare l'url... perdona davvero. posso cancellare il pezzo che riguarda questa cosa. Grazie

    RispondiElimina
  10. Puoi cancellare tutti i tuoi commenti quando vuoi
    @#

    RispondiElimina
  11. in realtà chiedevo se si poteva cancellare la parte del codice riguardante l'url del logo, poiché non lo trovo... volevo sapere se e come fare la cesura e determinare il nuovo codice

    RispondiElimina
  12. Immagino che tu u abbia una immagine di intestazione o header. In questo caso cliccarci sopra con il destro del mouse e poi scegli Copia indirizzo immagine.
    l'URL trovato lo puoi usare come URL del Logo. Altrimenti carica una foto del marchio del tuo sito in una bozza poi vai su HTML e copiane l'indirizzo. Non si ouo tralasciare quel dato. Puoi provare a lasciarlo in bianco però devi sempre pubblicare almeno una immagine in tutti i post
    @#

    RispondiElimina
  13. Ciao!Grazie per i tipo preziosi consigli. Ho fatto tutto e nella preview card viene tutto perfetto. Una volta che vado a condividere il tweet però viene fuori solo il link dell articolo e il titolo. Ma nessuna miniatura con la foto e la descrizione dell articolo. Dove ho sbagliato? Grazie

    RispondiElimina
    Risposte
    1. Nel Twitter Card Validator si vede correttamente l'anteprima? Se è così allora è tutto OK. La miniatura e la descrizione non si vedono con le app per il mobile
      @#

      Elimina
  14. Ernesto grazie per la risposta. Anteprima funziona benissimo. Non mi da alcun errore relativo alla white list quindi presumo che per il mio blog non debba richiederne approvazione. Ad ogni modo ho provato a condividere articolo anche nella versione desktop (da pc) e mi da solo titolo e link all articolo senza immagine e riquadro anteprima. Come posso fare?Ho seguito alla lettera ciò che hai scritto.

    RispondiElimina
    Risposte
    1. Se l'anteprima funziona non so proprio dove possa essere il problema 🤨
      @#

      Elimina
  15. Grazie per l'ottimo consiglio; funziona alla perfezione.

    Una curiosità, dato che sono ancora in fase di test: mi appare il titolo del post, e sotto, la descrizione del blog.
    Mi interesserebbe più mostrare un 'trimmer' del testo del post, così come avviene in un qualunque formato teaser. Come si può ottenere questo risultato?
    Grazie mille

    RispondiElimina
    Risposte
    1. Non credo che Twitter offra questa possibilità. Prima c'erano altre Card di Twitter che mostravano la miniatura più grande ma adesso credo siano state ritirate
      @#

      Elimina
  16. Ciao, ho inserito il codice che hai detto e inserito il link di esempio nella Card validator, però quando vado a scrivere il post Twitter e inserisco il link compare solo il link ma non l'anteprima.

    RispondiElimina
    Risposte
    1. L'anteprima la vedi nel Validator? Se la vedi significa che il codice è OK. Se poi su Twitter non la vedi ancora può essere un problema di tempo o di dispositivi. Altro non ti so dire
      @#

      Elimina
  17. ho inserito il codice ma nella card mi dice Unable to render Card preview.
    Non è che va inserito fra la parola 'script' e 'head'?
    io l'ho incollato sopra quella riga script-head...subito sopra.
    Come mai non va?
    cosa potrebbe essere?

    RispondiElimina
    Risposte
    1. Il codice va incollato sopra alla riga < /head > . Questo è lo screenshot del codice che ho in questo blog e che funziona
      i.imgur.com/0VTWC7w.jpg
      Spero possa aiutarti
      @#

      Elimina
    2. Hai cambiato i dati '@ipcei', '@parsifal32' e 'https://lh3.googleusercontent.com/-GnYopGwV-gs/UdGjliQbbtI/AAAAAAAAidc/wJc5KXBElok/s593/logo-ipcei-rettangolo.png' ?
      Perché spesso i problemi si nascondono in banali dettagli
      @#

      Elimina
  18. Grazie mille: funziona perfettamente!

    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