Gambar Tautan Posting Facebook

95

Ketika seseorang memposting tautan di facebook, skrip biasanya memindai tautan itu untuk gambar apa pun, dan menampilkan thumbnail cepat di sebelah pos. Untuk URL tertentu meskipun (termasuk milik saya), FB tampaknya tidak mengambil apa-apa, meskipun ada sejumlah gambar di halaman itu.

Saya membaca bahwa FB lebih memilih tag rel "image_src" untuk gambar yang ingin ditentukan pengguna, tetapi ini juga tidak menghasilkan thumbnail untuk situs saya.

Url saya langsung menuju ke DNS, dan tidak diteruskan, jadi saya juga tidak membayangkan itu bisa menjadi masalah.

Adakah yang tahu mengapa FB tidak dapat menghasilkan thumbnail dari situs saya?

facebook  thumbnails 
— GEOCHET
sumber
Akan membantu jika Anda memberi kami tautan ke situs Anda (atau situs lain yang tidak berfungsi) - ini mungkin memancing beberapa gagasan.
— Nick Fortescue
Di sini Anda dapat melihat cara kerjanya! Saya membangunnya menggunakan PHP + jQuery. Kode sumber tersedia untuk diunduh. Semoga kamu menikmati! lab.leocardz.com/facebook-link-preview-php--jquery
— Leonardo Cardoso
dan jika Anda ingin melakukan hal yang sama di google plus, berikut tautan referensi terbaik yang dapat saya temukan: stackoverflow.com/questions/7985398/…
— cregox
— dcorking

Jawaban:

119

Cara termudah hanyalah tag tautan:

<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />

Tetapi ada beberapa hal lain yang dapat Anda tambahkan ke situs Anda agar lebih ramah media sosial:

Buka Tag Grafik

Tag Open Graph adalah tag yang Anda tambahkan ke <head>situs web Anda untuk mendeskripsikan entitas yang diwakili laman Anda, apakah itu band, restoran, blog, atau yang lainnya.

Tag Open Graph terlihat seperti ini:

<meta property="og:tag name" content="tag value"/>

Jika Anda menggunakan tag Open Graph, enam berikut ini diperlukan:

  • og:title - Judul entitas.
  • og:type- Jenis entitas. Anda harus memilih jenis dari daftar jenis Grafik Terbuka.
  • og:image- URL ke gambar yang mewakili entitas. Gambar harus berukuran minimal 50 x 50 piksel. Gambar persegi berfungsi paling baik, tetapi Anda diizinkan menggunakan gambar hingga tiga kali lebarnya.
  • og:url- URL permanen dan kanonis dari halaman yang mewakili entitas. Saat Anda menggunakan tag Open Graph, tombol Suka memposting tautan ke og:urlalih - alih URL dalam kode tombol Suka.
  • og:site_name - Nama yang dapat dibaca manusia untuk situs Anda, misalnya, "IMDb".
  • fb:adminsatau fb:app_id- Daftar ID Facebook administrator halaman atau ID aplikasi Platform Facebook yang dipisahkan koma. Minimal, sertakan hanya ID Facebook Anda sendiri.

Informasi lebih lanjut tentang tag Open Graph dan detail tentang Mengelola halaman Anda dapat ditemukan di dokumentasi protokol Open Graph.

http://developers.facebook.com/docs/reference/plugins/like

— WyrdNEXUS
sumber
5
Saya menerima kesalahan ini dari alat lint. All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification.. Hanya fyi
— Trevor
Saya telah menambahkan og tag dalam kode saya dan ketika saya mengujinya dengan alat debugger objek og dari facebook, itu menunjukkan kepada saya informasi yang benar saat saya simpan di og tag, tetapi ketika saya mencoba untuk menautkan halaman di akun fb saya, itu menunjukkan salinan cache saja. Berapa lama fb menyimpan salinan yang di-cache? Apakah ada cara lain untuk menghapus salinan yang di-cache?
— KAsh
Sekadar memberi tahu Anda, satu-satunya cara untuk menambahkan gambar ke postingan saat menggunakan AppLinks ( applinks.org ) di dalam aplikasi facebook adalah dengan menggunakan tag <link>, menggunakan tag <meta> dengan og: image TIDAK akan berfungsi .
— emerino
Ini memiliki daftar jenis dll, dan memiliki beberapa info berguna lainnya.
— Wilf
61

Saya tahu pertanyaan ini sudah lama, tetapi saya baru-baru ini menangani masalah yang persis sama dan terus-menerus membahasnya selama beberapa minggu. Berbagai pencarian di Google menghasilkan banyak informasi berguna, tetapi sebagian besar difokuskan pada tag Open Graph, yang tidak saya tertarik untuk digunakan. Ternyata situs saya memiliki beberapa masalah, tetapi berikut adalah beberapa hal mendasar.

  1. Seperti yang dikatakan EightyEight, pastikan HTML Anda valid - dan hal yang sama berlaku untuk javascript dan kode sisi server (PHP, ASP, dll.). Saya mengalami kesalahan PHP kecil di bagian kode yang dijalankan sebagai panggilan terpisah ke server dari halaman utama. Karena sejumlah kebetulan yang aneh, kode tersebut menghasilkan kesalahan 500 - tetapi HANYA untuk IE6 dan mesin parsing ketat seperti validator W3C dan crawler halaman Facebook. Masalahnya tidak muncul di browser modern (Chrome 4, FF 3.5, IE 8, dll) jadi saya tidak langsung melihatnya, tetapi klien yang lebih lama / lebih ketat selalu menampilkan 500 dan itulah alasan utama FB tidak merayapi laman kami (ketika segala sesuatu tampak benar).

  2. Mengenai tanggapan Randy, dia benar bahwa Facebook akan menyimpan salinan lama halaman Anda dalam cache lama setelah Anda memperbaruinya. FB mengklaim itu hanya diadakan selama 24 jam, tetapi saya mengalaminya lebih lama dari itu. FORTUNATELY, FB telah merilis tool "URL Linter" mereka yang akan menunjukkan pratinjau bagaimana halaman Anda akan muncul ketika dibagikan di FB, dan itu akan memaksa FB untuk segera memperbarui cache halaman Anda. Ini adalah alat yang menyelamatkan nyawa. Anda dapat menemukannya di http://developers.facebook.com/tools/lint/

  3. Terkait alat Linter URL, perhatikan bahwa setiap variasi URL disimpan dalam cache secara terpisah di Facebook, jadi "www.example.com" tidak sama dengan "example.com". Selain itu, kapitalisasi unik juga disimpan, jadi "ExampleOne.com" tidak sama dengan "exampleone.com". (Hal ini menyebabkan banyak kebingungan antara klien saya dan saya sendiri ketika tampak bagi saya bahwa cache telah diperbarui dengan baik dan klien menyatakan bahwa mereka tidak melihat pembaruan. Ternyata saya melihat exampleone.com dan telah menggunakan Linter untuk memperbarui cache, tetapi mereka melihat exampleOne.com yang belum saya kirimkan ke Linter. Akibatnya, saya akhirnya mengirimkan cukup banyak variasi URL ke Linter hanya untuk menutupi basis.)

  4. Saran WyrdNEXUS untuk menggunakan tag tautan image_src tepat. Ini memungkinkan Anda untuk memastikan bahwa FB mengambil gambar terbaik untuk halaman Anda. Ada beberapa pedoman yang berbeda di luar sana tentang spesifikasi apa yang harus dimiliki file gambar, tetapi saya telah berhasil menggunakan gambar persegi 128px dan telah melihat gambar 130x97 juga berhasil. Berikut adalah dokumentasi resmi Facebook dari http://developers.facebook.com/docs/reference/plugins/like/ :

    Gambar harus berukuran minimal 50 x 50 piksel. Gambar persegi berfungsi paling baik, tetapi Anda diizinkan menggunakan gambar hingga tiga kali lebarnya.

    Jelas, FB akan mengubah ukuran gambar besar untuk Anda, tetapi Anda hampir selalu mendapatkan hasil yang lebih baik jika Anda mengubah ukurannya sendiri sebelumnya.

  5. Mengenai tautan Mike Cooper ke artikel eHow, hindari menggunakan langkah # 1 di artikel itu. Itu adalah saran yang valid ketika artikel ditulis dan ketika Mike memposting tautannya, tetapi sekarang lebih baik menggunakan alat URL Linter untuk melihat bagaimana halaman Anda akan muncul ketika dibagikan. Dengan menggunakan Linter, Anda tidak akan menyebabkan FB meng-cache (berpotensi) salinan halaman yang buruk sebelum Anda sempat men-tweaknya.

— OneRuler
sumber
Saya berjuang selama berhari-hari dan thumbnail saya tidak diperbarui dengan benar. Alat Facebook Linter segera menyelesaikan masalah saya - alat ini membuat facebook memperbarui cache-nya! Hore!
— Hady
Terima kasih BANYAK untuk alat linter itu. Beberapa posting di blog saya menunjukkan gambar, yang lainnya tidak meskipun situsnya berbasis database. Memasukkan URL halaman yang melanggar ke dalam URL Linter memaksanya untuk menyimpan gambar ke dalam cache! Woo hoo!
— kristina childs
4
Alat lint mengubah namanya. sekarang hanya debug : developers.facebook.com/tools/debug - dari semua yang saya tahu, ini adalah versi tl; dr dari semua ini: cukup gunakan alat ini!
— Cregox
11

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 BERIKUTNYA: Klik link di bawah ini https://developers.facebook.com/tools/debug

Tambahkan URL Anda di kotak teks (mis. Http://www.test.com/ ) di mana Anda menyebutkan tag. Klik 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
Harap jangan memposting jawaban yang persis sama untuk beberapa pertanyaan: itu tidak cocok untuk semua atau pertanyaan adalah duplikat yang harus ditandai / ditutup seperti itu.
— kleopatra
Halo Kleopatra, saya sedang berpikir untuk memposting jawaban untuk membantu orang lain. Saya pikir maksud Anda sepenuhnya valid. Aku akan menjaga ini. Terima kasih Teman
— Gaurav123
@ Gaurav123 tautan uji coba sudah mati. Namun, saya memeriksanya dengan mengirim pesan sendiri di Facebook. Terima kasih banyak atas jawaban yang sangat membantu!
— gsamaras
2

Sebenarnya, jika Anda sudah mencoba menautkan halaman itu di Facebook SEBELUM menambahkan tautan "image_src", Facebook akan tetap menggunakan salinan lama yang di-cache dan bahkan tidak melihat perubahan Anda. Coba ubah URL dengan menghapus atau menambahkan 'www', atau duplikat halaman Anda untuk mengujinya.

— Randy
sumber
1

Saya perhatikan bahwa Facebook tidak mengambil thumbnail dari situs web jika dimulai dengan https, apakah itu mungkin kasus Anda?

— raRaRa
sumber
1

memiliki masalah yang sama dan menemukan bahwa tag penutup kepala saya berada di tempat yang salah

— Diego
sumber
0

Pertanyaan lama tetapi baru-baru ini saya sepertinya mengalami masalah yang sama dengan gambar thumbnail dari tautan saya yang tidak muncul dalam pembaruan status di Facebook. Saya memposting untuk banyak klien dan ini relatif baru.

FB sepertinya tidak menyukai URL yang panjang lagi - jika Anda menggunakan penyingkat URL seperti goo.gl atau bitly.com, thumbnail dari link / postingan Anda akan muncul di update FB Anda.

— karen kouf
sumber
0

Coba gunakan sesuatu seperti ini:

<link rel="image_src" href="http://yoursite.com/graphics/yourimage.jpg" /link>`

Tampaknya berfungsi dengan baik di Firefox selama Anda menggunakan jalur lengkap ke gambar Anda.

Masalahnya adalah itu diimbangi secara vertikal ke bawah karena alasan tertentu. Gambar berukuran 200 x 200 seperti yang direkomendasikan di suatu tempat yang saya baca.

— pengguna2494810
sumber
Saya bermaksud memposting kode untuk tag tautan yang tidak dikirim karena saya bodoh. Maaf.
— pengguna2494810
-1

Jika Anda menggunakan plugin apa pun untuk seo, Periksa 1 pengaturan plugin seo Anda. Kemudian cari tahu pengaturan Noindex jika Aktifkan Media untuk Noindex kemudian nonaktifkan.

— Milon Patowary
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.