FB OpenGraph og: gambar tidak menarik gambar (mungkin https?)

Pertama - saya tidak percaya ini adalah masalah duplikat. Saya telah mencari masalah yang sama atau serupa pada SO secara luas, dan karena sifat pemecahan masalah sebelum bertanya, saya percaya masalah ini unik.

Facebook tidak dapat memahami og:imagefile saya dan saya telah mencoba setiap solusi yang biasa. Saya mulai berpikir itu mungkin ada hubungannya denganhttps://...

• Saya telah memeriksa http://developers.facebook.com/tools/debug dan tidak memiliki peringatan atau kesalahan.
• Itu menemukan gambar yang kami tautkan di " og:image", tetapi gambar itu muncul kosong. Ketika kita mengklik gambar, mereka memang ada dan dibutuhkan langsung ke mereka.
• Ini TIDAK menunjukkan satu gambar - gambar yang di-host di server non-https.
• Kami telah mencoba gambar persegi, jpeg, png, ukuran lebih besar dan ukuran lebih kecil. Kami telah meletakkan gambar di public_html. Nol muncul.
• Ini bukan kesalahan caching, karena ketika kita menambahkan yang lain og:imageke meta, FB's linter menemukan dan membacanya. Itu TIDAK menunjukkan pratinjau. Pratinjau kosong. Satu- satunya pengecualian yang kami dapatkan adalah untuk gambar yang tidak ada di situs web ini.
• Kami pikir mungkin ada beberapa anti-pelindian cpanelatau .htaccessyang mencegah gambar muncul, jadi kami memeriksa. Tidak ada. Kami bahkan melakukan quick < img src="[remote file]" >pada server yang sama sekali berbeda dan gambar muncul dengan baik.
• Kami pikir mungkin itu og:typekeanehan lain dengan tag meta lain. Kami menghapus semuanya, satu per satu dan memeriksanya. Tidak ada perubahan. Hanya peringatan.
• Kode yang sama di situs web yang berbeda muncul tanpa masalah.
• Kami pikir mungkin itu tidak menarik gambar karena kami menggunakan halaman produk yang sama untuk beberapa produk (mengubahnya berdasarkan nilai get, yaitu, "details.php? Id = xxx") tetapi masih menarik dalam satu gambar (dari url yang berbeda).
• Membiarkan apapun og:imageatau image_src tidak aktif, FB tidak menemukan gambar.

Saya berada di ujung tali saya. Jika saya mengatakan berapa banyak waktu yang saya dan orang lain habiskan untuk ini, Anda akan terkejut. Masalahnya adalah bahwa ini adalah toko online. Kami benar-benar, secara positif TIDAK TIDAK dapat memiliki gambar. Kita harus. Kami memiliki sepuluh atau lebih situs lain ... Ini adalah satu-satunya yang og:imagebermasalah. Ini juga satu-satunya https, jadi kami pikir mungkin itu masalahnya. Tetapi kami tidak dapat menemukan preseden apa pun di web untuk itu.

Ini adalah meta-tag:

<meta property="og:title" content="[The product name]" /> 
<meta property="og:description" content="[the product description]" /> 
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-art-black.png" />
<meta property="og:image" content="http://www.[ADIFFERENTwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/ARShopHeader.png" />
<meta property="og:image" content="http://www.[ourwebsite].com/overdriven-blues-music-tshirt-art-black.JPG" />
<meta property="og:type" content="product"/>
<meta property="og:url" content="https://www.[ourwebsite].com/apparel-details.php?i=10047" />
<meta property="og:site_name" content="[our site name]" />      
<meta property="fb:admins" content="[FB-USER-ID-NUMBER]"/>
<meta name="title" content="[The product name]" />
<meta name="description" content="[The product description]" />
<link rel="image_src" href="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta name="keywords" content="[four typical keywords]">
<meta name="robots" content="noarchive">

Jika Anda menginginkannya, inilah tautan ke salah satu halaman produk kami yang sedang kami kerjakan. [Tautan disingkat untuk mencoba mengekang ini masuk ke hasil pencarian untuk situs kami]: http://rockn.ro/114

Sunting ----

Dengan menggunakan alat scraper "lihat apa yang dilihat facebook", kami dapat melihat yang berikut:

"image": [          
      {
         "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-details-safari.png"
      },
      {
         "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-art-safari.png"
      },
      {
         "url": "http://www.[theotherNONSECUREwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png"
      }
   ],

Kami menguji semua tautan yang ditemukan untuk satu halaman. Semua itu adalah gambar yang benar-benar valid.

EDIT 2 ----

Kami mencoba tes dan menambahkan subdomain ke situs web NONSECURE (dari mana gambar benar-benar terlihat melalui facebook). Subdomain adalah http: // img. [Nonsecuresite] .com. Kami kemudian memasukkan semua gambar ke folder subdomain utama dan mereferensikannya. Itu tidak akan menarik gambar-gambar itu ke FB. Namun, masih akan menarik gambar yang dirujuk pada domain utama nonsecure.

WORKAROUND POSTED ----

Berkat Keegan, kita sekarang tahu bahwa ini adalah bug di Facebook. Untuk mengatasinya, kami menempatkan subdomain di situs web NON-HTTPS yang berbeda dan membuang semua gambar di dalamnya. Kami mereferensikan http://img.otherdomain.com/[like-image.jpg]gambar koordinasi di og:imagesetiap halaman produk. Kami kemudian harus melalui FB Linter dan menjalankan tautan SETIAP untuk menyegarkan data OG. Ini berhasil, tetapi solusinya adalah solusi band-bantuan, dan jika httpsmasalah ini diperbaiki dan kami kembali menggunakan domain https alami, FB akan men-cache gambar dari situs web yang berbeda, masalah rumit. Semoga informasi ini membantu menyelamatkan orang lain dari kehilangan 32 jam pengkodean dalam hidup mereka .

Saya mengalami masalah yang sama dan melaporkannya sebagai bug di situs pengembang Facebook. Tampaknya cukup jelas bahwa og:imageURI menggunakan HTTP berfungsi dengan baik dan URI menggunakan HTTPS tidak. Mereka sekarang telah mengakui bahwa mereka "melihat ke dalam ini."

Pembaruan: Pada tahun 2020, bug tersebut tidak lagi terlihat di sistem tiket Facebook. Mereka tidak pernah menanggapi dan saya tidak percaya perilaku ini telah berubah. Namun, menentukan HTTPS URI og:image:securetampaknya berfungsi dengan baik.

Beberapa properti dapat memiliki metadata tambahan yang menyertainya. Ini ditentukan dengan cara yang sama seperti metadata lain dengan propertydan content, tetapi propertyakan memiliki tambahan:

The og:imageproperti memiliki beberapa terstruktur sifat opsional:

• og:image:url - Identik dengan og: gambar.
• og:image:secure_url - URL alternatif untuk digunakan jika halaman web membutuhkan HTTPS.
• og:image:type - Jenis MIME untuk gambar ini.
• og:image:width - Jumlah piksel lebar.
• og:image:height - Jumlah piksel tinggi.

Contoh gambar lengkap:

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /> 
<meta property="og:image:type" content="image/jpeg" /> 
<meta property="og:image:width" content="400" /> 
<meta property="og:image:height" content="300" />

Jadi, Anda perlu mengubah og:imageproperti untuk URL HTTPS Andaog:image:secure_url

Ex:

TAG META HTTPS UNTUK GAMBAR:

<meta property="og:image:secure_url" content="https://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

TAG META HTTP UNTUK GAMBAR:

<meta property="og:image" content="http://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

Sumber: http://ogp.me/#struktur <- Anda dapat mengunjungi situs ini untuk informasi lebih lanjut.

Semoga ini bisa membantu Anda.

Sunting: Jangan lupa untuk melakukan ping ke server facebook setelah memperbarui kode Anda - URL Linter

Saya tidak tahu, apakah itu hanya dengan saya tetapi bagi saya og:imagetidak bekerja dan itu mengambil logo situs saya, meskipun debugger facebook menunjukkan gambar yang benar.

Tetapi berubah og:imagemenjadi og:image:urlbekerja untuk saya. Semoga ini bisa membantu orang lain menghadapi masalah serupa.

Dapatkan di sini dari Google tetapi ini tidak banyak membantu saya. Ternyata ada rasio aspek minimum 3: 1 yang diperlukan untuk logo. Milik saya hampir 4: 1. Saya menggunakan Gimp untuk memotongnya tepat 3: 1 dan voila - logo saya sekarang ditampilkan di FB.

tl; dr - bersabarlah

Saya berakhir di sini karena saya melihat gambar kosong disajikan dari situs https. Masalahnya sangat berbeda:

Ketika konten dibagikan untuk pertama kalinya, crawler Facebook akan mengikis dan cache metadata dari URL yang dibagikan. Perayap harus melihat gambar setidaknya satu kali sebelum dapat dirender. Ini berarti bahwa orang pertama yang membagikan sepotong konten tidak akan melihat gambar yang diberikan

[ https://developers.facebook.com/docs/sharing/best-practices/#precaching]

Saat pengujian, butuh Facebook sekitar 10 menit untuk akhirnya menampilkan gambar yang diberikan. Jadi ketika saya sedang menggaruk-garuk kepala dan melemparkan tag og acak di facebook (dan mencurigai masalah https yang disebutkan di sini), yang harus saya lakukan adalah menunggu.

Karena ini mungkin benar-benar menghentikan orang untuk membagikan tautan Anda untuk pertama kalinya, FB menyarankan dua cara untuk menghindari perilaku ini: a) menjalankan Debugger OG di semua tautan Anda: gambar akan di-cache dan siap untuk dibagikan setelah ~ 10 menit atau b ) menetapkan og: gambar: lebar dan og: gambar: tinggi. (Baca lebih lanjut di tautan di atas)

Masih bertanya-tanya apa yang membuat mereka begitu lama ...

Saya memiliki kesalahan yang sama dan tidak ada yang sebelumnya telah membantu, jadi saya mencoba mengikuti dokumentasi asli dari Open Graph Protocol dan saya menambahkan atribut awalan ke tag html saya dan semuanya menjadi luar biasa.

<html prefix="og: http://ogp.me/ns#">

Saya punya masalah serupa. Saya menghapus properti = "og: image: secure_url" dan sekarang akan menggosok hanya dengan og: image. Terkadang, lebih sedikit lebih banyak

Saya menemukan skenario lain yang dapat menyebabkan masalah ini. Saya melewati semua langkah yang dijelaskan dalam pertanyaan dan jawaban, masih ada masalah.

Saya memeriksa gambar saya dan menemukan bahwa beberapa posting saya memiliki gambar thumbnail yang terlalu besar og:imagedalam kisaran beberapa ribu piksel dan beberapa megabita.

Ini terjadi karena migrasi baru-baru ini dari WP ke Jekyll, saya mengoptimalkan gambar saya dengan tegukan, tetapi menggunakan gambar asli di og: gambar secara tidak sengaja.

Facebook memberi kami rekomendasi berikut sampai hari ini :

Gunakan gambar yang setidaknya 1200 x 630 piksel untuk tampilan terbaik pada perangkat resolusi tinggi. Minimal, Anda harus menggunakan gambar yang berukuran 600 x 315 piksel untuk menampilkan posting halaman tautan dengan gambar yang lebih besar. Gambar bisa berukuran hingga 8MB.

Jadi ada batas atas 8MB.

Seperti yang saya tidak sengaja temukan, gambar kosong transparan datang dengan tajuk respons yang menunjukkan kemungkinan penyebab masalah.

1. Buka debugger di https://developers.facebook.com/tools/debug/og/object/
2. Masukkan URL Anda
3. Di bagian bawah, facebook menunjukkan "gambar" Anda (transparan 1x1 GIF)
   1. Gambar ditautkan ke gambar asli Anda - tidak perlu menekannya
   2. Tekan kanan dan lihat gambar (Anda akan mendapatkan sesuatu seperti https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=...)
4. Aktifkan tab Net pada alat pembakar / pengembang, segarkan halaman jika perlu
5. Anda akan mendapatkan x-error-detailtajuk respons dengan penjelasan

Sebagai contoh, dalam kasus saya itu Invalid image extension for URL: https://[mydomain]/[myfilename].jpg

Masalah sebenarnya dalam kasus saya terkait dengan prerender.io .

Ternyata, jika gambar diminta melalui prerender, itu dikonversi ke HTML. Sesuatu seperti ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head>
<body style="margin: 0px;"><img style="-webkit-user-select: none; cursor: -webkit-zoom-in; " src="https://[yourdomain].com/[yourfilename].jpg" width="1078" height="718"></body>
</html>

Entah itu bug dalam prerender itu sendiri, atau itu seharusnya dikonfigurasi dalam proxy Anda untuk tidak menggunakan prerender untuk *.jpgpermintaan (bahkan jika mereka diminta oleh Facebook bot).

Sangat sulit untuk memperhatikan hal ini, karena prerender hanya digunakan pada header agen-pengguna tertentu.

Saya mengalami masalah yang sama dan kemudian saya perhatikan bahwa saya memiliki domain yang berbeda untuk og:url

Setelah saya memastikan bahwa domain itu sama untuk og:urldan og:imageitu berhasil.

Semoga ini membantu.

Dalam kasus saya masalahnya adalah tidak menyediakan CA Root Certificate . Saya menemukan jawabannya setelah menggunakan: https://www.ssllabs.com/ssltest/analyze.html untuk menganalisis konfigurasi SSL.

Gejala serupa (Facebook dkk tidak mengambil dengan benar: gambar dan aset lainnya di atas https) dapat terjadi ketika sertifikat https situs tidak sepenuhnya patuh.

Sertifikat https situs Anda mungkin tampak valid (kunci hijau di peramban dan semua), tetapi sertifikat itu tidak akan mengorek dengan benar jika tidak ada sertifikat perantara atau rantai. Hal ini dapat menyebabkan banyak waktu yang terbuang memeriksa dan memeriksa ulang semua berbagai cache dan tag meta.

Mungkin bukan masalah Anda, tetapi bisa jadi orang lain dengan gejala yang sama (seperti saya). Ada banyak cara untuk memeriksa sertifikat Anda - yang kebetulan saya gunakan: https://www.sslshopper.com/ssl-checker.html

Saya mengambil http://dari saya og:imagedan menggantinya dengan hanya tua www.lalu mulai bekerja dengan baik.

Anda dapat menggunakan alat ini, oleh Facebook untuk mengatur ulang cache pengikis gambar Anda dan menguji URL apa yang ditariknya untuk gambar demo.

Saya dapat melihat bahwa Debugger mengambil 4 og:imagetag dari URL Anda.

Gambar pertama adalah yang terbesar dan karenanya membutuhkan waktu paling lama untuk dimuat. Coba menyusutkan gambar pertama ke bawah atau ubah urutan untuk menampilkan gambar yang lebih kecil terlebih dahulu.

Selain itu, masalah ini juga terjadi ketika Anda menambahkan cerita yang dibuat pengguna (di mana Anda tidak menggunakan og: image). Sebagai contoh:

POST /me/cookbook:eat?
  recipe=http://www.example.com/recipes/pizza/&
  image[0][url]=http://www.example.com/recipes/pizza/pizza.jpg&
  image[0][user_generated]=true&
  access_token=VALID_ACCESS_TOKEN

Di atas hanya akan berfungsi dengan http dan tidak dengan https. Jika Anda menggunakan https, Anda akan mendapatkan kesalahan yang mengatakan: Gambar terlampir () gagal diunggah

Jangan lupa menyegarkan server melalui:

Debugger Facebook

Dan klik "Kumpulkan info baru"

Punya masalah yang sama hari ini, yang membantu saya menyelesaikan Debugger Berbagi . Tampaknya Facebook tidak dapat (saat ini) memahami gambar dengan metadata XMP yang disematkan. Ketika saya mengganti gambar pada artikel kami dengan versi tanpa metadata XMP, dan menggores ulang halaman (menggunakan Sharing Debugger), masalahnya hilang. Editor heks akan membantu Anda melihat apakah gambar Anda mengandung metadata XMP atau tidak.

Dalam kasus saya, tampaknya perayap hanya memiliki bug. Saya sudah mencoba:

• Mengubah tautan ke http saja
• Menghapus ruang putih ujung
• Beralih kembali ke http sepenuhnya
• Instal ulang situs web
• Menginstal banyak plugin OG (saya menggunakan WordPress)
• Mencurigai server memiliki kesalahan konfigurasi aneh yang memblokir bot (karena semua pemeriksa OG tidak dapat mengambil tag, dan permintaan lain ke situs saya tidak stabil)

Tak satu pun dari ini bekerja. Ini menghabiskan waktu seminggu. Dan tiba-tiba entah dari mana rasanya berhasil kembali.

Inilah penelitian saya, jika seseorang memenuhi masalah ini lagi:

• Apa yang membuat Open Graph checker tidak dapat mendeteksi data Open Graph?
• Bagaimana cara mengetahui bot situs web apa, jika saya tidak memiliki akses root ke hosting yang akan mereka baca? t
• 👍 Apa yang membuat Open Graph checker tidak dapat mendeteksi data Open Graph? - Ayo Enkripsi Dukungan Komunitas
• 👍 Crawler tidak dapat mengambil gambar, tetapi menambahkan string kueri unik dan baru dapat membuatnya berfungsi untuk pertama kalinya - Facebook for Developers

Juga, ada lebih banyak checker selain Object Debugger Facebook yang dapat Anda periksa: OpenGraphCheck.com , Tester Grafik Terbuka Abhinay Rathore , Kode Tanam Iframely , Validator Kartu | Pengembang Twitter .

OK ... Saya menyadari utas ini sudah tua dan penuh sesak, tetapi kalau-kalau ada yang datang seperti saya berjuang untuk mendapatkan og mereka: tag gambar untuk berfungsi langsung di Facebook, inilah trik yang bekerja untuk saya:

JANGAN gunakan tautan ini:

https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fwww.google.com

untuk mengatasi masalah Anda. Atau jika Anda melakukannya, segera gulir ke bawah dan klik pada Scrape VIA API.

https://developers.facebook.com/tools/explorer/?method=POST&path=%3Fscrape%3Dtrue%26id%3Dhttps%3A%2F%2Fwww.google.com&version=v5.0

Ada kesalahan yang ditampilkan di alat explorer yang TIDAK ditampilkan di alat "debug". Gila !!! (dalam kasus saya, spasi dalam nama file gambar mengetuk gambar saya secara diam-diam di alat debug, tapi itu menunjukkan kesalahan dalam alat explorer).

Saya menemukan alasan lain untuk gambar tidak ditampilkan pada kartu FB. Selain itu, dengan menggunakan alat scraper FB untuk men-debug tag meta og , saya bisa mengonfirmasi semua tag yang diperlukan di mana ada di halaman WordPress saya, namun saya akan mendapatkan kesalahan pengunduhan file berikut,

Asalkan og: image, <https-link-to-jpg-image> tidak dapat diunduh. Ini dapat terjadi karena beberapa alasan berbeda seperti server Anda menggunakan pengkodean konten yang tidak didukung. Perayap menerima pengkodean konten deft dan gzip.

Saya memiliki perasaan yang samar-samar bahwa format gambar memiliki masalah, tautan ke gambar berfungsi, tetapi pesan tersebut tampaknya mengindikasikan sesuatu yang salah dengan pengkodean konten.

Setelah banyak pencarian, saya akhirnya melihat ekstensi php yang diperlukan untuk server WordPress , dan menyadari modul pho-exif tidak diinstal. Modul exif menulis metadata exif ke semua gambar yang diunggah. Akibatnya gambar yang digunakan dalam tag gambar FB og tidak memiliki metadata exif yang terkait dengannya.

Setelah modul exif diaktifkan, WordPress memungkinkan metifata exif diatur ulang untuk suatu gambar (Pustaka media-> pilih dan gambar-> Edit lebih detail-> Metadata peta exif) dan gambar sekarang muncul di kartu FB seperti yang diharapkan.

Dari apa yang saya amati, saya melihat bahwa ketika situs web Anda bersifat publik dan meskipun url gambarnya adalah https, itu berfungsi dengan baik.

Bagi saya ini berhasil:

<meta property="og:url" content="http://yoursiteurl" />
    <meta property="og:image" content="link_to_first_image_if_you_want" />
    <meta property="og:image" content="link_to_second_image_if_you_want" />
    <meta property="og:image:type" content="image/jpeg" /> 
    <meta property="og:image:width" content="400" /> 
    <meta property="og:image:height" content="300" />
    <meta property="og:title" content="your title" />
    <meta property="og:description"  content="your text about homepage"/> 

Setelah beberapa jam menguji dan mencoba berbagai hal ...

Saya memecahkan masalah ini sesederhana mungkin. Saya perhatikan bahwa mereka menggunakan "halaman pengujian" di dalam Halaman Pengembang Facebook yang hanya berisi tag "og" dan beberapa teks dalam tag tubuh yang merujuk tag og ini.

Jadi apa yang telah saya lakukan?

Saya membuat tampilan kedua di aplikasi saya, berisi hal-hal yang sama yang mereka gunakan.

Dan bagaimana saya tahu Facebook mengakses halaman saya sehingga saya dapat mengubah tampilan? Mereka memiliki Agen Pengguna unik: "facebookexternalhit / 1.1"

Setelah Anda memperbarui tag meta, pastikan tautan konten (gambar) adalah jalur absolut dan buka di sini https://developers.facebook.com/tools/debug/sharing masukkan tautan situs Anda dan klik scrape againdi halaman berikutnya