Bagaimana Facebook Sharer memilih Gambar dan metadata lainnya saat membagikan URL saya?

393

Saat menggunakan Facebook Sharer, Facebook akan menawarkan kepada pengguna opsi untuk menggunakan 1 dari beberapa gambar yang diambil dari sumber sebagai pratinjau tautan mereka. Bagaimana gambar-gambar ini dipilih, dan bagaimana saya bisa memastikan bahwa gambar tertentu pada halaman saya selalu termasuk dalam daftar ini?

facebook facebook-opengraph facebook-sharer Sampson
sumber
Memang berfungsi ketika menggunakan properti meta, tetapi html tidak valid, yang saya temukan sangat aneh! Coba jalankan melalui validator dan Anda akan melihatnya. Ini membuat saya heran mengapa mereka tidak bisa menjalankannya dengan html yang valid ??
1
lihat developers.facebook.com/docs/opengraph <html xmlns: og = " opengraphprotocol.org/schema " ...
cope360
3
Kiat- setelah melakukan perubahan .. Jalankan halaman Anda melalui linter dan facebook akan memperbarui thumbnail, dll untuk halaman itu developer.facebook.com/tools/lint
Saya menemukan artikel berikut ini juga sangat berguna: Cara Menyesuaikan URL, Teks dan IMG mana yang akan
Dibagikan

Jawaban:

593

Bagaimana cara memberi tahu Facebook gambar mana yang digunakan ketika halaman saya dibagikan?

Facebook memiliki serangkaian tag meta grafik terbuka yang dilihatnya untuk memutuskan gambar mana yang akan ditampilkan.

Kunci satu untuk gambar Facebook adalah:

<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />

dan itu harus ada di dalam <head></head>tag di bagian atas halaman Anda.

Jika tag ini tidak hadir, itu akan mencari metode mereka lebih tua dari menentukan gambar: <link rel="image_src" href="https://stackoverflow.com/myimage.jpg"/>. Jika tidak ada, Facebook akan melihat konten halaman Anda dan memilih gambar dari halaman Anda yang memenuhi kriteria gambar share: Gambar harus minimal 200px x 200px, memiliki rasio aspek maksimum 3: 1, dan di PNG, Format JPEG atau GIF.

Bisakah saya menentukan beberapa gambar untuk memungkinkan pengguna memilih gambar?

Ya, Anda hanya perlu menambahkan beberapa tag meta gambar dalam urutan yang Anda inginkan. Pengguna kemudian akan disajikan dengan dialog pemilih gambar:
Pemilih Gambar Facebook

Saya menentukan tag meta gambar yang sesuai. Mengapa Facebook tidak menerima perubahan?

Setelah url dibagikan, perayap Facebook, yang memiliki agen pengguna facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php) , akan mengakses halaman Anda dan menyimpan informasi meta tersebut. Untuk memaksa server Facebook menghapus cache, gunakan Alat Url Debugger / Linter Facebook yang diluncurkan pada Juni 2010 untuk menyegarkan kembali cache dan memecahkan masalah meta tag pada halaman Anda.

Juga, gambar pada halaman harus dapat diakses oleh publik untuk crawler Facebook. Anda harus menentukan url absolut seperti http://example.com/yourimage.jpg alih-alih hanya /yourimage.jpg.

Bisakah saya memperbarui tag meta ini dengan kode sisi klien seperti Javascript atau jQuery? Tidak. Sama seperti perayap mesin pencari, pengikis Facebook tidak mengeksekusi skrip sehingga meta tag apa pun yang ada saat halaman diunduh adalah meta tag yang digunakan untuk pemilihan gambar.

Menambahkan tag ini menyebabkan halaman saya tidak lagi valid. Bagaimana saya bisa memperbaikinya?

Anda dapat menambahkan ruang nama Facebook yang diperlukan ke tag Anda dan halaman Anda kemudian harus melewati validasi:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
Bkaid
sumber
1
Tempat lain yang terlihat: <link rel="apple-touch-icon" href="...">(Begitulah cara mendapatkan gambar SO)
Yarin
2
@ Yarin saya tidak yakin itu benar. StackOverflow memiliki set properti image_src, yang mana ia gunakan. Nama file untuk ikon sentuh-apel berbeda dan tidak digunakan.
bkaid
3
Bisakah saya memilih urutan gambar? Dalam kasus saya, gambar lain muncul sebelum gambar meta tag.
vicenrele
23
Ukuran gambar minimum sekarang 200x200px.
Tr1stan
1
Woot! Saya telah menetapkan ukuran img ke 300px, sekarang tampaknya berfungsi. Terima kasih @ Tr1stan
Urs
37

Ketika Anda berbagi untuk Facebook, Anda harus menambahkan html Anda ke bagian kepala tag meta berikutnya: 

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

Dan itu dia!

Tambahkan tombol sebagaimana mestinya sesuai dengan apa yang dikatakan FB kepada Anda.

Semua info yang Anda butuhkan ada di www.facebook.com/share/

Matias
sumber
28

Mulai 2013, jika Anda menggunakan facebook.com/sharer.php (PHP) Anda cukup membuat tombol / tautan apa saja seperti:

<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo urlencode(YOUR_TITLE);?>&amp;p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&amp;p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&amp;p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>

Tautan parameter permintaan:

p[title] = Define a page title
p[summary] = An URL description, most likely describing the contents of the page
p[url] = The absolute URL for the page you're sharing 
p[images][0] = The URL of the thumbnail image to be used as post thumbnail on facebook

Sederhana saja: Anda tidak memerlukan js atau pengaturan lainnya. Ini hanya tautan mentah HTML. Gaya tag A dengan cara apa pun yang Anda inginkan.

Antonio Max
sumber
p[images][0]persis apa yang saya butuhkan. ogtag berfungsi untuk berbagi gambar yang sama tetapi saya harus berbagi banyak gambar dari halaman yang sama.
thekingoftruth
4
Ini harus menjadi 'jawaban yang diterima' yang baru - begitu sederhana dan mudah. Terima kasih untuk ini, sobat.
Mike
Antonio, apakah Anda memiliki tautan sumber tentang apa yang Anda perlihatkan di atas? Saya mencoba melihat ini di developers.facebook.com tetapi tidak dapat menemukan apa pun kecuali ini . Tolong bantu.
Mr_Green
@ Mr_Green itu saja. Fitur ini sudah 'ditinggalkan' tetapi sekarang kembali ke dokumen resmi. Bagaimanapun, saya yakin jawaban saya mencakup pengaturan dasar agar berfungsi.
Antonio Max
@AntonioMax tolong jelaskan apa yang ada s=100di pos Anda?
Mr_Green
13

Letakkan tag berikut di head:

<link rel="image_src" href="/path/to/your/image"/>

Dari http://www.facebook.com/share_partners.php

Sejauh apa yang dipilih sebagai default dengan tidak adanya tag ini, saya tidak yakin.

Matt Bridges
sumber
12

Dari pengalaman saya, http://www.facebook.com/sharer.php tidak menggunakan tag meta. Ini menggunakan string yang Anda berikan. Lihat di bawah.

http://www.facebook.com/sharer.php?s=100&p[title[=THIS ADALAH JUDUL SAYA & p [ringkasan] = INI RINGKASAN SAYA & p [url] = http: //www.MYURL.com&&p [gambar] [ 0] = http: //www.MYURL.com/img/IMAGEADDRESS

Meta tag berfungsi dengan tombol suka / kirim pengembang Facebook, seperti halnya info Open Graph lainnya. Jadi jika Anda menggunakan salah satu elemen aktual Facebook seperti komentar dan semacamnya, itu semua akan menjadi bagian dari Open Graph.

UPDATE: Ada dua cara untuk menggunakan pembagi * perhatikan nilai? S versus? U dalam string kueri
1 ==> STRING: http://www.facebook.com/sharer.php?s + konten dari atas
~ ~> Akan menarik info dari string.
2 ==> URL: http://www.facebook.com/sharer.php?u=url di mana url sama dengan url yang sebenarnya
~~> Akan mengikis halaman yang disediakan dalam nilai url
~~> Anda dapat menguji nilai tes di sini: https://developers.facebook.com/tools/debug

Jason Lydon
sumber
Sangat membantu. Terima kasih! : D
Aaron Grey
Apakah ada cara hukum untuk menggunakan pembagi itu di situs web lain untuk mendapatkan konten dari url? Saya tidak tahu banyak tentang API Facebook dan lainnya ...
Lyth
Coba gunakan opsi URL. Jika halaman memiliki tag OG, FB akan mengikisnya. Uji halaman yang ingin Anda gunakan di sini: developers.facebook.com/tools/debug
Jason Lydon
11

Cara lama, tidak lagi berfungsi:

<link rel="image_src" href="http://yoururl/yourimage"/>

Cara baru yang dilaporkan, juga tidak berfungsi:

<meta property="og:image" content="http://yoururl/yourimage"/>

Itu secara acak berhasil dan selama hari pertama saya menerapkannya, tidak bekerja sama sekali sejak itu.

Halaman linter Facebook, sebuah utilitas yang memeriksa halaman Anda, melaporkan bahwa semuanya benar dan menampilkan thumbnail yang saya pilih ... hanya saja halaman share.php itu sendiri tampaknya tidak berfungsi. Harus ada bug di Facebook, yang tampaknya tidak mereka perbaiki karena setiap laporan bug mengenai masalah ini yang saya lihat di sistem mereka semuanya mengatakan telah diselesaikan atau diperbaiki.

theo
sumber
Saya juga mengalami masalah ini. Linter melaporkan tidak ada kesalahan dan menampilkan gambar saya dengan benar, tetapi ketika saya mengklik tombol bagikan di situs saya sama sekali tidak ada gambar di antarmuka berbagi.
Luke Griffiths
image_src tidak lagi berfungsi untuk Facebook, TETAPI beberapa layanan masih menggunakannya (klien Telegram, dll)
Andres SK
10

Untuk mengubah Judul, Deskripsi, dan Gambar, kita perlu menambahkan beberapa tag meta di bawah tag kepala.

LANGKAH 1:
Tambahkan tag meta di bawah tag kepala 

<html>
<head>
    <meta property="og:url" content="http://www.test.com/" />
    <meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
    <meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
    <meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />

LANGKAH SELANJUTNYA:
Klik tautan di bawah ini
https://developers.facebook.com/tools/debug

Tambahkan URL Anda di kotak teks (mis. Http://www.test.com/ ) tempat Anda menyebutkan tag. Klik pada tombol DEBUG.

Selesai.

Anda dapat memverifikasi di sini https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

Di url di atas, u = tautan situs web Anda

NIKMATI !!!!

Gaurav123
sumber
Debugger sangat membantu.
konsolebox
2

Untuk HTTPS yang aman 

<meta property="og:image:secure_url" content="https://image.path.png" />
Stefan Michev
sumber
1

Inilah yang berhasil bagi saya: Saya menempatkan gambar mini yang diinginkan pada halaman tepat setelah tag dan membuatnya terlalu kecil untuk dilihat ..

<img src="imagename.jpg" width="1" height="1" />

Saya belum mengujinya dengan tinggi 0 dan lebar 0 tetapi mungkin masih akan berfungsi .. Ini tidak menjamin pengguna akan memilih gambar ini ..

JUGA sepertinya Facebook membuat cache thumbnail di halaman Anda dan tidak selalu memeriksanya untuk yang baru .. coba tambahkan ini ke halaman lain di situs Anda dan Anda akan melihatnya berfungsi.

daniel bernal
sumber
1
setelah tag - maksud Anda: "setelah tag BODY"?
Alexis Wilke
Ya, saya percaya itulah yang mereka maksud. Saya melakukan ini di situs yang lama, tetapi digunakan style="display:none;"alih-alih mengaturnya menjadi 1x1 piksel.
Mike
1

Gunakan dialog umpan facebook daripada dialog berbagi untuk menampilkan Gambar khusus

Contoh:

https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description
kittu
sumber
0

Saya tidak bisa meminta Facebook untuk memilih gambar yang tepat dari pos tertentu, jadi saya melakukan apa yang diuraikan di halaman ini:

/webapps/18468/adding-meta-tags-to-individual-blogger-posts

Dengan kata lain, sesuatu seperti ini:

<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
  <meta content='http://urlofyourimage.png' property='og:image'/>
 </b:if>

Pada dasarnya, Anda akan mengkode pernyataan if ke dalam HTML situs Anda untuk mengubahnya mengubah konten meta untuk apa pun yang Anda ubah untuk satu posting itu. Ini solusi yang berantakan, tetapi berhasil.

Michelle Glauser
sumber