Come condividere correttamente titolo, sommario, immagine su Google, Twitter, Facebook e Pinterest inserendo i metatag o markup nel modello di Blogger.
La condivisione di un post su piattaforma Blogger si effettua incollando l'indirizzo dello stesso in un tweet, in un aggiornamento di Facebook o postando una sua foto su Pinterest. Tramite l'URL i social network individuano gli elementi da mostrare nella timeline o nella sezione Notizie. Un discorso simile avviene anche per i motori di ricerca. I risultati mostrati da Google sono determinati anche dai cosiddetti metatag inseriti nel modello di Blogger.
In questo articolo vediamo quali metatag aggiungere per rendere la condivisione più ricca e precisa. Se quando pubblicate un articolo su Facebook non viene rilevata la miniatura della foto o se la descrizione dell'articolo è sballata allora nel vostro template ci sono dei metatag sbagliati o mancanti.
METATAG DI GOOGLE+
I metatag di Google+ paradossalmente sono i meno necessari perché il motore di ricerca per antonomasia riesce sempre a rilevare immagini e contenuto del post. Comunque per ottimizzare il processo si deve andare su Impostazioni > Preferenze di ricerca e abilitare il metatag Descrizione
La Descrizione da digitare nel campo potrà contenere fino a 150 caratteri e verrà visualizzata nelle condivisioni della sola Homepage. Per i metatag dei singoli post dovremo procedere caso per caso direttamente nell'Editor di Blogger nella colonna di destra denominata Impostazioni Post
Nel modulo Descrizione della ricerca dovremo inserire un breve riassunto del post facendo attenzione a inserire tutte le parole chiave eventualmente usando dei sinonimi delle query inserite nel titolo e nel Permalink personalizzato. Con queste impostazioni diventano inutili e anzi dannosi i metatag inseriti nel modello per questa stessa funzione visto che potrebbero confliggere. Quindi se avete in passato incollato nella sezione <head> del modello delle righe come queste
<meta content='Descrizione del blog' name='description'/>
<meta content='parole chiave del blog' name='keywords'/>
<meta content='parole chiave del blog' name='keywords'/>
è consigliabile cancellarle. Si possono invece opzionalmente aggiungere questi metatag
<!-- Metatag Google Inizio -->
<meta content='Ernesto Tirinnanzi' name='Author'/>
<meta content='parsifal32@ideepercomputeredinternet.com' name='Email'/>
<meta content='it_IT' name='language'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://lh3.googleusercontent.com/-SMxI9TtqpKA/UiPB9AuUYKI/AAAAAAAAADo/Z7FdOnU3H3Q/w640-h180-p-rw/Cover-googleplus3.png' property='og:image'/>
</b:if>
</b:if>
<!-- Metatag Google Fine -->
<meta content='Ernesto Tirinnanzi' name='Author'/>
<meta content='parsifal32@ideepercomputeredinternet.com' name='Email'/>
<meta content='it_IT' name='language'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://lh3.googleusercontent.com/-SMxI9TtqpKA/UiPB9AuUYKI/AAAAAAAAADo/Z7FdOnU3H3Q/w640-h180-p-rw/Cover-googleplus3.png' property='og:image'/>
</b:if>
</b:if>
<!-- Metatag Google Fine -->
in cui ovviamente sostituire i miei dati con i vostri. L'URL colorato di rosso è quello del logo del sito e si visualizzerà nei post condivisi che non abbiano foto. Un'altra importante configurazione che serve non solo per Google ma anche per Facebook e Twitter è la seguente
METATAG PER FACEBOOK
Per attivare i metatag per Facebook occorre innanzitutto creare una applicazione specifica per ogni blog su Blogger che amministriamo. Se ancora non lo avete fatto consultate il post su come mostrare il modulo dei commenti di Facebook limitatamente alla sezione che riguarda la loro moderazione. L'applicazione creata avrà un suo ID specifico così come il suo ID lo ha già il nostro Profilo. Potrebbe essere il nome e cognome, uno pseudonimo o un semplice numero. Se non lo conoscete aprite la pagina di Facebook e cliccate sul vostro profilo. L'ID sarà la parte finale dell'indirizzo.
I metatag di Facebook si incollano sempre sopra a </head> e sono i seguenti
<!-- Metatag Facebook Inizio -->
<meta content='https://www.facebook.com/parsifal32' property='article:author'/>
<meta content='parsifal32' property='fb:admins'/>
<meta content='866719113364708' property='fb:app_id'/>
<b:if cond='data:blog.pageType == "item"'>
<meta property='og:type' content='article'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://lh3.googleusercontent.com/-SMxI9TtqpKA/UiPB9AuUYKI/AAAAAAAAADo/Z7FdOnU3H3Q/w640-h180-p-rw/Cover-googleplus3.png' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta property='og:type' content='website'/>
</b:if>
<meta expr:content='"it_IT"' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- Metatag Facebook Fine -->
<meta content='https://www.facebook.com/parsifal32' property='article:author'/>
<meta content='parsifal32' property='fb:admins'/>
<meta content='866719113364708' property='fb:app_id'/>
<b:if cond='data:blog.pageType == "item"'>
<meta property='og:type' content='article'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://lh3.googleusercontent.com/-SMxI9TtqpKA/UiPB9AuUYKI/AAAAAAAAADo/Z7FdOnU3H3Q/w640-h180-p-rw/Cover-googleplus3.png' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta property='og:type' content='website'/>
</b:if>
<meta expr:content='"it_IT"' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- Metatag Facebook Fine -->
Insieme a questi metatag di Facebook se si vogliono aggiungere i vari plugin occorre inserire nel modello anche le API Graph che sono identiche al precedente Open Graph. La riga evidenziata di giallo serve per linkare il nostro profilo nei post condivisi su Facebook. I due dati evidenziati di verde sono invece gli ID rispettivamente del Profilo e della applicazione creata per il sito. L'URL in rosso è il logo e funziona come immagine di default per i post che non contengono foto.
Il corretto funzionamento della condivisione su Facebook può essere fatto con lo strumento Facebook Debugger. Si incolla l'indirizzo del post e si clicca su Debug
Il corretto funzionamento della condivisione su Facebook può essere fatto con lo strumento Facebook Debugger. Si incolla l'indirizzo del post e si clicca su Debug
Per una qualche ragione che non ho compreso bisogna attendere almeno una decina di minuti dopo la pubblicazione del post affinché Facebook Debugger rilevi le metatag. Una condivisione immediata sul social può portare a un articolo postato su Facebook senza immagini o senza snippet.
METATAG DI TWITTER
Per favorire la condivisione dei tweet che contengono un link al nostro sito dobbiamo attivare la Twitter Cards. Attraverso dei metatag o markup inseriti nel modello e tramite una loro validazione con un tool apposito di Twitter, sotto ai tweet con link al nostro sito si vedrà il link Riepilogo
Gli utenti che ci cliccheranno sopra visualizzeranno oltre al titolo del post anche la prima parte della descrizione inserita tramite l'Editor del post nelle Preferenze di ricerca e la miniatura della prima immagine presente nell'articolo. I metatag da incollare sempre sopra </head> sono
<!-- 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 == "index"'>
<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 != ""'>
<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/-SMxI9TtqpKA/UiPB9AuUYKI/AAAAAAAAADo/Z7FdOnU3H3Q/w640-h180-p-rw/Cover-googleplus3.png' name='twitter:image'/>
</b:if>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<!-- Twitter Card End -->
<meta content='summary' name='twitter:card'/>
<meta content='@ipcei' name='twitter:site'/>
<meta content='@parsifal32' name='twitter:creator'/>
<b:if cond='data:blog.pageType == "index"'>
<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 != ""'>
<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/-SMxI9TtqpKA/UiPB9AuUYKI/AAAAAAAAADo/Z7FdOnU3H3Q/w640-h180-p-rw/Cover-googleplus3.png' name='twitter:image'/>
</b:if>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<!-- Twitter Card End -->
dove sono stati inserito l'account Twitter dell'autore del sito e quello specifico del blog. L'altro parametro da modificare è quello della immagine di default che sarà mostrata nei tweet qualora non ce ne fossero nell'articolo. La card di Twitter scelta è la cosiddetta Summary Card. Con gli stessi metatag si può attivare anche la Large Image Summary Card tramite il tool Card Validator
METATAG DI PINTEREST
Anche Pinterest ha un sistema simile di metatag per attivare i cosiddetti Rich Pins. Contrariamente ai metatag visti finora quelli di Pinterest vanno incollati in un punto diverso del modello. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga
<b:includable id='post' var='post'>
quindi, subito sotto a questa, va incollato questo codice
<!-- Metatag Pinterest Inizio -->
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:post.title' property='og:title'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta property='og:type' content='article'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:post.author' property='article:author'/>
<meta expr:content='data:post.timestampISO8601' property='article:published_time'/>
<meta content='Technology' property='article:section'/>
<b:loop values='data:post.labels' var='label'>
<meta expr:content='data:label.name' property='article:tag'/>
</b:loop>
</b:if>
<!-- Metatag Pinterest Fine -->
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:post.title' property='og:title'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta property='og:type' content='article'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:post.author' property='article:author'/>
<meta expr:content='data:post.timestampISO8601' property='article:published_time'/>
<meta content='Technology' property='article:section'/>
<b:loop values='data:post.labels' var='label'>
<meta expr:content='data:label.name' property='article:tag'/>
</b:loop>
</b:if>
<!-- Metatag Pinterest Fine -->
L'unico parametro da personalizzare è quello colorato di rosso che indica l'argomento principale del sito in oggetto. Questo stesso codice può essere incollato anche subito dopo la riga
<b:includable id='mobile-post' var='post'>
per attivare i Rich Pins anche nella versione mobile se riteniamo che le nostre immagini possano essere condivise anche da dispositivi mobili. Dopo aver salvato il modello aprite la pagina del Pinterest Validator e incollate l'URL di un post (non Homepage) in cui sia presente una immagine
Quando un utente pinnerà una immagine del sito questa avrà a lato tutte le informazioni relative al nostro blog. È consigliabile anche verificare il blog su Pinterest per avere un backlink di rilievo.
Io ho provato a fare quello per Facebook ma non riesco proprio .Succede che quando vado a condividere mi da sempre la mia foto anziche' quella del post relativo ,sono giorni che provo a farlo ma niente di niente,mentre vedo altri blog tutti vanno bene .Come posso fare?
RispondiEliminaHai cambiato gli ID di questo sito evidenziati di verde? Spero di sì. Il tuo blog è questo?
Eliminahttp://ilmondodielisabetta.blogspot.it/2016/02/bocconcini-di-tacchino-con-zucchine-e.html
Prova a spostare il widget del tuo profilo nella sidebar di destra. In quella dio sinistra lasciaci widget senza immagini. Potrebbe essere quello il problema (non ne sono sicuro ma puoi provare)
@#
Attiva anche le Preferenze di ricerche di Blogger, quella è cosa molto importante
EliminaMETATAG DI GOOGLE+
Non inserire però i codici opzionali che trovi in quella sezione del post. Ho visto il tuo sorgente pagina e hai dei codici simili sotto a
< meta content='blogger' name='generator'/ >
che sono obsoleti ma che non dovrebbero dare fastidio
@#
Il problema sta che quando metto la condivisione tramite il post su facebook esce la mia foto anziche' la foto del piatto ad esempio :(
EliminaAppunto. Hai la tua foto come primo widget nella colonna di sinistra e forse Google e Facebook la privilegiano a quelle del post
Elimina@#
Ho provato tutto a destra ma esce sempre la mia foto ,quando condivido per google + esce il mio piatto mentre se vado a condividere il piatto per facebook esce la mia foto . Non so piu' come fare.
EliminaHo provato a analizzare il tuo post con
Eliminahttps://developers.facebook.com/tools/debug/
Prova anche tu. Dice che la tua app non è valida
http://i.imgur.com/Yc4qEeu.png
e nell'Anteprima si vede infatti il tuo volto, se non altro sei carina :))
@#
ecco e io come devo fare a far vedere il post con la foto corretta???? Devo rinunciare a Blogger ed emigrare?
EliminaForse hai fatto un errore nella creazione della applicazione Facebook. Segui questo post
Eliminahttp://www.ideepercomputeredinternet.com/2015/08/facebook-modulo-commenti-blogger-moderazione.html
limitatamente alla prima parte della sezione
COME INSTALLARE IL MODULO DEI COMMENTI DI FACEBOOK CON MODERAZIONE
in cui si spiega come creare una applicazione
@#
fatto ma niente :(
RispondiEliminaCiao Ernesto consigli di inserirli quelli di Gooogle?Io per ora hoinserito solo quelli di facebook
RispondiEliminaIn linea di massima quelli di Google vengono inseriti automaticamente in Blogger
Elimina@#
perfetto grazie mille...
RispondiElimina