Menampilkan Thumbnail untuk link di WhatsApp || og: meta-tag gambar tidak berfungsi


94

Mencoba mengikuti pertanyaan ini: Berikan gambar untuk berbagi tautan whatsapp

masukkan deskripsi gambar di sini

Saya telah membuat halaman web HTML sederhana dengan metatag Facebook dasar:

<!--FACEBOOK-->
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas />
<meta property="og:image" content="http://pollosweb.wesped.es/programa_pollos/play.png" />        

Linter Facebook memvalidasi dengan benar dan di Facebook terlihat sempurna, tetapi ketika saya mencoba membagikan melalui WhatsApp, gambar tidak muncul.

Saya mencobanya di WhatsApp di Android

Ini adalah URL Halaman Web Contoh


Aneh ... gambar og: sudah cukup. Saya mencoba membagikan tautan youtube dan saya dapat melihat dengan benar thumbnail di obrolan saya. Saya mencoba untuk melihat apakah Youtube menggunakan lebih banyak tag meta tanpa menemukan sesuatu yang istimewa .... apakah kita menghadapi masalah cache?
cs.edoardo

permisi, tapi apakah kamu yakin ini mungkin? Pernahkah Anda melihatnya di tempat lain sebelumnya? apakah Anda memiliki beberapa tautan yang memiliki jempol di whatsapp?
ProllyGeek

itu mungkin untuk menambah tinggi dan lebar gambar ???? di Whatsapp
Chandresh

Saya menggunakan tag yang sama itu tidak berfungsi tolong
pandu

Dapatkah saya mereferensikan Gambar tanpa panggilan HTTP apa pun, seperti di content="./images/logo.png"?
TMOTTM

Jawaban:


102

Saya yakin Anda perlu menambahkan itempropke og:imagemeta tag, mengatur ukuran gambar 256x256dan juga tidak ada salahnya untuk menambahkan site_name, typedan updated_time properti juga :)

<meta property="og:site_name" content="San Roque 2014 Pollos">
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas" />
<meta property="og:image" itemprop="image" content="http://pollosweb.wesped.es/programa_pollos/play.png">
<meta property="og:type" content="website" />
<meta property="og:updated_time" content="1440432930" />

Anda dapat melihat tag meta ini beraksi, misalnya di Google Maps .
Setelah Anda mengubah tag meta Anda, Anda mungkin perlu menunggu beberapa saat untuk kemungkinan cache diperbarui.

Anda dapat men-debug / memverifikasi tag meta Open Graph dari Facebook Debugger
Jika Anda dapat melihat semua tag Anda di sana, maka situs / aplikasi di mana tag Anda tidak ditampilkan dengan benar mungkin memiliki persyaratan yang berbeda untuk tag Open Graph.

EDIT:
Jika Anda akan untuk menentukan sebuah gambar oleh HTTP-Securelink, anda perlu menggunakan og:image:secure_urlbukan og:image.

EDIT2:
Anda juga perlu menentukan og:typekarena ini adalah salah satu dari empat parameter dasar yang diperlukan.
<meta property="og:type" content="website" />seharusnya membawa Anda ke arah yang benar.


Itu mungkin karena gambar tidak tersedia di tag meta pertama Anda dari dua tag meta dengan itemprop="image". Pesan kesalahan:Cannot GET /logos/logo_512.png
Tidak diketahui

4
Juga, jika Anda akan menggunakan tautan http aman ke gambar, Anda perlu menggunakan property="og:image:secure_url"alih-alihproperty="og:image"
Unknown

Terima kasih atas waktu Anda. Saya membuat perubahan. Tapi tetap saja tidak berhasil. :(
Akhil Sekharan

Tautan youtube menuju ke video di mana mereka menunjukkan cara membuat ikon datar di Illustrator?
Unknown

Maaf atas ambiguitasnya. Ketika kami mengirim tautan ini melalui WhatsApp, gambar kecil dari Video muncul di dekat pesan seperti yang ditunjukkan dalam pertanyaan ini
Akhil Sekharan

29

Saya memiliki masalah yang sama dan masalahnya adalah ukuran gambarnya. Whatsapp tidak mendukung gambar dengan ukuran lebih dari 300KB.

Jadi property terpenting untuk menampilkan gambar di Whatsapp adalah:

<meta property="og:image" content="url_image">

Dan ukuran gambar yang akan ditampilkan harus kurang dari 300KB


dev.dubairent.com/property/… tidak berfungsi dalam kasus saya
Jitendra Pancholi


10

Setelah menghabiskan waktu berbulan-bulan mencoba memikirkan hal ini, saya akhirnya menyelesaikan masalah tersebut. Inilah solusi saya:

<!-- MS, fb & Whatsapp -->

<!-- MS Tile - for Microsoft apps-->
<meta name="msapplication-TileImage" content="http://www.example.com/image01.jpg">    

<!-- fb & Whatsapp -->

<!-- Site Name, Title, and Description to be displayed -->
<meta property="og:site_name" content="The Rock Photo Studio">
<meta property="og:title" content="The Rock Photo Studio in Florida">
<meta property="og:description" content="The best photo studio for your events">

<!-- Image to display -->
<!-- Replace   «example.com/image01.jpg» with your own -->
<meta property="og:image" content="http://www.example.com/image01.jpg">

<!-- No need to change anything here -->
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/jpeg">

<!-- Size of image. Any size up to 300. Anything above 300px will not work in WhatsApp -->
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">

<!-- Website to visit when clicked in fb or WhatsApp-->
<meta property="og:url" content="http://www.example.com">

Salin di atas, tempel di area kepala situs web. TUTUP aplikasi Whatsapp Anda, buka kembali, KEMUDIAN tes. Tidak perlu membersihkan cache, dan TIDAK PERLU MENGHAPUS DATA.

Berkah untuk semua!


Bagi saya ukuran file bertanggung jawab sama sekali. Selama ukuran file di bawah 300 Kb semuanya baik-baik saja. Saya tidak perlu mengukur properti. Tag og: image sudah cukup.
Bernhard Kraus

tidak ada yang berhasil dalam kasus saya dev.dubairent.com/property/…
Jitendra Pancholi

9

Saya menemukan solusinya di sini tautan pratinjau Whatsapp yang diposting pada 2 16 Maret

Dan Anda harus melihat bekerja

Sebelum dan sesudah screenshot

masukkan deskripsi gambar di sini

Ada dua jenis kode. Meta pertama: gambar di dalam <head>

<meta property="og:image" content="url_image">

Skema gambar mini dari schema.org di dalam <body>

<link itemprop="thumbnailUrl" href="url_image"> 
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> 
  <link itemprop="url" href="url_image"> 
</span>

Semoga bantuan ini. Terima kasih.


1
Debugger FB: 100% ok. Pratinjau Kaya: 100% ok (termasuk Watsapp). Ketika saya mencoba membagikan melalui WhatsApp, gambar tidak muncul. Url dalam kasus saya adalah robotiqu.es ... tidak ada tanggapan setahun kemudian?
Juanjo

1
@wong_udik Cara melewatkan konten HTML ini melalui Android Intent
Raja Jawahar

tidak berfungsi dalam kasus saya dev.dubairent.com/property/…
Jitendra Pancholi

3

Hapus data dan cache whatsapp Anda (atau gunakan whatsapp lain)!

Android Phone : Go to SETTINGS > APPS > Application List > WhatsApp > Storage and Clear Data.

Hati-hati ! Cadangkan pesan Anda sebelum tindakan ini.

hapus data dan cache whatsapp

Kemudian hasilnya: sebelum dan sesudah membersihkan data dan cache WhatsApp sebelum dan sesudah berbagi


1
ini dan membuat ukuran file kurang dari 300kb berhasil untuk saya
Aryeh Beitz

1
Hanya membersihkan cache saja sudah cukup. Tidak perlu menghapus data.
Sanket Berde

Anda hanya dapat meng-cache-kan tautan tersebut sebagai gantinya:https://link.com/?_=92375293579
nathan

2

Saya tidak tahu tentang jumlah minimum meta tag yang diperlukan untuk bekerja di whatsapp, menemukan ini di suatu tempat dan ini bekerja untuk saya dengan sempurna. Catatan: Resolusi gambar adalah 256 x 256.

   <head>
    <meta property="og:site_name" content="sitename" />
    <meta property="og:title" content="title">
    <meta property="og:description" content="description">
    <meta property="og:image" itemprop="image" content="http://www.yoursite.com/yourimage.jpg">
    <link itemprop="thumbnailUrl" href="http://www.yoursite.com/yourimage.jpg"> 
    <meta property="og:image:type" content="image/jpeg">
    <meta property="og:updated_time" content="updatedtime">
    <meta property="og:locale" content="en_GB" />
    </head>

    <body>
    <span itemprop="image" itemscope itemtype="image/jpeg"> 
      <link itemprop="url" href="http://www.yoursite.com/yourimage.jpg"> 
    </span>

    </body>


1

Sebagai balasan ke https://stackoverflow.com/a/35785393/1518500

Coba versi terbaru untuk schema.org

<span itemprop="image" itemscope itemtype="http://schema.org/ImageObject"> 
 <link itemprop="url" href="imgurlHere">
 <meta itemprop="width" content="1200">
 <meta itemprop="height" content="800">
</span>

atau menggunakan format json-ld dari google

<script type="application/ld+json">
 {
"@context": "http://schema.org/",
"@type": "ImageObject",
 "url": "ImgURLhere",
    "height": 800,
    "width": 1200

 }
 </script>

1
Bisakah Anda menambahkan penjelasan pada jawaban Anda? Hanya dengan menampilkan kode dapat membingungkan bagi sebagian orang.
André Kool

1

Untuk semua yang masih mengalami masalah ini dan bagi saya tidak ada solusi yang diposting berhasil.

Saya pernah mengalami masalah serupa. Gambar itu ditampilkan dengan benar di semua dialog berbagi lainnya. Hanya WhatsApp yang tidak dapat menampilkan gambar, meskipun debugger facebook memiliki tag og: image dengan benar.

Solusi yang berhasil untuk saya: Saya menggunakan firebase. Untuk konten yang diupload di penyimpanan mereka, Anda mendapatkan URL Download unik dengan token media. Sesuatu seperti:

https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/ ? alt = media & token = YYYYYYYY-YYYYYYYYYYY-YYYYYYYYYYYYYY

Saya menggunakan URL ini di tag meta og: image. Ini berfungsi untuk Facebook dll., Tetapi sepertinya WhatsApp tidak dapat mengunduh gambar dari URL ini. Sebagai gantinya Anda perlu memasukkan gambar dalam direktori proyek Anda dan menggunakan tautan ini untuk tag og: image. Sekarang berfungsi dengan baik di WhatsApp juga.

Sebelumnya (tidak berfungsi di WhatsApp, tapi facebook dll.)

<meta property="og:image" itemprop="image" content="https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/your_image?alt=media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY">

Setelah (sekarang bekerja di semua dialog bersama yang diuji, termasuk WhatsApp)

<meta property="og:image" itemprop="image" content="https://domain_name/path_to_image">

Semoga ini bisa membantu beberapa dari Anda :)


Bisakah Anda menjelaskan lebih lanjut? Apa sebenarnya bedanya? Apakah Anda mengurutkan ulang url gambar atau apa yang Anda lakukan?
John Max

Mungkin domain tersebut harus cocok dengan tautan yang dibagikan.
MarsAndBack

1

Saya mendokumentasikan solusi terperinci yang sempurna di sini - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html Ada tujuh langkah yang harus dilakukan untuk mendapatkan pratinjau yang sempurna.

  1. Judul: Tambahkan judul kaya Kata Kunci ke halaman web Anda dengan maksimal 65 karakter.

  2. Deskripsi Meta: Jelaskan halaman web Anda dengan maksimal 155 karakter.

  3. og: title: Maksimum 35 karakter.

  4. og: url: Tautan lengkap ke alamat halaman web Anda.

  5. og: description: Maksimum 65 karakter.

  6. og: image: Gambar (JPG atau PNG) berukuran kurang dari 300KB dan disarankan dimensi minimum 300 x 200 piksel.

  7. favicon: Ikon kecil dengan ukuran 32 x 32 piksel.

Pada halaman di atas, Anda memiliki spesifikasi yang diperlukan, batas karakter, dan tag sampel. Lakukan upvote setelah Anda merasa puas.


Jelaskan apa yang dilakukan tautan Anda ... Tautan bisa hilang.
Kurt Van den Branden

Apakah sumber Anda baru saja dari pengujian atau salah satu persyaratan tersebut didokumentasikan di mana saja?
Keab42

1

Saya berharap bantuan ini:

<meta property="og:title" content="Title goes here">
<meta property="og:site_name" content="Site name">
<meta property="og:image" content="imageURLShouldBeFromSameDomainName">
<meta property="og:image:width" content="640">
<meta property="og:image:height" content="300">

Catat imgURL yang harus dihosting dari domain yang sama, atau itu tidak akan muncul di whatsapp. Saya mencoba memuat url dari amazon, pratinjau gambar tidak berfungsi.


1
Bagaimana Anda akan mengirim data ini melalui Intent
Raja Jawahar

Pertanyaan ini sepenuhnya offtopic
meredrica

1

Dalam kasus saya, menambahkan tag meta di bawah ini memecahkan masalah. Saya menggunakan konten Arab dan harus menambahkan ini agar gambar muncul di WhatsApp:

<meta property='og:locale' content='ar_AR' />

Catatan: Jika Anda menggunakan konten bahasa Inggris, tidak perlu menambahkan tag meta ini karena bahasa Inggris adalah nilai default.



0

Buka data Grafik:

<meta property="og:title" content="Title of your website | website.com"/>
<meta property="og:type" content="Most popular business directory of Bangladesh"/>
<meta property="og:url" content="http://www.website.com/"/>
<meta property="og:image" content="http://www.moumaachi.com/images/dhaka-city.jpg"/>
<meta property="og:site_name" content="@website"/>
<meta property="fb:admins" content="Author"/>
<meta property="og:description" content="website.com is your online business directory of Country"/>

tidak berfungsi dalam kasus saya dev.dubairent.com/property/…
Jitendra Pancholi

0

Hanya 3 tag ini tampaknya akan diperlukan ( og:title, twitter:description, rel="icon"):

<meta property="og:title" content="San Roque 2014 Pollos" />

<meta name="twitter:description" property="og:description" itemprop="description" content="Programa de fiestas" />

<link rel="icon" type="image/png" href="https://images.weserv.nl/?url=http://pollosweb.wesped.es/programa_pollos/play.png&w=192&height=192" sizes="192x192" />

Bereksperimen / bermain

Cara termudah untuk bereksperimen bagi saya adalah dengan CodeSandbox mengikuti langkah-langkah berikut:

  • Buat aplikasi Vanilla dengan https://codesandbox.io/s/
  • Ubah tag meta Anda sesuai di index.htmlfile
  • Simpan file ( ctrl+s) yang akan membuat aplikasi bercabang dan menghasilkan url uniknya sendiri
  • Tempel url itu di WhatsApp untuk melihat pratinjau (Anda bahkan tidak perlu mengirim pesan)
  • Lakukan perubahan pada tag meta
  • Ubah url - tambahkan satu karakter di akhir url. Ini membuang "pratinjau cache sebelumnya"

Kutipan diperlukan

Pastikan SELALU memiliki kutipan dan kutipan penutup karena WhatsApp sensitif terhadap itu. Contoh Anda di atas tidak memiliki kutipan penutup untuk Anda og:description.


tidak berfungsi dalam kasus saya dev.dubairent.com/property/…
Jitendra Pancholi

1
@JitendraPancholi, situs web (dubairent.com) Anda tidak sama. Karakter kutip ganda diperlukan di sekitar nilai atribut. Berikut adalah salah satu dari situs web Anda: <meta property=og:title content="Immaculate 4 Bed Townhouse Victory">. Itu harus: <meta property="og:title" content="Immaculate 4 Bed Townhouse Victory">. Jika Anda menggunakan Webpack dengan plugin HTML, pertimbangkan minify.removeAttributeQuotesuntuk menyetel kefalse
Francois

Saya mengoreksinya sekarang tetapi whatsapp masih tidak menampilkan gambar dalam pratinjau, meskipun judul dan deskripsi ditampilkan seperti yang ditunjukkan sebelumnya juga.
Jitendra Pancholi

@JitendraPancholi, Anda dapat menggunakan petunjuk di atas untuk "Cara termudah untuk bereksperimen bagi saya adalah dengan CodeSandbox mengikuti langkah-langkah ini". Cukup salin <head>bagian Anda ke dalam aplikasi vanilla. Untuk mendapatkan html mentah situs web Anda, gunakan opsi "lihat sumber halaman" (ada di Chrome CTRL + U).
Francois

0

Bagi siapa pun yang masih mengalami ini, saya menemukan bahwa gambar yang disajikan di Amazon S3 tidak berfungsi untuk aplikasi seluler WhatsApp (Android dan iOS, tetapi aplikasi desktop Mac baik-baik saja). Sangat mungkin bahwa pengaturan AWS kami menyebabkan hal ini, tetapi saya juga memperhatikan pola di situs lain (misalnya yang ini dengan og:imagedomain seperti memukul https://s3.amazonaws.com).

Tidak ada masalah pada platform lain yang saya coba, hanya aplikasi seluler WhatsApp. Segera setelah saya mengarahkan saya <meta property="og:image" content="https://some-non-aws-location" />ke URL publik lain seperti file Google Drive (dibagikan secara publik tentu saja), itu berfungsi dengan baik.

Saya juga mencoba melakukan gambar di repo kami, yang dihosting dan diterapkan di AWS dengan domain kustom, dan itu juga tidak berhasil. Jadi AWS tampaknya masih menjadi pelakunya. Semoga ini bisa membantu seseorang!


0

Jika setelah semua tip ini, thumbnail masih tidak muncul, coba ini:

Masalah saya adalah bahwa tanda kutip ganda dari atribut og sedang dihapus saat dibuat untuk produksi (npm run build). Modul Minify melakukan itu.

Jadi solusinya adalah membatalkan penghapusan ini, mengatur atribut removeAttributeQuotes ke false:

minify: {
    ...
    removeAttributeQuotes: false,
    ...
}

Di lingkungan pengembangan saya, saya menyetelnya di file "webpack.prod.conf.js". Setel di file yang setara.

Bangun kembali dan sekarang berfungsi.


0

Saya mengikuti semua instruksi di jawaban di sini, dan saya masih tidak bisa membuatnya bekerja. Sepertinya WhatsApp juga membutuhkan ekstensi untuk menampilkan gambar.

Jadi untuk tag yang menunjuk ke jpeg:

<meta property="og:image" itemprop="image" content="https://example.com/someimageid"/>

Ubah API untuk mengizinkan ekstensi dan menggunakan:

<meta property="og:image" itemprop="image" content="https://example.com/someimageid.jpeg"/>

dan kemudian tampaknya berhasil ...


0

masukkan deskripsi gambar di sini Memiliki masalah yang sama, saya akhirnya berhasil setelah beberapa mencoba. Berikut adalah 8 tag html yang saya gunakan di halaman web saya agar pratinjau berfungsi:

Dalam <head>tag:

<meta property="og:title" content="ABC Blabla 2020 Friday" />
<meta property="og:url" content="https://bla123.neocities.org/mp/friday.html" />
<meta property="og:description" content="Photo Album">
<meta property="og:image" itemprop="image" content="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG"/>
<meta property="og:type" content="article" />
<meta property="og:locale" content="en_GB" />

Dalam <body>tag:

<link itemprop="thumbnailUrl" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">

<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">
</span>

8 tag ini (6 di kepala, 2 di tubuh) bekerja dengan sempurna.

Tips:

1.Gunakan URL lokasi gambar yang tepat daripada format direktori, yaitu jangan gunakan gambar / OG_thumb.jpg

2. Ekstensi file sensitif kasus: Jika nama ekstensi gambar pada penyedia hosting Anda adalah ".JPG" maka jangan gunakan ".jpg" atau ".jpeg '. Saya mengamati bahwa berdasarkan penyedia hosting dan kesalahan kombinasi browser mungkin atau mungkin tidak terjadi, jadi untuk amannya lebih mudah untuk hanya mencocokkan kasus ekstensi file.

3. Setelah melakukan langkah-langkah di atas jika pratinjau thumbnail masih tidak muncul di pesan WhatsApp, maka:

Sebuah. Hentikan paksa aplikasi seluler (saya coba di Android) dan coba lagi

b. Gunakan alat online untuk melihat dulu tag OG misalnya saya menggunakan: https://searchenginereports.net/open-graph-checker

c. Di browser seluler, tempel tautan langsung ke ibu jari OG dan segarkan browser 4-5 kali. mis. https://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG


0

November 2020: Seperti yang saya alami, tag meta ini diperlukan dan berpengaruh pada apa yang Anda lihat pada tautan bersama di Whatsapp dan WhatsApp-thumbnail:

<head>
 <meta content='myTitle' property='og:title'/>
  <meta content="myDescription" property="og:Description"/>
  <meta property="og:type" content= "website" />
  <meta property="og:image" itemprop="image primaryImageOfPage" content="https://i.ibb.co/1GRpwND/600px-Approve-icon-svg.png" />
</head>

dan di dalam <body> :

<a href="https://wa.me/?text=https://myaddress.blogspot.com/2020/11/try-16.html" target="_blank" rel="nofollow">Hello whatsApp</a>

Penjelasan lebih lanjut:

1- Misalkan Anda memiliki <meta content='example.com/page1' property='og:url'/>dan bagian dalam tubuh yang Anda rujuk <a href="https://wa.me/?text=example.com/page2" >Hello whatsApp</a>, og:imagedan og:descriptiondari halaman example.com/page2akan ditampilkan di WhatsApp seperti yang Anda rujuk pada tautan Anda di badan (mungkin jelas).

2-Ketika Anda add/changetag grafik terbuka seperti og:description, dan sekali lagi Anda mengklik Anda <a></a>tag pada halaman Anda / tubuh, apa yang Anda lihat di WhatsApp tidak berubah kecuali jika Anda mengubah href="I am a new URL"dari Anda<a></a> tag atau menghapus cache WhatsApp !!

3-Saya mencoba Png/jpggambar, semuanya berukuran kurang dari 300 kb dan semuanya lebih besar dari 300 * 300 piksel, dan konten gambar adalah a https atau httpurl, kode di atas mendukung keduanya (Tidak perlu og:image:secure_url).

4-Setiap kali Anda menambah / mengubah ogkonten, untuk memiliki thumbnail di WhatsApp, perubahan tersebut tidak memengaruhi percobaan pertama !! dan berhasil pada percobaan kedua. Sangat aneh !


-1

Solusi ini bekerja untuk saya:

    <meta property="og:title" content="Testing Title" />
    <meta
      property="og:description"
      content="This is best way to view your Time Table & Join Meetings"
    />
    <meta
      property="og:image"
      itemprop="image"
      content="//upload.wikimedia.org/wikipedia/commons/d/d4/JPEG_example_image_decompressed.jpg"
    />
    <meta property="og:url" content="https://google.com/" />
    <meta property="og:type" content="website" />
    <meta property="og:image:type" content="image/jpeg" />

diuji di codesandbox.io

ini tautannya: https://l8ogr.csb.app/

satu hal kecil yang konyol melakukan sihir itu, dengan menghapus " http" atau " https" dari Url Gambar

jika URL gambar Anda adalah ex: https://test.com/img.jpegto//test.com/img.jpeg

<meta property="og:image" itemprop="image" content="//test.com/img.jpg"/>
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.