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


301

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 .


27
Pertanyaan yang terdokumentasi dengan baik. Diperbaharui untuk Anda!
DMCS

Untuk pemecahan masalah, cobalah mengubah og:type: og_products:productuntuk mengetik situs web dan melihat apakah gambar dapat diambil.
DMCS

2
Juicy, kami memiliki og: gambar yang dirujuk dari situs luar yaitu http dan bukan https dan muncul.
Cyprus106

1
Hai, terima kasih, kiriman yang bagus. Hanya sedikit komentar tentang Anda khawatir tentang harus memperbarui cache jika Anda kembali ke https-url setelah mereka mulai bekerja: Saya tidak akan khawatir tentang hal itu karena cache fb dirilis setelah beberapa waktu, jadi simpan saja data ganda untuk satu atau dua hari dan cache akan dirilis secara otomatis menggunakan url baru.
Niclas Lindqvist

1
@NiclasLindqvist Hai hanya untuk catatan, kami memiliki gambar lama tetap di cache untuk BULAN dan bulan sebelumnya, jadi saya akan mengambil standar cache FB dengan sebutir garam.
Cyprus106

Jawaban:


93

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.


3
KEEGAN! Terima kasih! Ini adalah pertama kalinya kami melihat masalah HTTPS didokumentasikan sebagai bug ..... dan kami tampak kesulitan. Posting solusi kami di komentar pertanyaan.
Cyprus106

2
Pada Aug2013, url itu tidak menunjukkan bug. Apakah ada pembaruan untuk itu?
Andreas Andreou

3
developers.facebook.com/bugs/256470807842897 Bug terbaru ini juga relevan. Sementara pertanyaan telah dijawab, saya pikir saya akan menambahkan tautan di sini jadi jika orang lain dengan masalah yang sama mendarat di sini mereka akan menemukannya.
Zoidberg

4
Mengatakan masalah telah diperbaiki 18 Maret 20145, bukan untuk saya pikir.
Mike Flynn

1
@MattBrowne Tidak, ini tidak tetap untuk saya :-(
starbeamrainbowlabs

131

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


1
SIR, Terima kasih banyak. Saya tidak tahu ada metadata lebih lanjut untuk gambar! Kami memang mencoba melakukan image: secure_url dengan sendirinya dan FB melemparkan kesalahan. Kami mencoba image & secure_url * dalam beberapa cara) dan linter tidak menunjukkan perubahan apa pun.
Cyprus106

Bagi saya, ini terus menampilkan gambar Pratinjau, bukan gambar tag meta. Saya pasti punya URL yang tepat juga! :( Gagasan?
jaminroe

1
@ Benyamin Apakah Anda lint? Jika tidak, lint saja. Itu sebagian besar harus memperbaiki masalah. Jika masih tidak memilih, lalu lihat apa yang dapat dikikis oleh alat, Anda juga dapat melihat apa yang sedang dikikis, ada tautan di akhir hasil See exactly what our scraper sees for your URLklik padanya dan lihat apakah itu menunjukkan sumber lengkap tautan Anda atau pengupasan. apa pun. Jika salah charsetdiatur, maka scraper tidak akan dapat mengikis untuk beberapa alasan (saya telah menjawab pertanyaan serupa beberapa waktu lalu dengan masalah ini). Jadi pastikan semua hal ini benar.
Syed IR

3
Jika itu membantu siapa pun - og kami: URL gambar tidak memiliki ekstensi file karena gambar dibuat oleh layanan (/ foo / bar). Jawaban ini memperbaiki masalah kami dengan Facebook linter, mungkin karena og: type = "image / png". Terima kasih!!
Dunc

3
@JohnWasham og:imageTag dapat berupa HTTPS (yang dilakukan oleh StackExchange, YouTube, WordPress.com, Amazon, dll.) Ini agak membuat Anda bertanya-tanya untuk apa og:image:secure_urlsebenarnya?
DocRoot

16

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.


Ceria - bekerja untuk saya - tetapi debugger facebook menginginkan gambar juga, jadi saya mengirim keduanya. og: image dan og: image: url - keduanya dengan nilai yang sama / url
pperrin

1
Apakah og: image: sintaks yang dikenali url atau tidak benar dan karenanya tidak diuraikan? Dengan kata lain apakah ini sama dengan tidak memiliki meta tag sama sekali?
Jonathan Tonge

@JonathanTonge Mengakses ke ogp.me , " og:image:urlidentik dengan og:image".
DocRoot

9

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.


2
Ini adalah rasio aspek maksimum 3: 1 ( developers.facebook.com/docs/opengraphprotocol ), dengan ukuran minimum 50px x 50px
rpearce

1
Menurut debugger facebook, persyaratan ukuran sekarang 200px x 200px
braX

8

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 ...


Alasan untuk ini adalah rasio gambar. Jika rasio dimensi gambar tidak tepat 1,91: 1 dan / atau og:image:widthdan og:image:heightdata saya tidak termasuk, maka Facebook harus memproses gambar setelah menggosoknya agar sesuai dengan dimensi mereka. Gambar juga akan dipotong, yang mungkin tidak diinginkan. Untuk detailnya, lihat: developers.facebook.com/docs/sharing/best-practices/#images
Slicktrick

1
Menentukan og: gambar: lebar dan og: gambar: tinggi pada gambar yang tidak ada dalam daftar sangat pendek dari resolusi yang memenuhi syarat, jangan mempercepat apa pun dalam pengujian saya.
Chris Moschini

5

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#">

2

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


1
Jawaban Anda harus memiliki lebih banyak suara! Anda sepenuhnya benar, jika Anda hanya menyajikan konten lebih dari https, cukup gunakan og: image: url dan selesai dengan itu.
marcvangend

1
Saya tidak mengerti mengapa ini solusi. pertanyaannya jelas tidak memiliki secure_url di tempat pertama, mengapa Anda pikir itu berfungsi, itu terlalu acak
Decebal

1

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.


1

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.


1

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.


2
Ini tidak selalu mungkin, karena og: gambar mungkin URL CDN cloudfront. Juga, dalam kasus saya, sementara FB (pada 2017!) Tidak mengambil gambar CDN dari halaman itu sendiri, itu mengambil gambar CDN lain yang juga Cloudfront, yang berarti juga bukan milik saya: url. Jadi maksud Anda salah.
PKHunter

Itu benar. Saya tidak menggunakan URL CDN. Saya hanya berpikir bahwa saya akan membagikan apa yang berhasil bagi saya.
Darren Hall


1

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


1

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.


0

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.


Lix terima kasih! Kami sebenarnya memiliki gambar persegi kecil, sekitar 200x200 maks, sebagai gambar pertama untuk waktu yang lama. Kami telah mengatur ulang & mengikis ulang beberapa kali. Kami juga melakukan kombinasi membuat yang lebih kecil, lebih besar, atau berganti-ganti gambar satu-satunya & memetakan kembali dengan tingkat keberhasilan nol.
Cyprus106

0

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


Senang, Google bergerak ke arah memberikan situs LEBIH relevan dengan situs dengan https, dan dua tahun setelah mengajukan pertanyaan ini, FB masih (secara tidak sengaja, mungkin, tetapi masih berdosa) menghukum situs web yang menghargai keamanan pengunjung mereka
Cyprus106


0

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.


0

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:

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 .


0

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).


0

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.


-1

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


-1

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"/> 

-2

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"


-2

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

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.