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
content="./images/logo.png"
?Jawaban:
Saya yakin Anda perlu menambahkan
itemprop
keog:image
meta tag, mengatur ukuran gambar256x256
dan juga tidak ada salahnya untuk menambahkansite_name
,type
danupdated_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-Secure
link, anda perlu menggunakanog:image:secure_url
bukanog:image
.EDIT2:
Anda juga perlu menentukan
og:type
karena ini adalah salah satu dari empat parameter dasar yang diperlukan.<meta property="og:type" content="website" />
seharusnya membawa Anda ke arah yang benar.sumber
itemprop="image"
. Pesan kesalahan:Cannot GET /logos/logo_512.png
property="og:image:secure_url"
alih-alihproperty="og:image"
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
sumber
Saya juga menghadapi masalah itu Akhirnya, saya menyelesaikannya
<meta property="og:image" itemprop="image" content="http://yourdomain.com/yourfolder/imagename.png" />
Properti gambar saya
Pastikan pada nama gambar tidak ada spasi, jika ada dua kata maka gunakan tanda garis bawah
sumber
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!
sumber
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.
sumber
Hapus data dan cache whatsapp Anda (atau gunakan whatsapp lain)!
Android Phone : Go to SETTINGS > APPS > Application List > WhatsApp > Storage and Clear Data.
Kemudian hasilnya: sebelum dan sesudah membersihkan data dan cache WhatsApp
sumber
https://link.com/?_=92375293579
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>
sumber
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
sumber
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>
sumber
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 :)
sumber
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.
Judul: Tambahkan judul kaya Kata Kunci ke halaman web Anda dengan maksimal 65 karakter.
Deskripsi Meta: Jelaskan halaman web Anda dengan maksimal 155 karakter.
og: title: Maksimum 35 karakter.
og: url: Tautan lengkap ke alamat halaman web Anda.
og: description: Maksimum 65 karakter.
og: image: Gambar (JPG atau PNG) berukuran kurang dari 300KB dan disarankan dimensi minimum 300 x 200 piksel.
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.
sumber
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.
sumber
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.
sumber
Anda hanya perlu mengetik pesan dengan "http: //" di awal. Misalnya: http://www.google.com menunjukkan gambar thumbnail, tetapi www.google.com tidak.
sumber
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"/>
sumber
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:
index.html
filectrl+s
) yang akan membuat aplikasi bercabang dan menghasilkan url uniknya sendiriKutipan 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
.sumber
<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, pertimbangkanminify.removeAttributeQuotes
untuk menyetel kefalse
<head>
bagian Anda ke dalam aplikasi vanilla. Untuk mendapatkan html mentah situs web Anda, gunakan opsi "lihat sumber halaman" (ada di ChromeCTRL + U
).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:image
domain seperti memukulhttps://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!
sumber
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.
sumber
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 ...
sumber
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
sumber
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:image
danog:description
dari halamanexample.com/page2
akan ditampilkan di WhatsApp seperti yang Anda rujuk pada tautan Anda di badan (mungkin jelas).2-Ketika Anda
add/change
tag grafik terbuka sepertiog: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 mengubahhref="I am a new URL"
dari Anda<a></a>
tag atau menghapus cache WhatsApp !!3-Saya mencoba
Png/jpg
gambar, semuanya berukuran kurang dari 300 kb dan semuanya lebih besar dari 300 * 300 piksel, dan konten gambar adalah ahttps
atauhttp
url, kode di atas mendukung keduanya (Tidak perluog:image:secure_url
).4-Setiap kali Anda menambah / mengubah
og
konten, untuk memiliki thumbnail di WhatsApp, perubahan tersebut tidak memengaruhi percobaan pertama !! dan berhasil pada percobaan kedua. Sangat aneh !sumber
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 Gambarjika URL gambar Anda adalah ex:
https://test.com/img.jpeg
to//test.com/img.jpeg
<meta property="og:image" itemprop="image" content="//test.com/img.jpg"/>
sumber