Berikan gambar untuk berbagi tautan WhatsApp

186

Bagaimana kami bisa memasukkan gambar di situs web kami untuk ditampilkan di WhatsApp ketika kami membagikan tautan seperti ini?

masukkan deskripsi gambar di sini

maxdaniel98
sumber
jika itu akan menjadi beberapa halaman untuk orang yang berbeda, Anda juga dapat mencoba ShareSocial.in
Tirthraj Rao
1
Anda dapat menguji dom halaman Anda di iframely.com/embed
Piotr Kowalski
Uji bagaimana Facebook menerjemahkannya: developers.facebook.com/tools/debug
Noam

Jawaban:

367

Standar 2020

Dibutuhkan beberapa langkah untuk mendapatkan pratinjau yang sempurna untuk WhatsApp, Twitter, Facebook dan ikon bookmark untuk perangkat pc dan seluler. Jika Anda suka membaca, buka ogp.me - tetapi pastikan untuk membaca langkah 1 - 6 dalam jawaban ini untuk mendapatkan pratinjau WhatsApp terbaik.

Harap dicatat: beberapa aplikasi atau situs web menggunakan cache atau bahkan menyimpan pratinjau situs web ke database mereka. Ini artinya ketika Anda menguji tautan Anda di WhatsApp atau Facebook misalnya, kemungkinan besar Anda tidak akan melihat perbedaan apa pun. Menggunakan tautan lain (halaman lain) akan membantu. Tapi begitu Anda menggunakan tautan itu sekali, bagian "harap dicatat" ini mulai dari awal lagi.


Langkah 1: judul

Maksimal 65 karakter

<title>your keyword rich title of the website and/or webpage</title>

Langkah 2: deskripsi

Maksimal 155 karakter

<meta name="description" content="description of your website/webpage, make sure you use keywords!">

Langkah 3: og: judul

Maksimal 35 karakter

<meta property="og:title" content="short title of your website/webpage" />

Langkah 4: og: url

Tautan lengkap ke alamat halaman web saat ini

<meta property="og:url" content="https://www.example.com/webpage/" />

Langkah 5: og: deskripsi

Maksimal 65 karakter

<meta property="og:description" content="description of your website/webpage">

Langkah 6: og: gambar

Gambar (JPG atau PNG) dengan ukuran kurang dari 300KB dan dimensi minimum 300 x 200 *

<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">

* @RichDeBourke menyebutkan ini kepada saya, tetapi ternyata WhatsApp telah meningkatkan ukuran gambar maksimumnya (dimensi serta ukuran file). Saya melakukan beberapa tes: itu tidak bekerja secara konsisten setiap kali di setiap perangkat. Saya menguji gambar 2,x Mb dan bahkan itu tampaknya berhasil 9/10 kali. <300KB adalah pendekatan teraman, tetapi Anda harus baik-baik saja menggunakan gambar yang lebih besar pada 18-02-2020. Saya akan merekomendasikan menjaga ukuran file di bawah 2MB. Dan jelas membuang gambar Anda melalui TinyPNG atau algoritma kompresi gambar lainnya jika Anda belum melakukannya.



Jika Anda menyelesaikan langkah-langkah di atas, sekarang Anda dapat melihat pratinjau Anda di WhatsApp! Namun, perhatikan bagian "harap dicatat" di atas.



Langkah 7: og: ketik

Agar objek Anda diwakili dalam grafik, Anda perlu menentukan tipenya. Berikut daftar jenis global yang tersedia: http://ogp.me/#types . Anda juga dapat menentukan tipe Anda sendiri.

<meta property="og:type" content="article" />

Langkah 8: og: lokal

Lokasi sumber daya. Anda juga dapat menggunakan og: locale: alternate jika tersedia terjemahan bahasa lain.

Jika Anda tidak menentukan og: lokal, defaultnya adalah en_US.

<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />

Langkah 9: Twitter

Untuk dukungan Twitter terbaik, baca ini .


Langkah 10: Facebook

Untuk dukungan Facebook terbaik, baca ini .


Langkah 11: favicon

Untuk dukungan favicon terbaik untuk semua browser dan perangkat, baca ini .


Langkah bonus 12: video / audio

Juga dimungkinkan untuk berbagi audio / video. Facebook dan twitter misalnya berbagi video dengan sangat baik. Baca ogp.me .

Derk Jan Speelman
sumber
11
Perhatikan bahwa ini mungkin tidak berfungsi jika situs Anda berjalan di https dengan sertifikat yang ditandatangani sendiri. Terverifikasi di Facebook dan whatsapp
Indraraj
2
@Indraraj terima kasih telah berbagi, ini juga dapat ditemukan di dokumen Facebook untuk pengembang
Derk Jan Speelman
2
<meta charset = "utf-8"> <meta http-equiv = "Kompatibel dengan X-UA" content = "IE = edge"> <meta name = "viewport" content = "width = lebar perangkat, skala awal = 1, skala maksimum = 1, skala pengguna = tidak ada "> <title> </title> <meta name =" description "content =" "> <meta property =" og: title "content =" "/> <meta property = "og: url" content = "" /> <meta properti = "og: description" content = ""> <meta property = "og: image" content = "mappointer.png"> <meta property = "og: image: width" content = "" /> <meta property = "og: image: height" content = "" /> saya meletakkan semua tag di atas.
BALU KB
2
@DerkJanSpeelman sekarang berfungsi dengan baik. Terima kasih. saya lupa menyimpan dimensi gambar sebagai 300 * 200.
BALU KB
1
@DerkJanSpeelman Saya tidak mengerti, situs ini: jornada.unam.mx/ultimas/2018/06/19/... memiliki lebih dari 35 karakter dan pratinjau gambar berfungsi. Di mana saya dapat menemukan spesifikasi yang benar?
elios264
19

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

Jadi properti paling penting untuk menampilkan gambar di Whatsapp adalah:

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

Dan ukuran gambar yang akan ditampilkan harus kurang dari 300KB .

Jika masalah tetap ada, bacalah juga jawaban untuk pertanyaan serupa ini

Cedriga
sumber
3
+1 untuk info batas ukuran tetapi tidak benar. Aplikasi Whatsapp mengambil 300.000 byte pertama (Http header: "Range: bytes = 0-299999")
Adriano Tornatore
7
Bagaimana orang tahu tentang batas ukuran 300.000 byte atau 300 kB (k kecil)? Aku mencari sumber di internet tapi tidak bisa menemukan batas ukuran ini di website WhatsApp atau di situs web Open Graph Protocol ogp.me .
ʕ ᵔᴥᵔ ʔ
url_image perlu https dilayani
tito.icreativos
12

Saya kira tidak ada daftar putih di whatsapp, karena saya menemukan solusi yang bekerja untuk saya. Lakukan sebagai berikut. masukkan 3 tag meta:

<meta property="og:image" content="http://yourimage_with_complete_URL.png"/>  
<meta property="og:title" content="Your Title"/>  
<meta property="og:description" content="Your description."/>  

Gambar Anda harus dalam format .png dan dimensi 600x600px dan harus dinamai 'logo-yoursite.png' (setelah itu berfungsi untuk saya, HANYA SEPERTI ITU)

Jangan lupa untuk memasukkan tautan ke whatsapp di situs web Anda:

<a href='whatsapp://send?text=Text to send withe message: http://www.yoursite.com'>whatsApp</a>

Lakukan ini dan Anda akan melakukannya dengan baik!

Alejandro Brasil
sumber
gambar tidak ditampilkan untuk saya, Apakah Anda punya solusi lain?
Keyur Shah
1
Mungkin juga dengan gambar yang lebih besar! Dalam jawaban dari @Cedriga mengatakan gambar tidak bisa lebih besar dari 300kb, dia benar.
Derk Jan Speelman
1
Jelas bukan namanya. Dan saya dapat mengonfirmasi bahwa JPG berfungsi.
workwise
1
Tautan ke whatsapp bukan yang kami lewatkan, saya percaya dan ya, seperti kata @ workwise, baik PNG dan JPG pasti berfungsi.
aashima
9

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 dalam maksimal 155 karakter.

og: judul: Maksimal 35 karakter.

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

og: deskripsi: Maksimal 65 karakter.

og: gambar: Gambar (JPG atau PNG) dengan ukuran kurang dari 300KB dan dimensi minimum 300 x 200 piksel disarankan.

favicon: Ikon kecil dimensi 32 x 32 piksel.

Di halaman di atas, Anda memiliki spesifikasi yang diperlukan, batas karakter, dan tag sampel. Jangan pilih-pilih begitu Anda merasa memuaskan.

Pergi
sumber
Jawaban sempurna untuk apa yang saya cari Ini sangat mengesankan: og:image : Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised.
Amol
Parameter ini sangat penting dan saya pikir fokusnya harus pada og: tag gambar. Disarankan batas ukuran 300 KB dan minimum 300px x 200px. Ingatlah bahwa dimensi dalam piksel.
aashima
7

Saya ingin menarik perhatian pada fakta bahwa yang sederhana <meta property="og:image" content="image.png" />, seperti yang disarankan di suatu tempat di atas, tidak bekerja untuk saya (ini sebenarnya membuat saya dalam lingkaran selama berminggu-minggu sekarang). Yang berfungsi adalah URL absolut:
<meta property="og:image" content="https://domainname.com/image.png" />

atau memulai dengan garis miring (jika gambar ada di direktori root):
<meta property="og:image" content="/image.png" />

(Saya akan menambahkan ini sebagai komentar, tapi saya belum diizinkan. Moderator merasa bebas untuk memindahkan ini jika lebih tepat.)

Anna Kleiner
sumber
Saya pikir lebih baik jika seseorang memberikan jalur yang berkualitas daripada beralih ke jalur relatif. Saran satu di jawaban Anda bekerja untuk saya.
aashima
Saya pikir Anda perlu menggunakan gambar .jpg, .png tidak akan bekerja dengan whatsapp.
Andrew Lihat
4

Saya sudah mencoba melakukan ini sendiri dan saya telah menambahkan semua tag meta yang tepat:

<meta property="og:image" itemprop="image" content="image_url" />
<meta property="og:image:url" itemprop="image" content="image_url" />
<meta property="og:image:type" content="image/png" />

tetapi belum bisa melihat gambar saat membagikan tautan saya di dalam WhatsApp.

Saya telah menemukan bahwa WhatsApp juga melakukan semacam caching gambar dan info url, tidak tahu berapa lama.

Untuk memeriksa apakah saya telah memasukkan tag yang benar, saya hanya mencoba url yang berbeda, misalnya: http://domain.com alih-alih http://www.domain.com .

semoga ini membantu orang lain.

jony89
sumber
Bekerja dengan baik untuk saya .. Terima kasih!
Abhishek Kumbhani
4

Setelah bekerja di kereta, menemukan bahwa di iOS, elemen-elemen di HEAD mungkin menghentikan pencarian WhatsApp dari og: image / og: description / name = description. Jadi cobalah dulu untuk menempatkan mereka di atas segalanya.

Ini tidak berhasil

<head>
    <div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>

    <meta property="og:description" content="description" />
    <meta property="og:image" content="http://cdn.some.com/random.jpg" />
</head>

Pekerjaan ini:

    <head>
        <meta property="og:description" content="description" />
        <meta property="og:image" content="http://cdn.some.com/random.jpg" />

        <div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
    </head>
Kim Sant
sumber
2 sen saya dan saya harap ini membantu seseorang. Untuk kasus saya twitter:imagesedang kosong, menonaktifkan WhatsApp dari mendapatkan og:image. Mencoba menghapus <meta>tag lain dapat membantu men-debug fungsi berbagi sosial.
Sunny Pun
Saya kira whatsapp sedang membaca dari bawah, dan berhenti setelah sesuatu yang tidak terduga ditemukan (div, twitter kosong: gambar). Idenya di sini adalah untuk memberitahu orang-orang untuk menempatkan meta og:imagedi atas, dan memastikan itu dibaca
Kim Sant
3
Mengapa Anda menempatkan <div> di bagian <head>?
Tomas Gonzalez
Saya bekerja untuk perusahaan yang membuat dan "membentuk kembali" konten web Anda dengan UX yang bagus, SEO, dll. Jika Anda mengorek kepala dari klien dan menambahkan og: metadata di bawah ini tidak berfungsi. Saya senang melakukan mental reverse engineering tentang bagaimana proses whatsapp HTML, tidak lagi melakukan debugging yala yala yala!
Kim Sant
4

Saya sarankan selalu melihat https://developers.facebook.com/tools/debug/sharing untuk memvalidasi properti Anda karena Facebook sering mengubah kebijakan, kepatuhan, dan API.

Jika Anda bekerja dengan bot Messenger atau aplikasi FB lainnya, Anda mungkin memerlukan properti fb: app_id agar gambar tautan berfungsi di Whatsapp. Lebih banyak di situs pengembang webmaster Facebook. https://developers.facebook.com/docs/sharing/webmasters

Braconnot_P
sumber
Banyak orang menggunakan Yoast SEO di Wordpress. Ia menambahkan og: gambar pada posting hanya jika Anda menambahkan gambar facebook di tab Yoast SEO pada setiap posting.
Braconnot_P
2

Saya memiliki masalah yang sama, di sini adalah untuk menyelesaikannya.

Itu harus muncul jika Anda menambahkan meta og: image

Masalahnya adalah whatsapp tidak akan menampilkan gambar jika Anda mengetik tanpa http: // dan diakhiri dengan / Misalnya, muncul gambar dan deskripsi jika Anda mengetik http://google.com/ tetapi tidak dengan google.com

Semoga ini bisa membantu seseorang.

jurgel
sumber
2

Saya ingin menambahkan jawaban pada utas ini untuk secara spesifik menyebutkan mana dari utas di atas yang membantu saya memecahkan masalah dan urutan yang dapat diikuti untuk memahami dengan benar akar permasalahan dan memperbaikinya sekali dan untuk semua:

Saya bisa mendapatkan pratinjau kaya saya sambil membagikan tautan di media sosial dengan solusi ini .

Saya mengikuti berbagai opsi di utas ini dan di bawah ini adalah yang paling dekat dengan jawaban yang benar dan semuanya berkontribusi pada hasil akhir:

  1. Tag diperlukan (Tag utama untuk fokus pada - og: gambar)
  2. Parameter gambar
  3. Alat yang pasti akan membantu
  4. Cara memberi jalur gambar dengan benar
  5. Akar penyebab dan solusinya

Mudah-mudahan ini akan menghemat waktu yang dibutuhkan seseorang untuk menelusuri dan menemukan set jawaban yang tepat dan upaya yang diperlukan untuk semua percobaan dan kesalahan.

aashima
sumber
2

Saya mencoba beberapa saran di bawah utas ini dan dari pencarian eksternal saya, tetapi itu adalah masalah lain bagi saya. Instruksi khusus saya untuk menggunakan gambar yang ditunjukkan oleh og: tag gambar sedang diganti oleh tag grafik terbuka yang disediakan oleh plugin Jetpack. Anda dapat menemukan jawaban terperinci saya di sini . Namun, saya pikir perlu menambahkan langkah-langkah singkat di utas yang lebih banyak diikuti ini. Semoga ini bisa membantu seseorang.

The Facebook Berbagi Debugger membantu saya mengidentifikasi akar penyebab dan dari sana, saya mengikuti langkah-langkah ini:

  1. Debug situs web Anda menggunakan debugger di atas. Cukup ketik URL dan tekan debug. Ini akan memberi Anda daftar peringatan dan setelah Anda menggulir ke bawah ke bagian tag grafik terbuka, Anda akan dapat melihat nilai-nilai yang diambil untuk situs web Anda. Yang menjadi fokus adalah og: image tag
  2. Gulir lebih jauh ke bawah ke tautan "Lihat persis apa yang dilihat oleh scraper kami untuk URL Anda" dan cari tag og: image untuk menemukan penjahat dalam cerita Anda.
  3. Sekarang cukup, pilih cara untuk menghapus override yang terjadi. Dalam kasus saya, saya menemukan fungsi berikut bermanfaat. Ini mengubah gambar default yang digunakan setiap saat Jetpack tidak dapat menentukan gambar untuk digunakan.

Ini mengubah gambar default yang digunakan setiap saat Jetpack tidak dapat menentukan gambar untuk digunakan

function custom_jetpack_default_image() {
    return 'YOUR_IMAGE_URL';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );

Saya harus menambahkan bahwa parameter gambar seperti minimum 300px x 200px dan ukuran <300 KB direkomendasikan. Dan tolong ikuti instruksi ini jika instruksi umum seperti itu tidak berhasil untuk Anda, karena, maka kemungkinan besar masalah Anda mirip dengan milikku. Juga, kadang-kadang solusi paling sederhana mungkin hanya dengan menghapus plugin (asalkan Anda memverifikasi bahwa Anda dapat melakukannya tanpa itu).

Pada akhirnya Anda harus dapat melihat sesuatu seperti - masukkan deskripsi gambar di sini

Semoga ini membantu.

NS

Pendongeng Nokturnal
sumber
1

Anda memerlukan tag berikut untuk mendapatkan pratinjau gambar WhatsApp:

<meta property="og:title" content="Website name" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://url.com/" />
<meta property="og:description" content="Website description" />
<meta property="og:image" content="image.png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="600" />

Seperti Facebook docs kata , jika Anda menentukan og: ukuran gambar itu akan diambil dengan cepat alih-alih secara asinkron.

PNG direkomendasikan untuk format gambar. Direkomendasikan setidaknya 600x600 piksel.

moreirapontocom
sumber
Dalam kasus saya, saya memiliki gambar 1200 * 628 piksel yang berarti saya harus memberikan seperti <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="628" />saya benar? Apakah kita perlu memberikan lebar dan tinggi gambar (yang dimiliki gambar) dalam tag atau apa pun yang akan dilakukan oleh pilxels gambar Jika kita menyebutkan lebar dan tinggi dalam tag meta itu akan ditampilkan dalam dimensi itu? Tolong jelaskan @moreirapontocom
siluveru kiran kumar
0

Jika Anda ingin memiliki gambar di sebelah url dari situs web yang dibagikan seseorang di WhatsApp, Anda harus meletakkan metatag pada laman tempat tautan URL, seperti ini:

<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>
maxdaniel98
sumber
3
Hai! Saya sudah mencoba ini, dan bekerja sebagai prefek dengan debugger URL Facebook, namun pesan whatsapp masih belum menunjukkan thumnail saya. Inilah orang lain, yang memiliki masalah yang sama: stackoverflow.com/questions/25100917/…
Lepi
@AkhilSekharan jawaban yang benar dapat ditemukan di sini: stackoverflow.com/a/32154775/501206
stevenw00
Terima kasih steve. Saya sudah mencoba cara itu dan sampai pada kesimpulan bahwa WhatsApp memiliki Daftar Putih internal domain yang dapat menampilkan thumbnail. Misalnya youtube
Akhil Sekharan
2
Saya sampai pada kesimpulan yang sama ... FB debugger: 100% ok. Pratinjau Kaya: 100% ok (termasuk Watsapp). Ketika saya mencoba berbagi dengan WhatsApp gambar tidak muncul. Url dalam kasus saya adalah robotiqu.es ... tidak ada respons setahun kemudian?
Juanjo
gambar tidak ditampilkan untuk saya, bisakah ada yang punya solusi @Juanjo
Shah
0

Punya masalah yang sama, tambah og: gambar dan tidak berfungsi sementara url diakhiri dengan tanda garis miring (/). Setelah menghapus garis miring dari URL - gambar dimuat .. Bug menarik ...

Yedidia
sumber
0

Tindakan berikut membantu dalam kasus saya.

Menempatkan gambar di bawah host yang sama .

<meta property="og:url" content="https://www.same-host.com/whatsapp-image.png" />

Melewati gambar yang dibutuhkan ke WhatsApp secara khusus dengan mendeteksi agen penggunanya dengan memimpin substring, misalnya

WhatsApp/2.18.380 A

Menunggu beberapa detik sebelum benar-benar menekan tombol kirim, sehingga WhatsApp akan memiliki waktu untuk mengambil gambar dan deskripsi dari metadata.

baur
sumber
Jika saya mengetik URL dan menunggu beberapa saat maka akan mendapatkan pratinjau setelah itu. Jika saya menekan tombol kirim maka akan ditampilkan, Jika saya mengetik URL dan menekan tombol kirim tanpa penundaan (sebelum mengambil informasi meta tag) maka pratinjau tidak ditampilkan.
siluveru kiran kumar
0

Bahkan setelah percobaan ini. Gambar situs web saya diambil beberapa kali dan terkadang tidak. Setelah divalidasi dengan https://developers.facebook.com/tools/debug/sharing

menyadari bahwa kerangka Django (python) saya sedang merender jalur gambar secara relatif. Saya harus membuat perubahan pada jalur gambar dengan url penuh. (termasuk http: //). kemudian mulai bekerja

Siddaram H
sumber
0

Info berguna tambahan:

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

<meta property="og:image" content="https://www.link.com/facebook.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />


<meta property="og:image" content="https://www.link.com/whatsapp.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />

https://roei.stream/2018/11/18/ideal-open-graph-image-size-for-whatsapp-link-share/

https://css-tricks.com/essential-meta-tags-social-media/

SinunHenkka
sumber