Se vuoi rendere il sito ben condivisibile su Facebook e compatibile con il markup Open Graph è necessario aggiungere alcuni Meta Tag nella sezione <head> del sito web. Esistono molti plugin che farebbero al caso tuo ma scrivere il codice direttamente nel tema senza passare da elementi aggiuntivi è sicuramente la scelta migliore per mantenere il sito leggero.
I Meta Tag che andrai ad inserire devono essere dinamici così che si adattino automaticamente al contenuto delle pagine. Prima di partire analizza il codice di questa pagina, studia la sezione <head> in particolare i tag og:, come vedi ogni pagina si compila con le informazioni giuste inserite nel markup Open Graph: il titolo della pagina, un estratto di descrizione, l’immagine principale ed altre informazioni. Questi dati vengono usati dai social per creare lo snippet nel momento in cui qualche utente condivide un URL.
Per rendere dinamico il markup OG uso il PHP. Ti mostro qualche esempio dal quale puoi dedurre come funziona lo script completo che trovi in fondo alla guida.
Per generare il titolo dinamichamente:
Per generare il titolo del blog:
Per estrapolare il tag meta description in automatico dalle pagine:
Per generare l’URL della pagina:
Per associare l’immagine al Post/Pagina:
Ora che hai visto il funzionamento ti mostro il codice completo dei Meta Tag Open Graph dinamiche da inserire nel sito web.
Il codice completo:
Questo script è un vero e proprio plugin per WordPress, puoi usare il codice per prendere spunto e creare il tuo, oppure puoi prenderlo e caricarlo sul tuo sito dopo aver fatto le opportune sostituzioni. Come avrai notato nello script ho inserito anche il markup delle Twitter cards.
Per caricarlo sul tuo sito:
- crea un file eve_meta.php e copia lo script completo al suo interno;
- modifica le righe da 61 a 67 con i dati del tuo sito web;
- accedi via FTP nella cartella dei plugin del tuo sito (/wp-content/plugins/), crea una cartella (chiamala come vuoi) e carica all’interno il file eve_meta.php;
- attiva il plugin dal pannello di WordPress;
- verifica il markup Open Graph delle tue pagine.
Soddisfatto?
Articoli correlati
Autore
Commenti |11
Lascia un commentoArticolo interessante, mi scuso per la banalità probabile della domanda, ma nel caso in cui io usi wordpress installato su altervista, i metatag dove andrebbero inseriti dall’editor direttamente sul cms? trovo un file titolato come?
grazie e complimenti per l’articolo
Ciao, grazie per il commento :)
Le tag open graph devono essere inserite nella sezione “head” del tuo sito. In wordpress tale sezione viene gestita dal file header.php, sarà quindi quello il file che dovrai andare a modificare. In alternativa puoi sempre usare i classici plugin che ti semplificano la vita, come questo ad esempio http://wordpress.org/extend/plugins/wp-facebook-open-graph-protocol/
Adesso lo provo, vi ho aggiunti ai preferiti, vista la mia totale non dimistichezza vi seguirò sicuramente
Grazie! Non esitare a chiedere aiuto, sono qui per questo :)
Ciao Giovanni, ho un blog su altervista e avendo installato wordpress ho notato che già il plugin wordpress seo di yoast, il plugin dello stesso facebook ed infine il plugin di origine altervista hanno i metatag nel loro plugin, solo che nel debugger di facebook risultano sempre mancanti. Un suggerimento per farli rilevare a facebook? grazie
scusa per il doppio commento, ho notato che cliccando sul tuo mi piace non mi chiede la conferma, come mai chiede la conferma nonostante io abbia caricato l’sdk ?
Ciao, se mi metti il link al sito provo a dare un occhio :)
Salve, ma è normale che io ho sia meta property og title e description e poi ho anche i normali metadescription e title uguali ? non sono duplicati ? nn c’è il rischio di spam ?
Buonasera Angelo, non si preoccupi per lo spam, è normale avere sia le OpenGraph (og:) che le meta tag (title e description).
Buongiorno,
dal punto di vista SEO posso evitare di implementare i meta tag nelle pagine del mio sito se implemento Open Graph?
Grazie mille!
Ciao Andrea, OpenGraph e meta tag hanno finalità differenti, una NON sostituisce l’altra.