Inserire Open Graph su WordPress, meta data per i Social Network
Facebook ha introdotto l’Open Graph Protocol, ovvero un protocollo che permette di integrare le pagine web all’interno di quello che oggi viene definito il Social Graph, un diagramma virtuale di interconnessione tra gli “attori”, ovvero le persone, le pagine fan, i gruppi sociali che si trovano nei social network.
L’ Open Graph serve nella pratica a dire ai social network come Facebook, Linkedin, quali sono le informazioni che devono sapere della pagina attuale (dove solitamente sono presenti i pulsanti di condivisione come il Mi Piace o il pulsante +1). Ad esempio si può impostare cosa mostrare nella anteprima di condivisione (quello che compare una volta che premi il tasto Mi Piace), come l’immagine, la descrizione della pagina, il titolo, il tipo di contenuto.
Per un approfondimento sull’Open Graph ti rimando alla pagina di Facebook in inglese.
Visto che al giorno d’oggi questi metadata sono molto importanti, vediamo come implementarli su WordPress:
Inserire Open Graph su WordPress
Per aggiungere i meta data utilizza il plugin Facebook Open Graph Meta (se hai installato il plugin WordPress SEO by Yoast, è molto meglio avere solo quest’ultimo), davvero un plugin molto semplice adatto a tutti, basta attivarlo senza configurare niente e fa già il suo lavoro egregiamente.
Le sue funzionalità sono:
- inserisce automaticamente i meta data Open Graph in tutti i post o pagine del blog WordPress
- sceglie automaticamente l’immagine da mostrare nell’anteprima
- puoi impostare un’immagine di default da utilizzare el caso non ci sia un’immagine nel post
- ottime spiegazioni su come impostare (se si vuole) l’AppID e Admins.
I meta data Open Graph inseriti dal plugin nei post e nelle pagine saranno del tipo (per la mia pagina Come inserire pulsante Mi piace e Tweet sul sito o blog):
<meta property="og:title" content="Come inserire pulsante Mi piace e Tweet sul sito o blog"/> <meta property="og:type" content="article"/> <meta property="og:url" content="https://www.robertoiacono.it/come-inserire-pulsante-mi-piace-e-tweet-sul-sito-o-blog/"/> <meta property="og:site_name" content="robertoiacono.it"/> <meta property="og:description" content="Leggi altri articoli interessanti Come inserire i pulsanti Mi piace, Google +1 e Tweet su una sola riga I pulsanti dei social network sono diventati davvero importanti per la vita di un blog, l'utente è sempre più propenso a... Conoscere … Continua a leggere →"/>
Una volta installato il plugin, per verificare il corretto inserimento dei meta data, vai al Debugger di Facebook ed inserisci l’url del post da controllare, ti verranno forniti tutti i dati.
28/10/2011 alle 14:51
Salve roberto,
trovo interessante il tuo articolo anche perchè sto “combattendo” con le specifiche open graph da un pò di tempo. Avrei due quesiti precisi:
1) Parli di aggiunta automatica dei meta dati per i post e le pagine. Ma per la home page vale lo stesso discorso?
2) Sei sicuro che i meta data open graph valgano anche per Google+? Facendo vari test non riesco a fargli prendere la description
Grazie mille a prescindere
28/10/2011 alle 17:37
Ciao Stefano,
scusa ma ho cambiato il plugin, usa Facebook Open Graph Meta ! Nella home non imposta nessun meta data per la descriptio, questa è l’unica pecca (ma sicuramente l’autore aggiornerà questo bug)…
Riguardo a Google+, mi devo correggere, Google+ utilizza gli attributi Schema.org, se non ci sono, utilizza l’Open Graph Protocol, ho approfondito l’argomento qui.
Ciao
31/10/2011 alle 16:21
Grazie Roberto, ho risolto per intero con Facebook open graph meta. Anche la condivisione della home page ora funziona. E ti aggiungo che il discorso della description per quest’ultima è comunque risolvible. Facendo vari test mi sono accorto che basta inserire alla voce “Motto” sotto Impostazioni -> Generale le righe che si vogliono far uscire nell’anteprima
Per quanto riguarda Google plus il mio tema prevedeva già il button e utilizza questo tipo di specifica, completamente diverso da ciò che mi hai linkato (ma comunque utile)
g:plusone
Inizia la “lotta” con Google+ 😉
31/10/2011 alle 18:22
Buona lotta allora 🙂 Grazie per la precisazione!
28/10/2011 alle 20:42
A quanto pare sia worbress che blogger stanno puntando ad una revisione dei loro layout al fine di rendere i design più piacevoli.
29/10/2011 alle 07:18
Ciao Roberto, sbaglio oppure come è ottimizzato il mio blog non è necessario?….in effetti è già tutto così, anche se non c’è il plugin che tu consigli….oppure non ho capito nulla 😉
31/10/2011 alle 18:20
Ho visto che hai aggiunto il plugin, prima non avevi questi meta data, avevi i classici meta data dell’html…
30/10/2011 alle 11:29
[…] Inserire Open Graph su WordPress, meta data per i Social Network Facebook ha introdotto l’Open Graph Protocol, ovvero un protocollo che permette di integrare le pagine web all’interno di quello che oggi viene definito il Social Graph, un diagramma virtuale di interconnessione tra gli “attori”, ovvero le persone,… Source: www.robertoiacono.it […]
08/11/2011 alle 13:52
[…] è possibile automatizzare il tutto grazie al plugin Facebook Open Graph Meta, come spiego in Inserire Open Graph in WordPress. L’unica pecca/bug che ho riscontrato è che la descrizione che viene mostrata nello snippet […]
27/11/2011 alle 19:10
Ciao Roberto! Cosa mi puoi dire di questo plug-in http://wordpress.org/extend/plugins/social-graph-protocol/
Io lavoro su WordPress MU
02/12/2011 alle 02:50
Ciao Leandro,
il plugin l’ho appena testato, il codice mi sembra ok e pulito. Anche le impostazioni sono complete e personalizzabili in toto, compresa l’immagine di default e il Facebook ID… un buon plugin direi! Ti ringrazio.
16/11/2012 alle 19:59
[…] utilizza l’Open Graph per ricavare delle informazioni importanti del post, come il titolo, la descrizione, […]
22/11/2012 alle 19:48
Vorrei capire come cambiare le info che posso visualizzare attraverso il debug di Facebook.
il mio problema è che le info e la foto (ormai nella cache di fb) non sono più adatte al sito. quindi accade che se metto il link del mio sito mi esce una foto e le descrizione vecchia. Come posso rimediare? il mio sito è realizzato con wordpress.
Grazie
23/11/2012 alle 09:44
Ciao Alessio,
ogni volta che testi una pagina con il debug di facebook, la cache di facebook viene cancellata! Quindi non dovresti vedere le vecchie immagini, bensì quelle nuove.
Perciò, penso sia un tuo problema di codice, nel senso che non hai impostato bene le nuove immagini e descrizioni.
Prova a controllare il codice.
23/11/2012 alle 12:30
Buongiorno Roberto,
invece anche dopo aver fatto il debug mi ritrovo sempre le stesse descrizioni e foto, anche se nel mio sito wp non esistono piu quelle foto e quelle descrizioni. Mi puoi dare una mano a capire?
Grazie
23/11/2012 alle 23:13
Magari non esistono più in quella pagina, ma sono rimaste sul tuo spazio web.
Io proverei a:
26/11/2012 alle 10:55
Ho fatto tutto quello che mi hai scritto, tranne quello di controllare il codice og, semplicemente xkè nn so dove controllare. Mi puoi dare qualche suggerimento sul file da controlallare? grazie
26/11/2012 alle 14:38
Se hai usato il plugin, dovresti controllare il plugin. Il risultato, lo trovi nel sorgente della pagina web, quindi clicca col destro sulla pagina web, e poi clicca su HTML oppure Sorgente pagina.
06/12/2012 alle 10:37
Ciao Roberto, grazie al tuo aiuto sono riuscita ad avere una anteprimasu FB della home del mio sito come la volevo, in tutto tranne che per la foto, infatti il debugger mi dice ”
Inferred Property: The ‘og:image’ property should be explicitly provided, even if a value can be inferred from other tags.”
Come faccio ad indicargli quale foto voglio usare? grazie mille
06/12/2012 alle 10:48
Dai che ci sei quasi! Il plugin lo fa in automatico, puoi anche impostare una immagine di default per i post senza immagini.
Guarda anche questo articolo: https://www.robertoiacono.it/cambiare-lanteprima-di-un-post-da-condividere-su-facebook/
Oppure se installi WordPress SEO by Yoast, fa tutto lui in automatico. (ma è un mega plugin)
06/12/2012 alle 11:11
infatti il mio problema non è per i vari post, lì sono soddisfattissima così, ma solo nella home. Ho letto l’altro articolo e in base alla tua descrizione ho il il tag html da inserire pronto con l’anteprima della foto che voglio, per modificare SOLO l’anteprima della home dove lo metto? [scusa la tontaggine 🙂 ]
06/12/2012 alle 11:34
Nel file header.php, prima di e devi mettere il controllo php, sarà una cosa del genere:
INIZIO_PHP if(is_home()) : FINE_PHP CODICE INIZIO_PHP endif; FINE_PHP
Poi al posto di INIZIO_PHP e FINE_PHP ci metti i relativi tag. (mi tagliava il codice altrimenti)