Come utilizzare il meta tag "og" (Open Graph) per la condivisione su Facebook


118

Facebook recupera tutte le immagini dal mio sito.

Voglio condividere solo un'immagine che si trova su quella pagina.

Ho sentito parlare del ogmeta tag, ma non so come metterlo.

Risposte:


355

Uso:

<!-- For Google -->
<meta name="description" content="" />
<meta name="keywords" content="" />

<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="application-name" content="" />

<!-- For Facebook -->
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />

<!-- For Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />

Compila il contenuto = "..." in base al contenuto della tua pagina.

Per ulteriori informazioni, visita 18 metatag che ogni pagina web dovrebbe avere nel 2013 .


Sai se il authortag deve avere il nome dell'autore o un collegamento all'URL di un profilo?
Tobek

Penso che entrambe le cose siano possibili. Se vuoi la tua immagine del profilo sul lato sinistro del tuo post nella pagina di ricerca di Google, dovresti fornire il link al tuo profilo google +.
jurihandl

meta tag authorindica l'autore del sito web o l'autore dell'articolo corrente (esempio nell'uso sull'articolo del blog)?
LuiGi

È una buona esecuzione? Google / Facebook / Twitter non troveranno errori con questo?
Jeromie Devera

2
1) Facebook leggerà il tag <meta name = "author"> e lo visualizzerà nell'anteprima quando qualcuno condivide una pagina 2) Facebook ora ha il supporto per <meta property = "article: author"> (dettagli su giannopoulos.net/ 2015/06/20 /… ) e mostrerà un link al tuo profilo Facebook (se effettivamente metti un link ad esso nell'articolo: autore) 3) Google ora cerca dati ricchi sotto forma di ciò che chiama "Rich Snippet" ( developers.google.com/structured-data )
MarkG

41

Facebook utilizza il cosiddetto protocollo Open Graph per decidere quali elementi visualizzare quando condividi un collegamento. L'OGP guarda la tua pagina e cerca di decidere quale contenuto mostrare. Possiamo dare una mano e dire effettivamente a Facebook cosa prendere dalla nostra pagina.

Il modo in cui lo facciamo è con i og:metatag.

I tag hanno un aspetto simile a questo:

  <meta property="og:title" content="Stuffed Cookies" />
  <meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
  <meta property="og:description" content="The Turducken of Cookies" />
  <meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">

Dovrai inserire questi o simili meta tag nel <head>file HTML. Non dimenticare di sostituire i valori con i tuoi!

Per ulteriori informazioni puoi leggere tutto su come Facebook utilizza questi meta tag nella loro documentazione. Ecco uno dei tutorial da lì: https://developers.facebook.com/docs/opengraph/tutorial/


Facebook ci offre un piccolo strumento fantastico per aiutarci quando si tratta di questi meta tag: puoi usare il debugger per vedere come Facebook vede il tuo URL e ti dirà anche se ci sono problemi con esso.

Una cosa da notare qui è che ogni volta che apporti una modifica ai meta tag, dovrai inserire nuovamente l'URL attraverso il debugger in modo che Facebook cancelli tutti i dati memorizzati nella cache sui loro server sul tuo URL.


Vedo tag html nella mia descrizione, sai come aggirare questo problema?
Neil

28

Ho costruito uno strumento per la meta generazione. Preconfigura le voci per Facebook, Google+ e Twitter e puoi usarlo gratuitamente qui: http://www.groovymeta.com

Per rispondere un po 'di più alla domanda, i OGtag tags (Open Graph) funzionano in modo simile ai meta tag e dovrebbero essere inseriti nella sezione HEAD del tuo file HTML. Consulta le migliori pratiche di Facebook per ulteriori informazioni su come utilizzare i tag OG in modo efficace.


1
Grazie @Mogsdad ho ampliato la mia risposta di conseguenza.
Louis Otto

1
Collegamento interrotto, purtroppo!
Vincent Sels
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.