CONDIVIDI
Open Graph

Se frequenti per un po' di tempo dei blogger che si occupano a tempo pieno di argomenti che non hanno nulla a che fare con Web Marketing, Social Media, SEO e tutti quei noiosissimi argomenti di cui si parla in questo blog, prima o poi ti capiterà di sentirti rivolgere la tipica domanda:
«Perché quando condivido un mio articolo Facebook non mette l'immagine che voglio io?»,
oppure:
«Avevo inserito una descrizione del mio articolo, ma ne vedo un'altra: che cosa è successo?».

Il protocollo Open Graph

Tutte queste cose accadono, di solito, se sul tuo sito o blog non è impostato correttamente il protocollo Open Graph di Facebook.
Che cos'è il protocollo Open Graph?
Non è altro che una serie di marcatori semantici utilizzati da Facebook per "leggere" una pagina web alla ricerca delle informazioni che riguardano il suo contenuto.
Detta in soldoni, quando Facebook si imbatte in una nuova pagina web, va alla ricerca di queste informazioni e le salva nei propri database: in questo modo, ogni volta che qualcuno condividerà quella stessa pagina sul suo profilo o sulla sua pagina il Social Media più diffuso al mondo non dovrà tornare sulla pagina per leggere le informazioni che gli servono, ma attingerà solamente ai dati in proprio possesso.
Secondo la documentazione ufficiale, Facebook rileggerà la tua pagina ogni 24 ore alla ricerca di modifiche o aggiornamenti; in assenza di questi, continuerà ad utilizzare le informazioni nelle proprie disponibilità.

Come utilizzare correttamente il protocollo Open Graph

E se queste informazioni non ci sono?
In quel caso, Facebook pescherà un po' a caso (me lo consentano i puristi) andando a cercare le informazioni dove ci sono, sulla pagina o nel proprio database. Avremo così tutti gli articoli illustrati da una stessa immagine, descrizioni a volte sballate, titoli diversi da quelli che ci aspetteremmo.
Utilizzare il protocollo Open Graph è relativamente semplice e non richiede grandi conoscenze di programmazione.
il protocollo open graph
Se si volesse agire per proprio conto, la cosa da fare sarà di inserire nel proprio codice html, tra i tag <head>...</head> istruzioni come le seguenti:

<meta property="og:title" content="Facebook Open Graph: come impostarlo" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.fabiopiccigallo.com/2015/07/03/facebook-open-graph-wordpress-blogger" />
<meta property="og:image" content="http://www.fabiopiccigallo.com/wp-content/uploads/2015/07/facebook-open-graph.png" />
<meta property="og:description" content="Utilizzare il protocollo Open Graph è meno difficile di quanto possa sembrare. Ecco una breve guida all'implementazione di Facebook Open Graph sul proprio blog" />

Una documentazione completa e aggiornata sull'Open Graph Protocol è disponibile qui.

Utilizzare Open Graph in WordPress con SEO Yoast

Se si utilizza un CMS come WordPress in modalità self-hosted, naturalmente, la semplificazione è dietro l'angolo, ed è alla portata di tutti. Vi sono infatti numerosi plugin utili allo scopo di scrivere in modo automatico o semi-automatico i tag del protocollo Open Graph sulle pagine dei nostri articoli.
Dato che però quasi sicuramente hai installato Seo Yoast sul tuo blog (e se non lo hai fatto, dovresti), perché non lo utilizzi anche a questo scopo?
Impostarlo è molto semplice.
Il passaggio più importante è quello di accedere alla scheda "Social" e attivare la checkbox che consente a Yoast di inserire per tuo conto i tag nella sezione <head> del sito:
Facebook Open Graph: come impostarlo su WordPress e Blogger
In questo modo, ti sarai già assicurato che l'immagine in evidenza, il titolo e la descrizione del tuo articolo siano trasmesse correttamente a Facebook utilizzando il protocollo Open Graph.
Ma non basta.
Yoast ti permette infatti un controllo totale di ciò che accade sui Social Media. In ogni articolo avrai infatti la possibilità di sovrascrivere le informazioni standard con altre create specificamente per Facebook:
Facebook Open Graph: come impostarlo su WordPress e Blogger
Comodo, no?
Attenzione, però: se l'immagine non è sufficientemente grande, Facebook Open Graph la ignorerà, preferendovi un'immagine più confacente ai suoi requisiti. Per verificare se ci sono problemi in questo senso, basterà andare sull'URL debugger di Facebook e rifare lo scraping della pagina incriminata. Se troverete un messaggio come questo:
non avrete altra scelta, se non di ridimensionare l'immagine incriminata o di sostituirla.

E se uso blogger?

Il protocollo Open Graph non è disponibile solamente per chi utilizza WordPress in soluzione Self-Hosted.
Vediamo il caso di Blogger, il diffusissimo CMS di casa Google.
Per inserire il protocollo Open Graph nelle pagine del tuo blog ospitato da blogger dovrai effettuare due semplici operazioni.
La prima consiste nell'effettuare una piccola modifica nei settaggi base del tuo tema.
Vai allora su Modello nel menu laterale, e clicca su Modifica HTML:
Facebook Open Graph: come impostarlo su WordPress e Blogger
Una volta entrato su questa pagina, non ti spaventare!
Guarda la sezione precedente il tag <head> del codice, proprio all'inizio.
Vi troverai più o meno questa situazione:
Sarà all'interno del tag evidenziato che dovrai inserire il namespace di Facebook, per consentire l'elaborazione degli Open Graph.
A questo scopo, il tag <html... > andrà modificato aggiungendo alla fine (prima della ">" di chiusura) la seguente istruzione (attenzione alle virgolette e agli apici e, soprattutto, a utilizzare solo apici dritti, e non quelli curvi):
xmlns:og='http://ogp.me/ns#'
Il tuo codice diventerà quindi come il seguente:
A questo punto, Blogger sarà pronto ad elaborare i tag Open Graph.
Per farglielo fare effettivamente, rimani sulla stessa pagina, e spostati un pochino più avanti, fino a trovare il tag </head>.
Sarà lì, subito prima di questo tag, che dovrai inserire i tag Open Graph veri e propri, copiando e incollando il seguente codice:

<!-- Open Graph Meta Tags BEGIN -->
<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:if>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<!-- Open Graph Meta Tags END -->
 Facebook Open Graph: come impostarlo su WordPress e Blogger
Se hai fatto tutto bene, Open Graph comunicherà a Facebook titolo, descrizione e immagine da te impostate per ogni articolo.
Semplice, no?

E se usi wordpress.com?

Se hai scelto di aprire un blog e di farti ospitare presso wordpress.com ho una cattiva notizia per te: a quanto posso leggere nei forum dedicati, non esiste attualmente alcun modo per inserire i tag Open Graph sul tuo sito.
Puoi solamente utilizzare l'URL debugger di Facebook di volta in volta e sperare che Facebook corregga le informazioni in tuo possesso.
La scelta migliore che tu possa fare, a mio parere, è quella di passare ad una soluzione Self-Hosted, per avere il massimo controllo del tuo sito. Ma questa, ovviamente, è un'altra storia.
PS: Amici di #adotta1blogger: questo articolo è ovviamente dedicato a voi...

CIAO! Grazie per essere arrivato a leggere fino a qui.

Porto avanti questo blog solo per passione, senza voler fare altro se non avviare un confronto con chi condivide con me l'interesse per tutto ciò che è marketing. Se ti è piaciuto questo post, la soddisfazione più grande che potrai darmi sarà quella di condividerlo sui social media e di lasciare un tuo commento.

Se poi vuoi rimanere sempre aggiornato, iscriviti subito alla newsletter!

Inserisci qui il tuo indirizzo e-mail:

Delivered by FeedBurner

18 COMMENTS

  1. Ottimo! Visto però che da quanto capisco, su WP lo fai con un clic, aspetto di essere di là ed evito di maneggiare il codice blogger che è sempre un casino 🙂

  2. Complimenti per la chiarezza della tua esposizione! Una dote difficile da trovare, saperne e saperne parlare a chi non ne sa!

  3. BRAVISSIMO, ho cercato per giorni le informazione relative a blogger che dai su questa pagina(,naturalmente io non sono un esperto) cercavo dove e come introdurre su blogger i meta per immagine descrizione,titolo,ect tutti riportavano i suddetti codici ma non dicevano dove e come metterli.
    Bravissimo ancora e sei fra i miei preferiti
    Ciao e buon lavoro

  4. Ciao
    Ho provato a seguire le tue indicazioni sul mio blog http://my-way-online.blogspot.it ma non ho risolto il problema: non riesco più da qualche settimana a visualizzare l’anteprima delle immagini su Facebook
    Se condivido post di qualche settimana fa, tutto funziona normalmente.
    Ho come l’impressione che sia Zuckerberg ad aver cambiato qualcosa… o sbaglio?
    Hai qualche suggerimento?
    Grazie

    • Non credo. Piuttosto: sei sicuro che le immagini che stai cercando di impostare per la condivisione siano rispondenti ai requisiti di Facebook, soprattutto per quanto riguarda le dimensioni?

LEAVE A REPLY