Default web gambar untuk berbagi sosial
Apakah ada cara untuk mengatur default gambar yang muncul ketika saya berbagi website saya di Facebook? I've melihat bahwa Facebook biasanya mengambil gambar pertama dari situs ini untuk digunakan sebagai thumbnail.
Anda perlu untuk mengatur facebook gambar meta tag:
<meta property="og:image" content="http://example.com/logo.jpg">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">Untuk info lebih lanjut cek docs
<meta property="og:image" content="http://example.com/lamb-full.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="200">
<meta property="og:image:height" content="200">Ukuran gambar harus setidaknya 200px X 200px
Facebook's server akan 'mengikis' situs web anda mencari gambar untuk digunakan ketika orang-orang berbagi. Jika anda ingin menentukan gambar yang digunakan, menempatkan ini dalam <head></head> bagian dari situs web anda:
<meta property="og:image" content="http://url-to-your-image.png">
Facebook mungkin memiliki cache salinan dari sebelumnya acak gambar. Untuk mendapatkan facebook untuk mengambil lagi:
Mengatur og:image di <head> dari dokumen HTML seperti ini:
<meta property="og:image" content="http://example.com/ogp.jpg" />Ini adalah bagian dari Open Graph Protocol, dihormati oleh setidaknya situs media sosial berikut:
- Facebook (lihat https://developers.facebook.com/docs/sharing/webmasters/#images)
- Twitter (lihat https://dev.twitter.com/cards/getting-started#opengraph)
- LinkedIn (lihat https://developer.linkedin.com/docs/share-on-linkedin)
- Google+ (lihat https://developers.google.com/+/web/cuplikan/)
- Pinterest (lihat https://developers.pinterest.com/docs/rich-pins/reference/)
(... dan mungkin banyak lagi selain itu.)
Selain itu untuk pengaturan tag di atas, anda mungkin ** juga ingin:
- Jelas platform media sosial's versi cache dari halaman anda's gambar (misalnya dengan menggunakan platform's alat pengembang), sehingga anda dapat melihat perubahan tercermin segera. Misalnya, anda dapat melakukan ini untuk Facebook, di https://developers.facebook.com/tools/debug/
- Tambahkan tambahan "terstruktur sifat" untuk menentukan hal-hal seperti gambar's lebar atau tinggi, menggunakan sintaks yang dijelaskan di http://ogp.me/#structured. Ini digambarkan sebagai "praktek terbaik" oleh Facebook di https://developers.facebook.com/docs/sharing/best-practices#images.
Ini solusi saya, it's bekerja dengan baik:
<head>
<!--FACEBOOK-->
<meta property="og:image" content="https://www.website.com/logo.jpg">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.website.com/"/>
<meta property="og:title" content="Website title" />
<meta property="og:description" content="Website description." />
<head>Anda dapat membuat tes dengan Facebook Debug situs.
