Perché adottare il protocollo Open Graph di Facebook
Con il sistema Open Graph possiamo comunicare molti dati che Facebook userà per creare l'anteprima della pagina all'atto della condivisione della stessa nel suo social network.
Inoltre, se volessimo lanciare uno sguardo al futuro, il protocollo Open Graph non vuole fermarsi qui, ma punta a diventare un meta linguaggio (alla stregua dei Schemi di schema.org) capace di offrire ai suoi destinatari dei meta dati utili a descrivere in maniera strutturata gli elementi presenti nella pagina. A detta della stessa pagina Open Graph - Facebook Developers:
The Open Graph lets apps tell stories on Facebook through a structured, strongly typed API.
Tradotto: L'Open Graph fanno sì che le applicazioni raccontino delle storie su Facebook per mezzo di API strutturate e fortemente tipizzate
Come applicare Open Graph al proprio sito
Usare questo protocollo nel proprio sito significa introdurre dei meta tags nella sezione <head> . Ad esempio per il presente articolo avremo:
<meta property="og:locale" content="it_IT"/>
<meta property="og:type" content="article"/>
<meta property="og:title" content="Guida pazzesca per tenere in ordine i documenti dentro al PC - Marco Panichi Blog"/>
<meta property="og:description" content="Guida su come tenere in ordine i documenti dentro al PC. Individua i macro contesti e i sotto-contesti. Aggiungi tasks e cartelle immanenti."/>
<meta property="og:url" content="http://www.marcopanichi.com/blog/guida-pazzesca-per-tenere-in-ordine-i-documenti-dentro-al-pc/"/>
<meta property="og:site_name" content="Perugia | Marco Panichi"/>
<meta property="og:image" content="https://www.marcopanichi.com/wp-content/uploads/2013/08/cover8-1.jpg"/>Open Graph di Facebook e validazione W3C: Bocciato!
Il problema è che l'introduzione di questi meta tags non piace al Validatore W3C il quale ci restituirà un errore simile al seguente:
Il messaggio è chiaro: non è permesso usare l'attributo property nell'elemento meta.
Di seguito fornirò tutte le soluzioni che si trovano in giro per il web oltre a segnalarvi la soluzione da me adottata e perchè.
Soluzione 1: Mettere da parte l'ansia da prestazione
Una prima soluzione, molto "zen", potrebbe essere quella di non curarsi degli alert del validatore in relazione agli open graph. Il validatore del resto è e dovrebbe rimanere un supporto allo sviluppo dei siti e non certo un limite fine a se stesso.
Inutile bloccarsi davanti al validatore quando il vero obiettivo di un sito web è comunicare con efficacia e fare gli interessi dell'azienda che rappresenta. Per cui parafrasando Dante: "Non ti curar di lor, ma guarda e passa"!
Soluzione 2: Cambiare l'attributo property in name
Ecco un esempio:
<meta name="og:title" content="Questo meta tag passerà la validazione!" />Sfortunatamente in questo modo sarà il validatore di Facebook a restituirci un errore:
Open Graph Warnings That Should Be Fixed
Inferred Property: The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
Usa un Doctype "XHTML-with-RDFa"
Con questo particolare doctype il tuo validatore vedrà di buon occhio l'attributo property, poiché Open Graph si fonda sul protocollo RDFa il quale prevede tale attributo.
Ecco la modifica da apportare:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">Inutile dire che mi sembra alquanto pazzesco luogo modificare il Doctype del proprio progetto solo per risolvere la questione Open Graph di Facebook e validazione W3C. Certo che anche tu sarai della stessa opinione, passiamo alla prossima ed ultima soluzione.
Soluzione 3: Dare i meta tags solo a Facebook
La soluzione qui esaminata è certamente poco elegante e pericolosa. Poco elegante perché si tratta di un walk around e in quanto tale ne faremmo sicuramente a meno. Pericoloso poiché potrebbe vincolare eventuali sviluppi futuri. Ora mi spiego. Il codice da inserire è il seguente:
if (stristr( $_SERVER["HTTP_USER_AGENT"], 'facebook' ) !== false) echo '
<meta property="og:title" content="Title of the page" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:type" content="website" />
<meta property="fb:admins" content="123456789" />
<meta property="og:image" content="http://www.example.com/images/thumb.jpg" />
';Come puoi notare lo sporco trucco non fa altro che servire i meta tags solo a Facebook, rendendoli invisibili a qualsiasi altro interlocutore. Open Graph di Facebook e validazione W3C: Promosso! Vittoria, giusto? No!
Il grande punto a sfavore di questa soluzione è che Facebook non è l'unico destinatario dell'Open Graph. Tanto per dirne una, anche Twitter usa gli Open Graph stando a quanto scritto nella pagina Twitter Cards and Open Graph:
If you're already using Open Graph to describe data on your page, it’s easy to generate a Twitter card without duplicating your tags and data. When the Twitter card processor looks for tags on your page, it first checks for the Twitter property, and if not present, falls back to the supported Open Graph property.
Tradotto: Se stai già usando Open Graph per descrivere i dati nella tua pagina, è facile generare una Twitter Card senza duplicare tags e dati. Quand il generatore di card di Twitter cerca un tag nella tua pagina, dapprima controlla la presenza di proprietà Twitter e se queste non sono presenti prende in considerazione le proprietà Open Graph.
La mia soluzione
Al fine di questa trattazione ti espongo la mia soluzione. La mia scelta di partenza è quella di non dare troppo peso ai meta dati Open Graph.
Per i meta dati nei miei siti tendo ad utilizzare i meta dati di Schema.org poiché li ritengo molto più dettagliati ed efficaci, soprattutto per quello che concerne l'ottimizzazione nei motori di ricerca. Stando a quanto scritto nello stesso sito di :
Search engines including Bing, Google, Yahoo! and Yandex rely on this markup to improve the display of search results, making it easier for people to find the right web pages.
Tradotto: I motori di ricerca, ivi inclusi Bing, Google, Yahoo! e Yandex, fanno affidamento su questa marcatura per migliorare la visualizzazione dei risultati di ricerca e rendere più facile per le persone trovare le pagine giuste.
Visto che la parte meta dati la sistemo (egregiamente direi) con Schema.org, posso lasciare ad Open Graph il compito di rendere il mio sito simpatico a Facebook ed eventualmente Twitter. Dunque applico la Soluzione 3 modificandola opportunamente per servire i meta tags anche a Twitter:
if (
stristr( $_SERVER["HTTP_USER_AGENT"], 'facebook' ) !== false
or stristr( $_SERVER["HTTP_USER_AGENT"], 'twitterbot' ) !== false
) echo '
<meta property="og:title" content="Title of the page" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:type" content="website" />
<meta property="fb:admins" content="123456789" />
<meta property="og:image" content="http://www.example.com/images/thumb.jpg" />
';Commenti? Soluzioni alternative?
La perfezione non esiste. Esistono soluzioni più o meno efficaci, questo si. Pertanto ti invito a condividere con me ed i lettori qualsiasi tuo parere in merito alla questione.
Quale soluzione adotti tu? Ritieni importante validare il sito al 100% o lasci correre? Hai provato ad applicare la mia soluzione ma qualcosa è andato storto? Invia un commento!
Buona validazione!
E’ praticamente l’articolo più completo sull’argomento! io pero me ne frego della validazione che sara mai qualche errore
Ciao Frankie,
Hai ragione, nel senso che la validazione deve essere uno strumento e non certo il punto d’arrivo. Se il validatore segnala qualche errore non c’è da preoccuparsi sulla qualità generale del sito.
Al tempo stesso – secondo la mia opinione – hai torto, un po\’ per quello che ho anche scritto a HiTech sul commento sopra, un po\’ perché nella ricerca della perfetta validazione si imparano spesso molte cose. Insomma, può essere un momento importante da non sottovalutare!
si si certo…
i0 non ho capito perchè quando valido mi dasempre un miliardo di errori
Ciao HiTech,
Molto spesso da un errore di validazione ne derivano tanti altri. Per cui il mio consiglio è: armati di pazienza e risolvi i problemi ad uno ad uno PARTENDO DAL PRIMO.
Ad ogni errore che risolvi, RIVALIDA nuovamente. Vedrai che già risolvendo il primo errore segnalato la lista si snellirà considerevolmente.
Infine, ricorda che un sito validato è un prodotto che puoi consegnare al cliente con l’animo tranquillo, mentre un sito non validato è un po\’ come vendere un’auto che non ha passato la revisione, non so se mi spiego…
Ciao Marco,
il post è molto chiaro anche per chi non mastica bene il linguaggio HTML come me. Nonostante questo però avrei delle domande da farti per favore.
Provo a scriverti in privato e spero di non rubarti troppo tempo.
Grazie Moira
Salve Moira, sono felice che il mio post possa risultarti utile.
Ho letto il tuo messaggio ma preferisco risponderti qui (omettendo i dati personali ovviamente) affinché la soluzione possa essere fruibili anche da altri che possano avere la tua stessa esigenza:
— INSTALLARE GLI OPEN GRAPH SU BLOGGER —
In realtà il mio post non parla di questo, per cui lascia perdere il codice del post e invece prova la seguente soluzione
— CODICE DA INSERIRE —
--- DOVE INSERIRE IL CODICE ---
Dopo l'apertura del tag e prima della sua chiusura ()
--- FONTE ---
Purtroppo non ho trovato un articolo in italiano di riferimento, per cui sono andato a cercare in inglese (come faccio di solito per le mie ricerche di lavoro). Il codice soprastante l'ho preso da qui:
http://support.addthis.com/customer/portal/articles/1399895-adding-open-graph-tags-using-blogger#.UtfexPQpKi4
Anche questo articolo è molto completo:
http://www.simplebloggertutorials.com/2011/07/add-open-graph-protocol-meta-tags-to.html
Facci sapere com'è andata!
Marco
Ciao Marco,
niente da fare purtroppo :(. Se provo a fare il link a un post del mio blog (www.mammamoi.it) sulla mia pagina FB l’immagine del post non viene caricata.
Alcune cose sono state risolte ma quando faccio il debug rimangono questi errori:
1. Inferred Property The ‘og:image’ property should be explicitly provided, even if a value can be inferred from other tags.
2. og:image should be larger Provided og:image is not big enough. Please use an image that’s at least 200×200 px. Image ‘http://lh4.googleusercontent.com/-eX3Vc5CumUU/AAAAAAAAAAI/AAAAAAAAB6k/-VdhtZUv7YM/s512-c/photo.jpg’ will be used instead.
3. Parser Mismatched MetadataThe parser’s result for this metadata did not match the input metadata. Likely, this was caused by the data being ordered in an unexpected way, multiple values being given for a property only expecting a single value, or property values for a given property being mismatched. Here are the input properties that were not seen in the parsed result: ‘go:title’
I punti 1 e 3 non so proprio come risolverli. E ho qualche perplessità anche sul 2 perché le dimensioni delle immagini che utilizzo sono tutte 320×240 px.
Grazie comunque delle indicazioni!!
Ciao Moira
Salve Moira,
Il debbugger di Facebook è notoriamente capriccioso e per alcuni aspetti è necessario “accettare il mistero”. L’importante è che quando vai a condividere tutto sia ok.
Per cui il mio consiglio è: lascia perdere il debugger per un attimo e testa la condivisione su facebook di 5 dei tuoi articoli.
Io ne ho provato uno (Idee Regalo per la Neo Mamma). Nel post si vede la foto (OK), il titolo (OK) mentre nella breve descrizione vedo scritto:
TEMPLATE ERROR: LHS of numeric is null before 8 in mammamoi TEMPLATE ERROR: LHS of numeric is null before 22 in mammamoi
Quindi cercherei di risolvere questo se fossi in te per risolvere nel BREVE TERMINE.
Per risolvere invece nel MEDIO-LUNGO TERMINE hai più problemi, perché il tuo template attualmente (almeno ad una prima veloce analisi) è un po\’ “disastrato” (da cui la grande lentezza della pagina) Il mio consiglio è di avviare una collaborazione con un webmaster di fiducia nella tua zona che ogni tanto ti dia una riordinata al sito e ti insegni come procedere da sola. Alla lunga ti conviene in termini di tempo e di capacità tue, visto e considerato che ti piace mettere mano al codice
Ciao Marco,
Ieri ho letto la tua risposta a lavoro e non ti dico che ansia – visto che non mi ero accorta di aver combinato un disastro -.
Ti ringrazio tanto. Sto seguendo i tuoi consigli ALLA LETTERA!
Sei stato molto gentile x tutto!
Buon proseguimento!
Ciao Moira
Bene che hai risolto. Non ti ansiare però!
Buon proseguimento a te 🙂
Ciao
Ciao Marco,
Ti scrivo per segnalare un mio grosso problema con Facebook.
Mi spiego: Gestisco insieme ad altri il blog di informazione secondopianonews.com basato su WordPress (Canvas Tema di Woothemes v5.5.7 e prima la versione 5.1).
Ad ogni articolo che pubblico cerco di condividere sui Social attraverso il plugin AddThis.
Su Twitter, Google + e altri social condivido senza problemi, quando invece cerco di condividere con Facebook nella maggior parte dei casi appare una serie di caratteri e simboli strani. Puoi provare tu stesso.
I tentativi che abbiamo fatto per tentare di risolvere il caso sono stati tanti e purtroppo tutti senza successo. Uso alcuni plugin tra cui SEO by Yoast ma spiegherò sotto che non c’entra col problema. e nemmeno il tema usato.
LE COSE CHE HO TENTATO DI FARE PER RISOLVERE:
1) Ho provato a cambiare tema, attivando quelli di default (Twenty Fourteen e altri). Il problema è rimasto. Quindi di conseguenza ho escluso che il problema fosse riconducibile al Canvas, come dicevo prima.
2) Ho provato ad aggiornare con diverse versioni di WordPress precedenti all’attuale 3.9.1 (3.7, 3.8 e 3.9). Niente.
3) Ho provato a disattivare TUTTI i plugin (compreso AddThis e il Yoast dov’è c’è l’opzione per l’Open Graph di Facebook) ma il problema non l’ho risolto.
4) Ho provato a cambiare i permalink per tutte le opzioni disponibili, compreso inserire e togliere lo “/” finale e/o aggiungere l’estensione “.html”. Niente.
5) Ho provato a inserire i link dei posts direttamente su Facebook (compresi gli shortlink). Nulla
6) Ho provato a modificare il file function.php del tema con codice reperito online scritto da sviluppatori, ma niente.
7) Ho inserito uno dei link “incriminati” sul DEBUG di Facebook e restituisce il seguente errore: “Object at URL ‘http://www.secondopianonews.com/6064/rassegnati/maturita-prova-ministri-politici-boschi-renzi-presero-massimo’ of type ‘website’ is invalid because a required property ‘og:title’ of type ‘string’ was not provided.”
Nella condivisione la schermata è la seguente: “Ks9(nE?`hӚfÔGefXrt;`H.VU׃qYp7nV7Ή;qv/3zEId}nD”3d&˽I8w=θ_qpb/F_r[P*j5wU’wh86-0-;!g K%V7m
Salve Moira,
intanto vorrei dirti che:
– htaccess non dovrebbe avere un ruolo nella vicenda per cui stai tranquilla se non hai effettuato modifiche qui
– il debugger di facebook è noto per i suoi sfarfallamenti quindi prendi con le pinze i suoi messaggi di errore
————————————————
Ciò premesso, ho effettuato qualche test e ho scoperto che:
1) come dici tu, qualche articolo si condivide bene mentre altri danno il problema da te riportato
2) se ricondivido lo stesso articolo varie volte il risultato è lo stesso. Quindi non si tratta di una “bizza” temporanea ma di qualche effettiva differenza tra articolo GIUSTO (cioè che si condivide bene) e articolo SBALLATO
3) se condivido dal sito o inserendo il link direttamente su Facebook ho lo stesso risultato quindi non è problema del sistema di condivisione del sito ma del contenuto della pagina
————————————————
Pertanto mi sembra cruciale capire che differenza c’è tra gli articoli che vengono condivisi bene da quelli che vengono condivisi male. Farei questa prova:
1) Apri 10 articoli
2) Per ogni articolo apri il sorgente della pagina
3) Per ogni articolo fai click sul pulsante condivisione
4) Fai una tabella con le colonne: titolo articolo | url | title | description
Dovrebbe saltar fuori il problema!
————————————————
Effettuando questa prova su qualche articolo, così a occhio senza fare tabelle, ho notato che:
– articoli con titolo corto si condividono bene
– articoli che nel title hanno l’apostrofo (tradotto con il codice ') si condividono male
– doppie virgolette (che vengono tradotte con il codice ") non danno problemi
————————————————
Quindi il problema potrebbe essere:
– sistema di accorciamento del titolo da parte di facebook [soluzione: accorciate gli url]
– presenza di codici ascii ' nel title o description [soluzione: scoprite la parte di codice che genera title e description e modificatela affinché traduca opportunamente gli apostrofi]
————————————————
Infine, dando una controllata al sito ho notato che:
1) il vostro sito ha moltissimi errori di validazione (oltre 100); investire tempo per dare una ripulita qui non sarebbe male. Ecco la lista completa degli errori: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.secondopianonews.com%2F5690%2Fpost-it%2Fquesta-ue-nazismo-pianificato-morte-distruzione-uscire-dal-tunnel-si-puo-tornando-sovranita-monetaria&charset=%28detect+automatically%29&doctype=Inline&group=0
2) siccome usate i meta article () dovreste avere nel tag html questa definizione:
Anziché la vostra attuale:
per ulteriori informazioni a riguardo:
https://developers.facebook.com/docs/reference/opengraph/object-type/article
————————————————
Spero di esserti stato d’aiuto!
Grazie Marco,
proveremo i passaggi da te suggeriti sulle tabelle. Ci vorrà del tempo.
Intanto abbiamo scritto anche al supporto di Facebook per chiedere lumi perché la condivisione fino a qualche mese fa andava bene anche con titoli lunghissimi e accentati, apici ecc.
In ogni caso non escludo sia questo il problema. Esiste un modo o plugin per tradurre gli apici?
Sarà un problema di Permalink?
Ti faccio questa domanda perché cambiandoli in prima battuta condivide bene, salvo poi tornare al punto di partenza. Con l’estensione “.html” (o altre) risolvo, ma poi in molti nuovi post il problema si ripresenta. Altro esempio: se provo a togliere lo “/” finale o rimetterlo (operazione svolta direttamente su facebook) a volte un lieve cambiamento ce l’abbiamo, ossia a video appare solo il nome del sito ma senza quei caratteri strani.
Ho fatto pure alcune prove su url corti (levando apici, virgolette doppie e vocali accentate) ma il risultato è sempre lo stesso.
Solo in un caso postando un articolo in test col titolo “Test condivisione” è andato bene. Facendone un altro “Prova share facebook”, no.
Un brutto grattacapo…
In attesa di fare le prove con le tabelle da te consigliate puoi darmi per favore dritte per automatizzare la correzione degli errori e validazione w3? Ovvero dove bisogna intervenire manualmente per togliere gli errori in rosso tipo > & eccetera?
Grazie mille, Moira
Purtroppo in entrambi i casi non puoi avvalerti di plugin, si tratta di problemi a livello di codice.
Per il problema degli apici dovete:
1) capire dove vegnono generati i valori TITLE e DESCRIPTION (plugin? tema? functions.php?). questo lo capisci attivando-disattivando i singoli elementi.
2) entrare nel codice e cercare il punto esatto dove vengono generati title e description
2) agire LI’ per correggere il comportamento con varie prove e test
Per superare la validazione serve affrontare i problemi uno ad uno, sempre a livello di codice. Solitamente poi si scopre che risolvendo anche un semplice tag, molti altri errori vengono corretti. Sicuramente è una cosa da fare con calma quando avrai risolto “l’emergenza” condivisione.
Grazie per la risposta, ho in parte risolto impostando i Permalink su “/archives/%post_id%”.
In larga parte condivide, solo con qualche posts dà problemi. Leggo su qualche forum che questa impostazione potrebbe dare problemi di indicizzazione, ma meglio in questo modo che com’era prima.
Aspettiamo la prossima versione di wp e vedremo se regge.
Lavoreremo sul resto, come pure sulla validazione
Grazie ancora
Riapro questa discussione per segnalare un utente (appartenente ad un gruppo Facebook) che ha risolto disabilitando le funzioni OG (open graph) di Yoast sotto il tab Facebook del medesimo plugin.
Grazie Marco,
Allora, la spunta Open Graph nel Seo di Yoast è da tempo disabilitata. Non abbiamo risolto granché dopo le ultime nostre discussioni.
Dopo aver cambiato ripetutamente le impostazioni dei permalink (che in parte ci aveva risolto il problema) ci eravamo di nuovo risollevati trovando una dritta (del 2010) sul web che a proposito del bug consigliava di inserire la seguente stringa nel file content.php del tema: .
Su 10 post ne condivideva 10. Perfetto!
Pensavamo di aver risolto. Ma dopo qualche giorno, postando nuovi articoli il problema è ricomparso. Abbiamo scritto più volte a Facebook senza ricevere risposta.
Non capiamo perché gioca questo brutto scherzo. Non è un problema di tema. L’abbiamo testato su tutti quelli di default e il problema resta.
Allo stato attuale abbiamo installato “Social Graph Protocol” sempre con la stringa citata sopra presente nel tema. Su 10 ne condivide 3 al massimo 4. Gli altri sempre con quei caratteri strani. Un po’ meglio di prima. ma poco. Siamo stati obbligati a togliere i pulsanti FB sotto i posts, sia il mi piace, che lo share
Grazie mille per la disponibilità. Se trovi un modo facci gentilmente sapere.
Moira
E’ disarmante come a volte si creino problemi PAZZESCHI che rimangono irrisolti anche per molto tempo.
Posso dire lo stesso per il mio sistema Disqus che non si vuol integrare con la dashboard di WordPress. Pure inviando database e dati di accesso ai programmatori di Disqus siamo venuti a capo di qualcosa!
Sembrerebbe quasi che l’unico modo di superare il problema sia tener duro e arrivare al prossimo restyling. Chiaramente ti segnalerò qualsiasi idea possa saltar fuori nel frattempo.
A presto,
Marco
Ciao marco, ho un sito in WordPress plugin Sharethis e quando vado a condividere un articolo su Facebook, l’immagine in evidenza è sempre il logo del sito e mai l’immagine scelta in evidenza! come mai secondo te? grazie mille,
Matteo.
ciao Matteo, benvenuto sul blog 🙂
Facebook decide da solo quale immagine caricare nelle condivisioni, a meno che tu non gli “consigli” immagini alternative a tuo piacimento. Dico consigli perché in ogni caso non avrai mai potere al 100% sulle immagini che lui vorrà usare per le condivisioni.
Quindi ecco le risorse che ti consiglio:
> PLUGIN WORDPRESS SEO by YOAST: plugin “classicone” per il seo, che però ha anche una sezione dedicata all’interazione con Facebook. Attivando questa parte del plugin (opzione Open graph mi pare) ogni immagine del post sarà “consigliata” a facebook. Per installarlo, vai sul tuo WP > Bacheca > Plugin > Aggiungi nuovo
> DEBUGGER DI FACEBOOK: questo tool ti permette, inserendo un link, di vedere le informazioni che facebook “vede” nella pagina e che poi utilizzerà per condividere il link stesso. E’ uno strumento fondamentale per comprendere cosa FB vede e cosa non va (evidenzia anche eventuali errori infatti). Per usarlo vai qui: http://developers.facebook.com/tools/debug
Fammi sapere se risolvi!