Inserire Open Graph su WordPress, meta data per i Social Network

Inserire Open Graph su WordPress, meta data per i Social NetworkFacebook 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.

VUOI CREARE IL TUO SITO O BLOG WORDPRESS?

Scegli uno tra i migliori hosting per WordPress

HOSTING

Scegli uno tra i migliori hosting per WordPress

Hosting

Scegli uno tra i migliori temi WordPress professionali

GRAFICA

Scegli uno tra i migliori temi WordPress professionali

Grafica

Guide e risorse per gestire il sito WordPress a 360°

GESTIONE

Guide e risorse per gestire il sito WordPress a 360°

Gestione
  
con le dita sempre in costante, frenetico movimento sulla tastiera… vengo spesso trascinato e catturato “in rete” per colpa delle mille idee che mi girano per la testa (prima o poi troverò quella giusta)… dal futuro incerto (nonostante una laurea, e chi non lo è?..siamo in tanti!) .. credo fortemente nella condivisione della conoscenza!
22 Commenti
  • 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

    • 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

      • 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+ 😉

        • Buona lotta allora 🙂 Grazie per la precisazione!

  • A quanto pare sia worbress che blogger stanno puntando ad una revisione dei loro layout al fine di rendere i design più piacevoli.

  • 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 😉

    • Ho visto che hai aggiunto il plugin, prima non avevi questi meta data, avevi i classici meta data dell’html…

  • […] 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 […]

  • […] è 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 […]

  • Ciao Roberto! Cosa mi puoi dire di questo plug-in http://wordpress.org/extend/plugins/social-graph-protocol/
    Io lavoro su WordPress MU

    • 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.

  • […] utilizza l’Open Graph per ricavare delle informazioni importanti del post, come il titolo, la descrizione, […]

  • 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

    • Roberto Iacono

      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.

      • 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

        • Roberto Iacono

          Magari non esistono più in quella pagina, ma sono rimaste sul tuo spazio web.
          Io proverei a:

          1. Controllare il codice og: e altri che hai nel sorgente della pagina per vedere cosa gli passi come immagini e descrizioni
          2. Svuotare la cache di WP (se hai qualche plugin di cache)
          3. Svuotare la cache del browser (non c’entra ma prova lo stesso)
          4. Riprovare con il debugger
          5. Se non va, aspetta due giorni e ricontrolla
          • 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

          • Roberto Iacono

            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.

  • 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

    • Roberto Iacono

      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)

      • 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 🙂 ]

        • Roberto Iacono

          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)