Cara menggunakan tag meta 'og' (Open Graph) untuk berbagi Facebook

118

Facebook mengambil semua gambar dari situs saya.

Saya ingin membagikan hanya satu gambar yang ada di halaman itu.

Saya mendengar tentang ogtag meta, tetapi saya tidak tahu bagaimana menaruhnya.

facebook-opengraph meta Vignesh Babu MD
sumber

Jawaban:

355

Menggunakan:

<!-- 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="" />

Isi konten = "..." sesuai dengan konten halaman Anda.

Untuk informasi lebih lanjut, kunjungi 18 Tag Meta yang Harus Dimiliki Setiap Halaman Web pada tahun 2013 .

CarlosPinedaT
sumber

Tahukah Anda jika authortag harus memiliki nama penulis, atau tautan ke URL profil?

tobek

Saya pikir keduanya mungkin. Jika Anda ingin gambar profil Anda di sisi kiri posting Anda di halaman pencarian google, Anda harus memberikan link ke profil google + Anda.

jurihandl

meta tag authorartinya penulis website atau penulis artikel saat ini (contoh digunakan pada artikel blog)?

LuiGi

Apakah ini eksekusi yang bagus? Akankah Google / Facebook / Twitter tidak menemukan kesalahan dengan ini?

Jeromie Devera

1) Facebook akan membaca tag <meta name = "author"> dan menampilkannya di pratinjau ketika seseorang membagikan halaman 2) Facebook sekarang memiliki dukungan untuk <meta property = "article: author"> (detail di giannopoulos.net/ 2015/06/20 /… ) dan akan menampilkan link ke profil Facebook Anda (jika Anda benar-benar memasukkan link ke profil tersebut di artikel: penulis) 3) Google sekarang mencari data yang kaya dalam bentuk yang disebut "Rich Snippets" ( developers.google.com/structured-data )

MarkG

Facebook menggunakan apa yang disebut Open Graph Protocol untuk memutuskan hal-hal apa yang akan ditampilkan ketika Anda membagikan tautan. OGP melihat halaman Anda dan mencoba memutuskan konten apa yang akan ditampilkan. Kami dapat membantu dan benar-benar memberi tahu Facebook apa yang harus diambil dari halaman kami.

Cara kami melakukannya adalah dengan og:metatag.

Tagnya terlihat seperti ini -

  <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">

Anda harus menempatkan tag meta ini atau serupa di dalam <head>file HTML Anda. Jangan lupa untuk mengganti nilainya dengan nilai Anda sendiri!

Untuk informasi lebih lanjut, Anda dapat membaca semua tentang bagaimana Facebook menggunakan tag meta ini dalam dokumentasinya. Ini adalah salah satu tutorial dari sana - https://developers.facebook.com/docs/opengraph/tutorial/

Facebook memberi kami alat kecil yang hebat untuk membantu kami saat menangani tag meta ini - Anda dapat menggunakan Debugger untuk melihat bagaimana Facebook melihat URL Anda, dan bahkan akan memberi tahu Anda jika ada masalah dengannya.

Satu hal yang perlu diperhatikan di sini adalah bahwa setiap kali Anda membuat perubahan pada tag meta, Anda harus memberi makan URL melalui Debugger lagi sehingga Facebook akan menghapus semua data yang di-cache di server mereka tentang URL Anda.

Lix
sumber

Saya melihat tag html dalam uraian saya, apakah Anda tahu bagaimana menyiasatinya?

Neil

Saya membangun alat untuk generasi meta. Ini mengonfigurasi entri untuk Facebook, Google+ dan Twitter, dan Anda dapat menggunakannya secara gratis di sini: http://www.groovymeta.com

Untuk menjawab pertanyaan lebih banyak, OGtag (Open Graph) bekerja mirip dengan tag meta, dan harus ditempatkan di bagian HEAD dari file HTML Anda. Lihat praktik terbaik Facebook untuk informasi lebih lanjut tentang cara menggunakan tag OG secara efektif.

Louis Otto
sumber

Terima kasih @Mogsdad, saya telah memperluas jawaban saya.

Louis Otto

Tautan rusak, sayangnya!

Vincent Sels