Mencoba mengikuti pertanyaan ini: Berikan gambar untuk berbagi tautan whatsapp

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

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.

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

Saya juga menghadapi masalah itu Akhirnya, saya menyelesaikannya

<meta property="og:image" itemprop="image" content="http://yourdomain.com/yourfolder/imagename.png" />

Properti gambar saya

1. Dimensi: 300X200
2. Ukuran: <300KB
3. URL: http://yourdomain.com/yourfolder/imagename.png

Pastikan pada nama gambar tidak ada spasi, jika ada dua kata maka gunakan tanda garis bawah

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!

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

Dan Anda harus melihat bekerja

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.

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.

Kemudian hasilnya: sebelum dan sesudah membersihkan data dan cache WhatsApp

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>

Info berguna tambahan:

Anda dapat memberikan beberapa og: gambar, whatsapp akan menggunakan yang terakhir. Ini akan membantu dengan masalah yang misalnya facebook menginginkan rasio 1,91: 1 dan whatsapp 1: 1

https://stackoverflow.com/a/61078968/8486854

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>

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

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.

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.

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.

Anda hanya perlu mengetik pesan dengan "http: //" di awal. Misalnya: http://www.google.com menunjukkan gambar thumbnail, tetapi www.google.com tidak.

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

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.

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!

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.

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

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

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 !

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