Di solito, Facebook è abbastanza intelligente da saper raccogliere i dati giusti di ogni post condiviso sul social network. Tuttavia, non è una novità che ci sono un sacco di utenti che si lamentano del fatto che Facebook non mostra la giusta miniatura dell'articolo ogni volta che qualcuno lo condivide su Facebook o preme il pulsante Mi Piace. Se il link continua comunque ad essere funzionante, la vera preoccupazione è che non visualizzando l'immagine e mostrando un titolo o una descrizione errata si corre il rischio di non attirare l'utenza. In questo articolo, vi mostreremo come aggiungere gli open graph su Blogger per condividere correttamente link, immagini e descrizione su Facebook.
Facebook open graph meta
Prima di leggere il tutorial, è importante imparare le terminologie che sono più comunemente utilizzate negli open graph. Questo non solo vi aiuterà a capire gli attributi, ma potrebbe anche aiutarvi ad imparare il loro funzionamento.
og:title: questa condizione rappresenta il titolo dei post, del blog ecc.
og:url: questa condizione rappresenta l'url dei post, del blog ecc.
og:image: questa condizione rappresenta l'immagine che deve essere visualizzata su Facebook.
og:type: rappresenta il tipo di pagina. Ad esempio, nella homepage si usa mettere "Blog" e sulle pagine degli articoli si usa mettere l'attributo "articolo".
Adesso, proprio accanto al codice evidenziato dovete aggiungere xmlns: OG = 'http: //ogp.me/ns#' . Il risultato dovrebbe essere simile al codice postato qui sotto (non dimenticate di lasciare uno spazio tra questi due codici):
Dopo aver aggiunto la riga di codice in modo corretto nel modello, dovete inserire un nuovo codice contenente la proprietà dell'oggetto con gli attributi spiegati in precedenza. Dovete cercare il tag <head> ed incollare subito sotto il seguente codice e poi fare click sul pulsante "Salva modello":
In questo codice dovete modificare l'url del logo del vostro sito per visualizzare questa immagine nel caso in cui non ne sia presente nessuna dentro l'articolo.
Poi dovete inserire l'App ID, cioè l'ID dell'applicazione e l'ID del profilo Facebook, per sapere dove trovare entrambi gli id dovete leggere l'articolo su come creare un'applicazione su Facebook.
Se siete curiosi di sapere se tutte le operazioni eseguite abbiano risolto il problema potete utilizzare Facebook Debugger, incollando l'url del post e se vi appaiono gli open graph in modo completo significa che anche condividendolo su Facebook si vedrà correttamente.
og:url: questa condizione rappresenta l'url dei post, del blog ecc.
og:image: questa condizione rappresenta l'immagine che deve essere visualizzata su Facebook.
og:type: rappresenta il tipo di pagina. Ad esempio, nella homepage si usa mettere "Blog" e sulle pagine degli articoli si usa mettere l'attributo "articolo".
Come applicarli su Blogger
La prima cosa che dovete fare è accedere con il vostro account Blogger, poi andare su Modello > Modifica HTML e cercare l'attribuzione html evidenziata (questo codice è di solito presente nelle prime righe di codice del modello).
<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
Adesso, proprio accanto al codice evidenziato dovete aggiungere xmlns: OG = 'http: //ogp.me/ns#' . Il risultato dovrebbe essere simile al codice postato qui sotto (non dimenticate di lasciare uno spazio tra questi due codici):
<html xmlns:og='http://ogp.me/ns#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
Dopo aver aggiunto la riga di codice in modo corretto nel modello, dovete inserire un nuovo codice contenente la proprietà dell'oggetto con gli attributi spiegati in precedenza. Dovete cercare il tag <head> ed incollare subito sotto il seguente codice e poi fare click sul pulsante "Salva modello":
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://www.your-blog-logo.jpg' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='App-ID' property='fb:app_id'/>
<meta content='Facebook-Profile-ID' property='fb:admins'/>
In questo codice dovete modificare l'url del logo del vostro sito per visualizzare questa immagine nel caso in cui non ne sia presente nessuna dentro l'articolo.
Poi dovete inserire l'App ID, cioè l'ID dell'applicazione e l'ID del profilo Facebook, per sapere dove trovare entrambi gli id dovete leggere l'articolo su come creare un'applicazione su Facebook.
Se siete curiosi di sapere se tutte le operazioni eseguite abbiano risolto il problema potete utilizzare Facebook Debugger, incollando l'url del post e se vi appaiono gli open graph in modo completo significa che anche condividendolo su Facebook si vedrà correttamente.
