Come usare i tag Open Graph

Come usare i tag Open Graph

Utilizzi i tag title e i tag meta description? Certo che lo fai, perché sai già che i meta tag possono aiutare ad aumentare il tuo posizionamento nei motori di ricerca.

Ma sapevi che i meta tag in realtà influenzano il tuo traffico sui social media? Certo, ci sono i tag authorship di Google, ma che dire di Facebook e Twitter? In effetti, entrambi hanno i propri meta tag per i social media che possono aiutarti ad aumentare la quantità di traffico sociale che stai ricevendo.

Hai mai visto quei post sui social media che hanno immagini e video fantastici? Forse non sai che non hai bisogno di alcun software o account premium per fare la stessa cosa per i tuoi post sui social network.

Si chiamano Facebook Open Graph e Twitter Cards. Ecco come puoi sfruttarli entrambi:

Facebook Open Graph

Quando condividi un’immagine su Facebook, che aspetto ha?

Beh, non è sempre così. Facebook cerca di leggere il codice della tua pagina, ma non è sempre in grado di estrarre le tue immagini. Se non usi i tag Open Graph quando condividi un URL dal tuo sito su Facebook, questo è quello che può sembrare:

Questo è quello che succedeva con Quick Sprout prima che implementassi i tag Open Graph sul mio sito. Dopo aver implementato i tag Open Graph, sono stato in grado di aumentare il mio traffico su Facebook del 174%, semplicemente perché ora c’era un’immagine accanto ai miei aggiornamenti di stato di Quick Sprout.

Ora che sei convinto che dovresti usare Open Graph, ecco come impostarlo sul tuo sito web.

og:title

Questo è dove metti il titolo del tuo contenuto. Pensa a questo come se fosse simile al tuo normale tag title html che un motore di ricerca userebbe. Quando crei il tuo og:title, mantieni il numero di caratteri a meno di 95 caratteri.

Esempio: <meta property=”og:title” content=”11 Creative Ways to Build Links”/>

og:type

Qui si descrive il tipo di contenuto che state condividendo. È un video, un’immagine, un post sul blog, ecc. Ecco l’elenco completo da cui puoi scegliere quando definisci il tuo tipo di contenuto:

Attività

• attività
• sport

Aziende

• bar
• azienda
• caffè
• hotel
• ristorante

gruppi

• caso
• campionato sportivo
• squadra sportiva

organizzazioni

• band
• governo
• non_profit
• scuola
• università

Persone

• attore
• atleta
• autore
• direttore
• musicista
• politico
• figura pubblica

luoghi

• città
• paese
• marchio
• stato_provincia

prodotti e intrattenimento

• album
• libro
• drink
• food
• game
• product
• song
• movie
• tv_show

Siti web

• blog
• sito web
• articolo

Esempio: <meta property=”og:type” content=”article”/>

og:description

Questo è anche simile al tuo tag html meta description perché è usato per descrivere il tuo contenuto. Non dovresti preoccuparti che sia ricco di parole chiave, ma invece dovresti inventare una descrizione convincente che porti a più click. Hai fino a 297 caratteri per questo tag.

Esempio: <meta property=”og:description” content=”Sei stanco di costruire link alla vecchia maniera? Sai, i metodi che richiedono l’invio di email a migliaia di webmaster che chiedono link. “/>

og:image

Ricordi che ti ho detto che sono riuscito ad aumentare il mio traffico su Facebook del 174%? Era perché ho usato Open Graph per assicurarmi che Facebook mostrasse un’immagine ogni volta che qualcuno condivideva un URL da Quick Sprout.

Utilizzando un tag og:image, ti assicurerai che un’immagine sia accanto al contenuto che stai condividendo. In questo modo si distingue da tutti gli altri aggiornamenti di stato basati sul testo che le persone vedono nelle loro timeline.

Prima di entrare in come puoi usare questo tag, ti guiderò attraverso i requisiti di Facebook. Un’immagine deve essere almeno 50px per 50px, ma preferibilmente più grande di 200px per 200px. Inoltre, l’immagine non può essere più di 5 MB di dimensione.

Esempio: <meta property=”og:image” content=”https://www.quicksprout.com/wp-content/uploads/2013/03/linkbuilding.jpg”/>

og:url

In questo tag, dovresti mettere l’URL della pagina che stai condividendo. Questo tag può sembrare irrilevante, ma è importante perché a volte avrete più di un URL per lo stesso contenuto. Usando questo tag, ti assicurerai che tutte le condivisioni vadano a un solo URL invece che a più URL, il che dovrebbe aiutare il tuo Facebook Edgerank.

Esempio: <meta property=”og:url” content=”https://www.quicksprout.com/2013/03/21/11-creative-ways-to-build-links/”/>

og:site_name

Questo tag dice a Facebook il nome del tuo sito. Non hai davvero bisogno di questo tag, ma non c’è niente di male nell’includerlo.

Esempio: <meta property=”og:site_name” content=”Quick Sprout”/>

fb:admins

Se hai una pagina fan su Facebook e vuoi ottenere più dati in Facebook Insights, allora devi usare questo tag. Dice a Facebook che sei il proprietario del sito, e collega la tua pagina fan di Facebook al tuo sito web.

Esempio: <meta property=”fb:admins” content=”500013011″/>

Ora che hai i tuoi meta tag Open Graph di Facebook in posizione, passiamo alle Twitter Cards.

Twitter Cards

Hai mai visto un tweet come questo?

Ebbene, questi tweet dettagliati appaiono solo quando utilizzi Twitter Cards. Non ti piacerebbe averlo per il tuo sito? Lo aiuterà a distinguersi dalla folla.

Ecco come sfruttare le Twitter Cards:

Se si utilizza il plugin SEO per WordPress di Yoast, basta seguire questi passaggi. Per tutti gli altri, seguite i passi qui sotto.

twitter:card

Questo meta tag descrive il tipo di contenuto che state condividendo. Hai tre opzioni con Twitter: foto (per le immagini), lettore (per i video) e riassunto (per tutto il resto). Se non definisci la tua scheda, Twitter sceglierà di default summary.

Esempio: <meta name=”twitter:card” content=”summary”>

twitter:url

Questa è la pagina che condividi su Twitter. Similmente a come Facebook chiede un URL, anche Twitter fa questo perché si può avere lo stesso pezzo di contenuto sul tuo sito più volte. Questo assicurerà che un URL riceva tutti i tweet. Altrimenti, i tuoi tweet saranno divisi in più URL.

Esempio: <meta name=”twitter:url” content=”https://www.quicksprout.com/2013/03/21/11-creative-ways-to-build-links/”>

twitter:title

Similmente al tuo titolo Open Graph di Facebook, questo non dovrebbe essere pieno di parole chiave. Rendetelo convincente in modo che la gente voglia cliccarci sopra. Di nuovo, come con Facebook, vorrete limitare il numero di caratteri a 70.

Esempio: <meta name=”twitter:title” content=”11 Creative Ways to Build Links”>

twitter:description

Questo è simile al tag meta description che usereste per Google. Ma non riempirlo di parole chiave. Il tuo obiettivo dovrebbe essere quello di creare una frase convincente che spinga le persone a cliccare sul tuo sito web. La tua descrizione è limitata a 200 caratteri.

Esempio: <meta name=”twitter:description” content=” Sei stanco di costruire link alla vecchia maniera? Sapete, i metodi che richiedono l’invio di e-mail a migliaia di webmaster implorando link. “>

twitter:image

Per far risaltare il tuo tweet, hai bisogno di un’immagine. Le tue immagini devono essere inferiori a 1 MB di dimensione del file, e non possono essere più piccole di 60px per 60px. Le immagini più grandi di 120px per 120px saranno ridimensionate.

Esempio: <meta name=”twitter:image” content=” https://www.quicksprout.com/wp-content/uploads/2013/03/linkbuilding.jpg”>

Dopo aver applicato i meta tag Twitter Card al tuo sito, devi fare domanda al programma Card di Twitter. Una volta accettato, gli URL del tuo sito web saranno mostrati nel formato card.

Conclusione

I meta tag non sono solo per i motori di ricerca. Anche i siti di social media li stanno sfruttando. Proprio come si ottimizzano i meta tag per le classifiche di Google e i tassi di click-through, è necessario fare lo stesso per Facebook e Twitter.