Pubblicato il 10/05/17 - aggiornato il  | 14 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://lh3.googleusercontent.com/-GnYopGwV-gs/UdGjliQbbtI/AAAAAAAAidc/wJc5KXBElok/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.




14 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

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