Bagaimana kami bisa memasukkan gambar di situs web kami untuk ditampilkan di WhatsApp ketika kami membagikan tautan seperti ini?
html
meta-tags
whatsapp
facebook-opengraph
maxdaniel98
sumber
sumber
Jawaban:
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
Langkah 2: deskripsi
Maksimal 155 karakter
Langkah 3: og: judul
Maksimal 35 karakter
Langkah 4: og: url
Tautan lengkap ke alamat halaman web saat ini
Langkah 5: og: deskripsi
Maksimal 65 karakter
Langkah 6: og: gambar
Gambar (JPG atau PNG) dengan ukuran kurang dari 300KB dan dimensi minimum 300 x 200 *
* @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.
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.
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 .
sumber
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:
Dan ukuran gambar yang akan ditampilkan harus kurang dari 300KB .
Jika masalah tetap ada, bacalah juga jawaban untuk pertanyaan serupa ini
sumber
Saya kira tidak ada daftar putih di whatsapp, karena saya menemukan solusi yang bekerja untuk saya. Lakukan sebagai berikut. masukkan 3 tag meta:
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:
Lakukan ini dan Anda akan melakukannya dengan baik!
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.
Di halaman di atas, Anda memiliki spesifikasi yang diperlukan, batas karakter, dan tag sampel. Jangan pilih-pilih begitu Anda merasa memuaskan.
sumber
og:image : Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised.
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.)
sumber
Saya sudah mencoba melakukan ini sendiri dan saya telah menambahkan semua tag meta yang tepat:
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.
sumber
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.
sumber
twitter:image
sedang kosong, menonaktifkan WhatsApp dari mendapatkanog:image
. Mencoba menghapus<meta>
tag lain dapat membantu men-debug fungsi berbagi sosial.og:image
di atas, dan memastikan itu dibacaSaya 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
sumber
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.
sumber
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:
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.
sumber
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:
Ini mengubah gambar default yang digunakan setiap saat Jetpack tidak dapat menentukan gambar untuk digunakan
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 -
Semoga ini membantu.
NS
sumber
Anda memerlukan tag berikut untuk mendapatkan pratinjau gambar WhatsApp:
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.
sumber
<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 @moreirapontocomJika 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:
sumber
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 ...
sumber
Tindakan berikut membantu dalam kasus saya.
Menempatkan gambar di bawah host yang sama .
Melewati gambar yang dibutuhkan ke WhatsApp secara khusus dengan mendeteksi agen penggunanya dengan memimpin substring, misalnya
Menunggu beberapa detik sebelum benar-benar menekan tombol kirim, sehingga WhatsApp akan memiliki waktu untuk mengambil gambar dan deskripsi dari metadata.
sumber
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
sumber
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
https://roei.stream/2018/11/18/ideal-open-graph-image-size-for-whatsapp-link-share/
https://css-tricks.com/essential-meta-tags-social-media/
sumber