12 Meta tag essenziali di Open Graph per Facebook e Twitter
Pubblicato: 2022-08-05Ogni marketer conosce la frase "il contenuto è il re", ma quel contenuto non è niente senza lettori e follower.
Al giorno d'oggi, c'è un modo infallibile per portare i tuoi contenuti a un pubblico più ampio e condividere il tuo fantastico nuovo post sul blog: i social media.
Con un pubblico pronto di milioni, siti come Facebook e Twitter sono alcuni dei modi migliori per spargere la voce. Tuttavia, se vuoi ottimizzare quel potenziale di sensibilizzazione, c'è un modo semplicissimo per farlo: aprire i tag grafici (OGP).
Non hai sentito parlare del protocollo a grafo aperto dietro gli OGP? Allora lascia che ti spieghi cosa sono, perché sono importanti e, soprattutto, come li usi?
Che cos'è Open Graph e perché è stato creato?
Facebook ha introdotto Open Graph nel 2010 per promuovere l'integrazione tra Facebook e altri siti Web consentendo ai post di diventare oggetti ricchi con le stesse funzionalità degli altri oggetti di Facebook.
In parole povere, aiuta a ottimizzare i post di Facebook fornendo un maggiore controllo su come le informazioni viaggiano da un sito Web di terze parti a Facebook quando una pagina viene condivisa (o piaciuta, ecc.).
Per rendere ciò possibile, le informazioni vengono inviate tramite i tag Open Graph nella parte <head> del codice del sito web.
Anche altri siti di social media stanno sfruttando i meta tag dei social. Ad esempio, Twitter e Linkedin riconoscono i tag Open Graph; Twitter ha i propri meta tag per le Twitter Card, ma se i robot di Twitter non riescono a trovarne, utilizza invece i tag OGP.
Perché i marketer dovrebbero interessarsi
I tag OGP sono vitali per gli esperti di marketing perché aiutano a garantire che quando un utente condivide un collegamento al tuo contenuto sui social media, le informazioni corrette vengano popolate automaticamente. Questo può aiutare ad aumentare il coinvolgimento e aiutare i potenziali clienti a saperne di più sul tuo marchio o prodotto.
Inoltre, gli esperti di marketing dovrebbero preoccuparsi dei tag OGP perché i siti di social media sono i principali driver della maggior parte del traffico web. Di conseguenza, la capacità di sfruttare il potere dei meta tag social è un'abilità vitale per i marketer di oggi.
Inoltre, l'utilizzo dei tag OGP può aiutarti a tenere traccia delle prestazioni dei tuoi contenuti sui social media, consentendoti di adattare la tua strategia di condivisione.
Tuttavia, in particolare: i tag di grafici aperti possono avere un enorme impatto sulle conversioni e sulle percentuali di clic risolvendo problemi comuni.
Ad esempio, hai mai condiviso un link su Facebook solo per scoprire che la miniatura mancava o c'era un'immagine diversa da quella che ti aspettavi?
Conoscere solo un po' i tag OGP può aiutarti ad affrontare questi problemi e migliorare il tuo social media marketing.
C'è una cosa che non faranno, però, ed è influenzare la tua SEO on-page. Tuttavia, la spinta che puoi ottenere dalla portata extra sui social media significa che vale la pena esaminarla.
Ora, diamo un'occhiata ai tag OGP più essenziali per Facebook e come ottimizzarli per una migliore condivisione.
Comprensione dei tag OGP di Facebook
Come spiegato in precedenza, i tag OGP sono fondamentali perché ti consentono di controllare come appare il tuo contenuto quando è condiviso su siti come Facebook. I tag del grafico aperto ti consentono di controllare il titolo, la descrizione e l'immagine nel post; è un ottimo modo per assicurarti che i tuoi contenuti siano fantastici quando li condividi.
Inoltre:
- L'aggiunta di tag OGP garantisce l'utilizzo dell'immagine e della descrizione corrette, che possono aiutare a migliorare la percentuale di clic, consentendo al contempo di aggiungere dettagli specifici, ad esempio se si tratta di un film, un libro o un prodotto.
- L'utilizzo dei tag OGP ti consente di tenere traccia delle prestazioni dei tuoi contenuti su Facebook. Quando qualcuno condivide uno dei tuoi articoli sul sito, i tag OG inviano i dati sul traffico a Facebook. Questi dati ti consentono quindi di vedere quali articoli stanno ottenendo il maggior coinvolgimento e quali devono essere migliorati.
- L'inclusione dei tag OGP ti assicura di utilizzare l'immagine e la descrizione corrette quando condividi i tuoi collegamenti su Facebook, il che può aiutare a migliorare le percentuali di clic.
- L'aggiunta di tag OGP è facile e la maggior parte dei sistemi di gestione dei contenuti dispone di plug-in o estensioni per semplificare il processo.
Facebook ha diversi tipi di tag grafici aperti. Puoi utilizzare i tag OGP per specificare cose come il nome del sito, l'immagine utilizzata come miniatura su Facebook e la descrizione che apparirà quando qualcuno condivide la tua pagina.
In questa sezione, tratterò i diversi tipi e poi spiego come usarli.
og: titolo
Il titolo og: è il modo in cui definisci il titolo del tuo contenuto. Ha uno scopo simile al tradizionale tag meta title nel tuo codice. Infatti, se Facebook non trova il tag og:title sulla tua pagina, utilizza invece il titolo del tag grafico aperto.
Come spiega Facebook, la maggior parte dei contenuti è condivisa come URL. Se vuoi controllare l'aspetto dei tuoi contenuti sul suo sito, devi aggiungere i tag OGP.
Nelle stesse parole di Facebook,
"Senza questi tag Open Graph, il crawler di Facebook utilizza l'euristica interna per fare un'ipotesi migliore sul titolo, la descrizione e l'immagine di anteprima per i tuoi contenuti. Designa queste informazioni in modo esplicito con i tag Open Graph per garantire la massima qualità dei post su Facebook".
Per ottenere il meglio da OGP, devi anche pensare al modo in cui appare il tuo testo e alla sua lunghezza.
Tieni presente che il testo mostrato su un feed di Facebook è in grassetto ed estremamente accattivante. Deve essere avvincente, proprio come un buon titolo di un post.
Non c'è limite al numero di caratteri, ma è meglio rimanere tra 60 e 90. Se il tuo titolo è più lungo di 100 caratteri, Facebook lo troncherà a soli 88!
Esempio:
<meta property=”og:title” content=”Il tuo titolo accattivante qui” />
og:url
Quando condividi un link su Facebook, puoi aggiungere tag Open Graph. Questi tag aiutano Facebook a visualizzare informazioni dettagliate sul collegamento, come un'immagine, un titolo e una descrizione.
Questo è il modo in cui imposti l'URL canonico per la pagina che stai condividendo. Ciò significa che definisci una pagina a cui vanno tutte le tue condivisioni. È utile se hai più di un URL per lo stesso contenuto (ad esempio, utilizzando i parametri). Nota importante: l'URL fornito non viene mostrato nel newsfeed di Facebook, è visibile solo il dominio.
Esempio:
<meta property=”og:url” content=”http://www.tuodominio.com” />
og: tipo
Ecco come descrivi il tipo di oggetto che condividi: post del blog, video, foto o altro. La lista da cui scegliere è lunga. Ecco alcuni esempi:
Basato sul Web:
Divertimento:
Posto:
Le persone:
Affare:
Puoi vedere l'elenco completo dei tipi qui.
Questo tag è importante se la tua pagina ha un pulsante "Mi piace" e rappresenta un oggetto reale (come un libro o un film). Determina se i tuoi contenuti vengono visualizzati nella sezione di interesse di un utente del suo profilo nel caso in cui gli facciano "Mi piace".
Nella maggior parte dei casi, utilizzerai il valore "sito web" poiché ciò che stai condividendo è un collegamento a un sito web. Infatti, se non definisci un tipo, Facebook lo leggerà come "sito web" per impostazione predefinita.
Esempio:
<meta property=”og:type” content=”sito web” />
og: descrizione
Questo descrittore di metadati è molto simile al tag meta description in HTML. Qui è dove descrivi il tuo contenuto, ma invece di mostrarlo su una pagina dei risultati di un motore di ricerca, mostra sotto il titolo del link su Facebook.
Tuttavia, a differenza di un normale meta tag di descrizione, non influirà sul tuo SEO, ma è comunque una buona idea renderlo interessante per convincere le persone a fare clic su di esso.
Og: i tag di descrizione non ti limitano a un numero di caratteri, ma è meglio usare circa 200 lettere. In alcuni casi, a seconda di un collegamento/titolo/dominio, Facebook può visualizzare fino a 300 caratteri, ma suggerisco di trattare qualsiasi cosa sopra i 200 come qualcosa in più.
Esempio:
<meta property=” og:description” content=” La tua copia divertente e descrittiva qui, se la tua meta descrizione è buona, usala.”/>
eg: immagine
Questo è il tag OGP più interessante per molti esperti di marketing perché un'immagine aiuta sempre i contenuti a distinguersi. Questo è il modo in cui ti assicuri che Facebook mostri una miniatura particolare quando condividi la tua pagina e può essere vantaggioso per i tuoi tassi di conversione.
Assicurati di impostare og:image che scegli, altrimenti Facebook mostra qualcosa di stupido come un banner pubblicitario indesiderato raschiato dalla pagina o niente. Sicuramente non lo vuoi!
Ecco qualche indicazione in più:
- È importante ricordare che se la tua pagina è statica e non utilizzi alcun tipo di sistema di gestione dei contenuti (CMS) (come WordPress), devi modificare og:image manualmente per ciascuna delle tue pagine.
- Se controlli il tuo sito web con un CMS e installi il relativo plugin, i tag og:image vengono assegnati automaticamente per ogni pagina. Cerca l'elenco dei plugin più in basso.
- La risoluzione consigliata più frequentemente per un'immagine OG è 1200 pixel x 627 pixel (rapporto 1,91/1). A queste dimensioni, la tua miniatura sarà grande e si distinguerà dalla massa. Basta non superare il limite di dimensione di 5 MB.
Se utilizzi un'immagine più piccola di 400 pixel x 209 pixel, verrà visualizzata come una miniatura molto più piccola. Non è affatto così accattivante.
Tieni presente che l'immagine che usi come immagine Open Graph può essere diversa da quella che hai sulla tua pagina.
Perché non sfruttare questa opportunità per distinguersi ancora di più?
Ad esempio, se il tuo titolo è buono, ma l'immagine che stai utilizzando non è molto eccitante (non un'infografica o una persona di bell'aspetto, ecc.), considera invece di utilizzare un'immagine con una buona riga o due di testo (vedi esempio sotto).
Una cosa che devi ricordare se lo fai: posiziona il tuo testo, o la parte più significativa di esso, al centro dell'immagine. Questo è importante perché Facebook taglia i lati delle miniature.
Esempio:
<meta property=”og:image” content=”http://www.yourdomain.com/image-name.jpg” />
Per un modo semplice per aggiungere OGP, c'è un generatore online.
Tag avanzati di Facebook Open Graph
I tag Open Graph sopra sono quelli che devi conoscere. Tuttavia, puoi utilizzare altri tag più avanzati per fornire specifiche ancora più approfondite.
Per esempio
- og:locale – definisce la lingua; L'inglese americano è l'impostazione predefinita
- og:site_name – se la pagina (oggetto) che stai condividendo fa parte di una rete più ampia
- og:audio o og:video – per aggiungere ulteriori file audio o video al tuo oggetto
- fb:app_id – per il collegamento a un'applicazione Facebook (ad es. Commenti FB) con l'oggetto
Controlla i tuoi tag OGP
Dopo aver impostato i tag del grafico aperto, è necessario verificare che funzionino correttamente. Per fare ciò, puoi utilizzare il debugger di condivisione per vedere come vengono visualizzate le informazioni quando condividi i contenuti del tuo sito Web su Facebook, Messenger e altri luoghi. Inoltre, Batch Invalidator ti consentirà di aggiornare queste informazioni per più URL contemporaneamente.
Per utilizzarlo, inserisci semplicemente l'URL della pagina con cui stai riscontrando problemi e fai clic su Debug.
Lo strumento di debug di Facebook ha due funzionalità vantaggiose.
Innanzitutto, quando si digita il collegamento che si desidera controllare, vengono restituiti eventuali errori e suggerimenti per i tag OG, se presenti. Puoi anche controllare come appare og:image, la tua descrizione e così via.
In secondo luogo, svuota la cache di Facebook. Immagina questo: pubblichi un link a Facebook, ma poi vedi un errore nella miniatura, quindi torni al tuo sito e modifichi i tag OGP, e lo pubblichi di nuovo su Facebook.
Probabilmente, non succederà nulla. La miniatura rimarrà la stessa. Ciò è dovuto alla cache. Il debugger di condivisione di Facebook aggiornerà la cache dei tuoi collegamenti dopo eventuali modifiche, quindi ricorda di usarlo ogni volta.
Apri i tag grafico per Twitter: Twitter Cards
Se non hai familiarità con le schede di Twitter, ti consentono di allegare file multimediali e aggiungere informazioni extra ai tuoi tweet. Questo può essere utile per aumentare la visibilità dei tuoi tweet e fornire un contesto aggiuntivo per gli utenti che fanno clic.
Sebbene non siano la stessa cosa, le schede di Twitter utilizzano lo stesso protocollo a grafo aperto e sembra simile ai tag OGP. L'implementazione di questi tag semplifica notevolmente la creazione di schede Twitter senza problemi di duplicazione.
Come i tag Open Graph di Facebook, le Twitter Card ti consentono di distinguerti dalla massa di tweet. In breve, ti consentono di generare alcuni contenuti aggiuntivi dal tuo tweet di 140 caratteri.
Questo non viene visualizzato automaticamente nei feed delle persone, ma aggiunge un piccolo pulsante "Visualizza riepilogo" sotto il tweet.
Puoi utilizzare i tag di grafici aperti per specificare il titolo, la descrizione e l'immagine del tuo contenuto e per determinare il tipo di contenuto della tua pagina e il pubblico che desideri raggiungere.
Quando lo clicchi:
La scheda Twitter è allettante per fare clic e fornisce un pratico riepilogo della pagina condivisa. Tuttavia, sorprendentemente, non molti siti sfruttano questi tag, offrendoti una grande opportunità per far risaltare i tuoi tweet dagli altri feed.
Installare queste schede non è difficile e c'è una soluzione rapida, anche se non sei un esperto di tecnologia. Basta installare un plugin per WordPress.
WordPress SEO di Yoast fa il lavoro perfettamente.
Per attivare le schede Twitter in Yoast:
- Accedi a WordPress
- Vai alla tua dashboard,
- Scegli l'opzione 'SEO' dall'elenco.
- Clicca su SEO e scegli social. Clic.
- Vai agli account e fai clic sul tuo nome utente Twitter
- Seleziona la scheda "Twitter" facendo clic
- Scorri verso il basso fino a "Aggiungi metadati della scheda Twitter"
- Fai clic su "abilitato"
- Infine, salva le modifiche.
Se il metodo sopra non è un'opzione, chiedi al tuo sviluppatore web e fornisci loro i tag Twitter Card pronti per l'implementazione. Ecco come li realizzerai.
twitter: card
Questo tag richiesto funziona in modo simile a og:type. Descrive il tipo di contenuto che stai condividendo. Sono disponibili sette opzioni: riepilogo, foto, video, prodotto, app, galleria e riepilogo "versione grande".
A seconda del tipo di contenuto che scegli, il link in fondo al tuo tweet cambia. Puoi ottenere "Visualizza riepilogo" per i riepiloghi, "Visualizza foto" per le foto, ecc. Se questo tag non è impostato, Twitter legge il tuo collegamento come "Riepilogo" per impostazione predefinita.
Esempio:
<meta name=”twitter:card” content=”summary” />
twitter:titolo
Questo sostanzialmente fa la stessa cosa della sua controparte OG. Specifica il titolo del tuo articolo che apparirà in grassetto. È intelligente evitare di ripetere lo stesso testo che hai nel tuo tweet. Sfrutta al massimo lo spazio a disposizione e lascia che i due pezzi della copia si giochino l'uno sull'altro per rafforzare il messaggio. Usa fino a 70 caratteri.
Esempio:
<meta name=”twitter:title” content=”Il tuo titolo qui” />
twitter: descrizione
Usa questo tag per scrivere un lead descrittivo alla pagina che stai condividendo. Come con i tag Open Graph, non concentrarti sulle parole chiave perché non contano per il tuo SEO. Crea una copia avvincente che integri perfettamente il tuo tweet e il titolo. Twitter limita questa parte a 200 caratteri.
Esempio:
<meta name=”twitter:description” content=”La tua descrizione di 200 caratteri qui” />
twitter:url
Questo imposta l'URL canonico per il contenuto che stai condividendo. (Per ulteriori informazioni, rivedere la descrizione per il tag Open Graph equivalente di Facebook sopra.)
Esempio:
<meta name=”twitter:url” content=”http://www.tuodominio.com” />
cinguettio: immagine
Sì, hai indovinato. Questo è il modo in cui imposti l'immagine da abbinare al tuo tweet. Twitter consente due opzioni, una scheda con un'immagine più piccola o una più grande.
Decidi tu quale vuoi nel tag type. Se scegli l'opzione grande, assicurati che abbia una risoluzione di almeno 280x150px e che la dimensione del file non sia superiore a 1 MB. Puoi considerare di utilizzare lo stesso trucco della miniatura di Facebook: aggiungi del testo all'immagine per aumentare il messaggio.
Esempio:
<meta name=”twitter:image” content=”http://www.tuodominio.com /image-name.jpg” />
Richiedi l'approvazione da Twitter
Aggiungere le carte ai tuoi tweet è facile: tutto ciò che devi fare è includere del codice extra alla fine del tuo tweet. Il codice dice a Twitter quale tipo di carta desideri utilizzare e come desideri che appaia il contenuto.
Esistono diversi tipi di Twitter Card, quindi puoi scegliere quella più adatta alle tue esigenze.
Tuttavia, tieni presente che, prima di poter beneficiare appieno delle Twitter Card, devi richiedere l'approvazione per la tua pagina a Twitter.
Fortunatamente, questo richiede solo circa 15 minuti e può essere fatto facilmente utilizzando il loro Card Validator.
Per iniziare,
- Seleziona il tipo di carta che desideri utilizzare.
- Aggiungi i tuoi meta tag
- Controlla l'URL con lo strumento di convalida di Twitter.
- Prova nel validatore o ottieni l'approvazione per la tua carta, quindi invia un tweet all'URL per vedere la tua carta visualizzata. https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards
Una volta ottenuta l'approvazione, Card Validator ha lo stesso scopo di Facebook Sharing Debugger, consentendoti di controllare i tuoi collegamenti prima di impegnarti.
Plugin per schede Twitter
Come con Facebook, sono disponibili molti plugin per l'implementazione delle Twitter Card. Eccone alcuni:
Come si implementano i tag Open Graph?
Come si implementano i tag OGP? Fondamentalmente, appartengono alla parte <head> dell'HTML della tua pagina. Se non gestisci il codice, dovrai chiedere aiuto al tuo sviluppatore web. Puoi preparare tu stesso l'intero pacchetto utilizzando i suggerimenti sopra per risparmiare tempo prezioso.
Se stai usando WordPress, installa semplicemente uno dei plugin che implementa il codice in modo ordinato per te. Come ho spiegato, mi piace usare WordPress SEO di Yoast, ma ci sono altri strumenti gratuiti che puoi utilizzare, tra cui:
Ecco altri plugin/estensioni/componenti aggiuntivi OG per:
Mi piace Facebook. Twitter offre uno strumento per convalidare i tuoi tag OGP, Twitter Card Validator è uno strumento che ti consente di testare e visualizzare in anteprima come appariranno i tuoi tweet quando vengono condivisi su altri siti web. Per utilizzare il validatore, inserisci l'URL del sito Web su cui desideri condividere il tuo tweet e fai clic su "convalida".
Il validatore ti mostrerà un'anteprima di come apparirà il tuo tweet sul sito web e visualizzerà il titolo, la descrizione e l'immagine.
Domande frequenti
Che cos'è Open Graph e perché è stato creato?
Open Graph Protocol (OGP) è un insieme di tag utilizzati sui siti Web per definire la struttura di una pagina Web in modo che possa essere condivisa più facilmente sulle piattaforme di social media. I tag OGP consentono agli amministratori web di controllare come appare il loro contenuto quando viene condiviso su siti di social media come Facebook e LinkedIn.
Come si trovano i tag Open Graph?
Trovi il grafico aperto nella sezione <Head> della pagina web.
Cos'è il SEO OGP?
Come si controllano i tag OGP?
Sono disponibili strumenti gratuiti per controllare i tuoi tag OGP. Siti come Facebook offrono anche un validatore in modo che tu possa controllare i tuoi tag per errori.
Conclusione
Il codice finale sia per Facebook che per Twitter dovrebbe apparire più o meno così:
Potrebbe sembrare un po' confuso, ma fortunatamente diversi strumenti semplificano il processo: non è necessario sapere come programmare.
Esistono tre tipi principali di meta tag Open Graph: og:title, og:image e og:description, e impegnarsi per implementarli ha vantaggi distinti, inclusi click-through e coinvolgimento migliori, che possono portare a conversioni aggiuntive . Anche le misure aggiuntive dell'aggiunta di Open graph aumentano la visibilità.
Tuttavia, nonostante questi vantaggi, è sorprendente come poche persone ottimizzino questi tag. Vale la pena farlo perché ti aiuta a distinguerti e ad attirare più clic e visualizzazioni e può persino aiutare a migliorare la tua SEO, tutte cose che portano a maggiori profitti.
Hai implementato i meta tag del grafico aperto? In che modo ha influito sul tuo sito?
Scopri come la mia agenzia può indirizzare enormi quantità di traffico sul tuo sito web
- SEO : sblocca enormi quantità di traffico SEO. Vedi risultati reali.
- Content Marketing : il nostro team crea contenuti epici che verranno condivisi, otterranno collegamenti e attireranno traffico.
- Payed Media : strategie a pagamento efficaci con un ROI chiaro.
Prenota una chiamata