Bagaimana saya bisa mengatur gambar situs web yang akan ditampilkan sebagai pratinjau di Facebook?

156

Ketika Anda membagikan tautan di Facebook, secara otomatis akan menemukan gambar di situs web dan secara acak memilih satu sebagai pratinjau. Bagaimana Anda dapat memengaruhi gambar pratinjau? Ketika seseorang membagikan tautan situs web di facebook-nya?

image facebook preview Menandai
sumber

Jawaban:

234

1. Sertakan ekstensi Open Graph XML namespace ke deklarasi HTML Anda

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://ogp.me/ns/fb#">

2. Di dalam Anda <head></head>gunakan tag meta berikut untuk menentukan gambar yang ingin Anda gunakan

<meta property="og:image" content="fully_qualified_image_url_here" />

Baca lebih lanjut tentang protokol grafik terbuka di sini.

Setelah melakukan hal di atas, gunakan Facebook "Object Debugger" jika gambar tidak muncul dengan benar. Perhatikan juga saat pertama kali dibagikan, itu masih tidak akan muncul kecuali tinggi dan lebar juga ditentukan, lihat Bagikan di Facebook - Gambar kecil tidak muncul untuk pertama kalinya

Shef
sumber
2
@ Martin, saya tidak sadar. Mungkin benar, tapi saya tidak melihatnya disebutkan di Open Graph Protocol Docs . Coba Debugger untuk melihat apakah nilai yang di-cache ditampilkan untuk situs Anda. Tampaknya ada pertanyaan lain pada SO berjudul Facebook Open Graph yang tidak membersihkan cache yang terkait dengan masalah ini.
Shef
7
Komentar oleh @KDog: Mengalami Masalah? Periksa kode Anda di alat debug Facebook. Gambar cache Facebook, judul, dan teks isi. Saya mengubah judul sambil menambahkan xml ke situs web saya dan karena saya tidak sengaja membuat beberapa kesalahan validasi, tidak ada yang berubah dalam pratinjau berbagi Facebook. Facebook menggunakan cache yang valid alih-alih menunjukkan data baru yang tidak valid. Saya dapat mengatasi kesalahan ini menggunakan developers.facebook.com/tools/debug . Setelah melakukannya, judul dan gambar baru saya langsung muncul.
Jeremy Thompson
3
@ScotterMonkey: Ya, itu perilaku yang diharapkan. Anda dapat memberi tahu FB konten apa yang akan digunakan. BTW, Anda dapat menambahkan beberapa di <meta property="og:image" content="your_image_here" />antara headelemen sehingga Anda dapat memilih kapan Anda memposting di FB.
Shef
2
Ketinggalan dengan fb di deklarasi html. Selamatkan hari saya! (bahkan jika ini adalah posting berusia tiga tahun). Terima kasih banyak!
program terbaik di dunia
17
tautan konten adalah url yang sebenarnya - bukan tautan relatif yang saya temukan. yaitu http://mywebsite.com.au/Images/prettypic.png, tidak/Images/prettypic.png
JumpingJezza
4

Perhatikan juga bahwa jika Anda memiliki wordpress, gulir ke bawah ke bagian bawah halaman web ketika dalam mode edit, dan pilih "fitur gambar" (sisi kanan bawah layar).

davea0511
sumber
1

Jika Anda menggunakan Weebly , mulailah dengan melihat situs yang dipublikasikan dan mengklik kanan gambar untuk Menyalin Alamat Gambar. Kemudian di Weebly, pergi ke Edit Situs, Halaman, klik halaman yang ingin Anda gunakan, Pengaturan SEO, di bawah Header Code masukkan kode dari jawaban Shef:

<meta property="og:image" content="/uploads/..." />

hanya mengganti / mengunggah / ... dengan alamat gambar yang disalin. Klik Terbitkan untuk menerapkan perubahan.

Anda dapat melewatkan bagian dari jawaban Shef tentang namespace, karena itu sudah ditetapkan secara default di Weebly.

Krubo
sumber