Berikan gambar untuk berbagi tautan WhatsApp

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

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 .

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

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!

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.

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

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.

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>

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

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.

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.

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 -

Semoga ini membantu.

NS

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.

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

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

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.

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

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/