WhatsApp bağlantı paylaşımı için bir resim sağlayın

Böyle bir bağlantıyı paylaştığımızda web sitemize WhatsApp'ta görüntülenecek bir resmi nasıl ekleyebiliriz?

2020 standartları

WhatsApp, Twitter, Facebook için mükemmel önizleme ve bilgisayar ve mobil cihazlar için yer imi simgelerini almak birkaç adım alır. Okumak isterseniz ogp.me adresine gidin - ancak en iyi WhatsApp önizlemesini almak için bu cevaptaki 1 - 6 adımlarını okuduğunuzdan emin olun.

Lütfen dikkat: bazı uygulamalar veya web siteleri önbellek kullanır veya web sitesi önizlemesini veritabanlarına depolar. Bu, örneğin bağlantınızı WhatsApp veya Facebook'ta test ederken, büyük olasılıkla hemen bir fark görmeyeceğiniz anlamına gelir. Başka bir bağlantı (başka bir sayfa) kullanmak hile yapar. Ancak bu bağlantıyı bir kez kullandığınız anda, bu "lütfen unutmayın" bölümü baştan başlar.

1.Adım: Başlık

En fazla 65 karakter

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

2.Adım: Açıklama

En fazla 155 karakter

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

3.Adım: OG: Başlık

Maksimum 35 karakter

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

4.Adım: Og: URL

Geçerli web sayfası adresine tam bağlantı

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

Adım 5: OG: Açıklama

En fazla 65 karakter

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

Adım 6: Og: Resim

Boyutu 300 KB'tan küçük ve minimum boyutları 300 x 200 ^* olan resim (JPG veya PNG)

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

^* @RichDeBourke bundan bahsetti, ama görünüşe göre WhatsApp maksimum görüntü boyutunu (boyutlar ve dosya boyutu) artırdı. Bazı testler yaptım: her cihazda sürekli çalışmıyor. 2.x Mb görüntüleri test ettim ve bu bile 9/10 kez çalışıyor gibi görünüyordu. <300KB en güvenli yaklaşımdır, ancak 18-02-2020 tarihinden itibaren daha büyük resimler kullanarak iyi olmalısınız. Yine de dosya boyutunu 2 MB'ın altında tutmanızı tavsiye ederim. Veeğer henüz yapmadıysanız, görüntünüzü TinyPNG veya başka bir görüntü sıkıştırma algoritmasıylakesinlikle atın.

Yukarıdaki adımları tamamladıysanız, şimdi önizlemenizi WhatsApp'ta görebilirsiniz! Ancak, yukarıdaki "lütfen not edin" bölümüne dikkat edin .

Adım 7: OG: Tür

Nesnenizin grafik içinde gösterilmesi için türünü belirtmeniz gerekir. İşte mevcut global türlerin bir listesi: http://ogp.me/#types . Kendi tiplerinizi de belirleyebilirsiniz.

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

Adım 8: OG: Yerel Ayar

Kaynağın yerel ayarı. Başka dil çevirileriniz varsa og: locale: alternate öğesini de kullanabilirsiniz.

Og: yerel ayarını belirtmezseniz, varsayılan olarak en_US olur.

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

Adım 9: Twitter

En iyi Heyecan desteği için okunan bu .

Adım 10: Facebook

En iyi Facebook desteği için okunan bu .

Adım 11: Favicon

Tüm tarayıcılar ve cihazlar için en iyi favicon desteği için bunu okuyun .

Bonus adımı 12: video / ses

Ses / video paylaşmak da mümkündür. Örneğin Facebook ve Twitter videoları çok iyi paylaşıyor. Ogp.me dosyasını okuyun .

Aynı sorunu yaşadım ve sorun resmin boyutuydu. Whatsapp, boyutu 300 KB'tan büyük olan resimleri desteklemez.

Whatsapp'ta görüntü görüntülemek için en önemli özellik:

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

Ve görüntülenecek görüntünün boyutu 300KB'den az olmalıdır .

Sorun devam ederse, bu benzer sorunun cevabını da okuyun

Benim için çalışan bir çözüm bulduğum için whatsapp'ta beyaz bir liste yok sanırım. Aşağıdaki gibi yapın. 3 meta etiket ekleyin:

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

Resminiz .png biçiminde ve 600x600px boyutunda olmalı ve 'logo-yoursite.png' olarak adlandırılmalıdır (benim için çalıştıktan sonra SADECE SEVİYORUM)

Web sitenizdeki whatsapp bağlantısını eklemeyi unutmayın:

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

Bunu yap ve iyi olacaksın!

Mükemmel ayrıntılı çözümü burada belgeledim - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html Mükemmel önizlemeyi almak için yedi adım var.

Başlık: Web sayfanıza maksimum 65 karakterden oluşan Anahtar Kelime açısından zengin başlık ekleyin.

Meta Açıklama: Web sayfanızı maksimum 155 karakterle açıklayın.

og: title: Maksimum 35 karakter.

og: url: Web sayfası adresinize tam bağlantı.

og: açıklama: En fazla 65 karakter.

og: image: 300 KB'tan küçük boyutlu ve minimum 300 x 200 piksel boyutundaki resim (JPG veya PNG) önerilir.

favicon: 32 x 32 piksel boyutlarında küçük bir simge.

Yukarıdaki sayfada gerekli özelliklere, karakter sınırlamasına ve örnek etiketlere sahipsiniz. Tatmin edici bulduktan sonra oy verin.

<meta property="og:image" content="image.png" />Yukarıda bir yerde önerildiği gibi basit bir şeyin benim için çalışmadığına dikkat çekmek istiyorum (bu aslında beni haftalarca bir döngüde geçirdi). İşe yarayan şey mutlak bir URL'dir:
<meta property="og:image" content="https://domainname.com/image.png" />

veya eğik çizgi ile başlayarak (resim kök dizinde ise):
<meta property="og:image" content="/image.png" />

(Bunu bir yorum olarak eklerdim, ancak henüz izin verilmiyor. Moderatörler bunu daha uygunsa taşımaktan çekinmeyin.)

Ben de bunu kendim yapmaya çalışıyorum ve tüm doğru meta etiketleri ekledim:

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

ancak bağlantımı WhatsApp içinde paylaşırken resmi göremedim.

WhatsApp'ın görüntünün ve url bilgisinin bir tür önbelleğe alındığını da keşfettim, ne kadar süreceğini bilmiyorum.

Doğru etiketlerini ekledikten kontrol etmek için, sadece örneğin farklı url çalıştı: http://domain.com yerine http://www.domain.com .

umarım bu başka birine yardımcı olur.

Bir bugg üzerinde çalıştıktan sonra, IOS'ta HEAD öğelerinin og: image / og: description / name = description için WhatsApp aramasını durdurabileceğini öğrendim . Yani üstüne koydu siz deneyin başka her şeyi.

Bu işe yaramıyor

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

Bu iş:

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

Facebook politikalarını, uyumluluklarını ve API'sını sık sık değiştirdiğinden, mülklerinizi doğrulamak için her zaman https://developers.facebook.com/tools/debug/sharing adresine göz atmanızı öneririm .

Messenger botları veya diğer FB uygulamalarıyla çalışıyorsanız, bağlantı resimlerinin Whatsapp'ta çalışması için fb: app_id özelliğine ihtiyacınız olabilir. Daha fazla Facebook geliştiricileri webmaster sitesi. https://developers.facebook.com/docs/sharing/webmasters

Aynı sorunu yaşadım, işte çözmek.

Meta og: image eklerseniz görünmelidir

Sorun şu: http: // olmadan yazıp / ile bitirirseniz whatsapp resim göstermez. Örneğin, http://google.com/ yazarsanız, ancak google.com ile değil, resim ve açıklama gösterir

Umarım birine yardımcı olur.

Özellikle yukarıdaki iş parçacıkları sorunu ve bana nedenini düzgün bir şekilde anlamak ve bir kez ve herkes için düzeltmek için hangi sırayla çözmek için yardımcı olduğunu belirtmek için bu konuya bir cevap eklemek istiyorum:

Bu çözümle bağlantıyı sosyal medyada paylaşırken zengin önizlememi alabildim .

Bu konudaki çeşitli seçenekleri takip ettim ve aşağıda doğru cevaba en yakın olan ve hepsi sonuçlara katkıda bulundu:

1. Gereken etiketler (Odaklanacak ana etiket - og: resim)
2. Görüntü parametreleri
3. Kesinlikle yardımcı olacak araç
4. Görüntü yolu nasıl doğru verilir
5. Temel neden ve çözüm

Bu, umarım birisine kaydırmak için gereken zamanı ve doğru cevap setini ve tüm deneme ve hatalar için gereken çabayı bulacaktır.

Bu konu altında ve benim dış aramalar birkaç önerileri denedim ama benim için başka bir sorun oldu. Og: image etiketi ile gösterilen bir görüntüyü kullanma konusundaki özel talimatım Jetpack eklentisi tarafından sağlanan açık grafik etiketleri tarafından geçersiz kılınıyordu. detaylı cevabımı burada bulabilirsiniz . Ancak, bu daha takip edilen konu kısaca adımları eklemeye değer düşündüm. Umarım bu birine yardımcı olur.

Facebook Paylaşımı Debugger bana kök nedenini belirlemek ve oradan, ben şu adımları takip yardım:

1. Yukarıdaki hata ayıklayıcıyı kullanarak web sitenizde hata ayıklayın. URL'yi yazın ve hata ayıklamaya basın. Bu size bir uyarı listesi vermeli ve açık grafik etiketleri bölümlerine ilerlediğinizde, web siteniz için getirilen değerleri görebileceksiniz. Odaklanacak olan og: image etiketidir.
2. "Kazıyıcımızın URL'niz için tam olarak ne gördüğüne bakın" bağlantısına ilerleyin ve hikayenizdeki kötü adamı bulmak için og: resim etiketini arayın .
3. Şimdi, gerçekleşen bir geçersiz kılmayı kaldırmak için araçları tercih edin. Benim durumumda, aşağıdaki işlevi yararlı buldum. Jetpack'in kullanılacak bir görüntüyü belirleyemediği zamanlarda kullanılan varsayılan görüntüyü değiştirir.

Jetpack'in kullanılacak bir görüntüyü belirleyememesi durumunda kullanılan varsayılan görüntüyü değiştirir

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

En az 300 piksel x 200 piksel ve boyut <300 KB gibi görüntü parametrelerinin önerildiğini eklemeliyim. Ve bu tür genel talimatlar sizin için işe yaramıyorsa lütfen bu talimatları izleyin, çünkü o zaman sorununuz büyük olasılıkla benimkine benzer. Ayrıca, bazen en basit çözüm eklentiyi kaldırmak olabilir (onsuz yapabileceğinizi doğrulamanız şartıyla).

Sonunda şöyle bir şey görebilmelisin -

Bu yardımcı olur umarım.

NS

WhatsApp görüntü önizlemesi almak için aşağıdaki etiketlere ihtiyacınız vardır:

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

As Facebook dokümanlar diyor sen og belirtirseniz,: görüntü boyutunu getirilirken hızla yerine uyumsuz aksi olacaktır.

Görüntü formatı için PNG önerilir. En az 600x600 piksel önerilir.

Web sitenizdeki WhatsApp'ta paylaşılan bir URL'nin yanında bir resme sahip olmak istiyorsanız, URL'nin bağlandığı sayfaya aşağıdaki gibi bir meta etiket eklemeniz gerekir:

<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>

Aynı sorun vardı, og: image ekledi ve URL eğik çizgi işareti (/) ile sona erdiğinde çalışmadı. Eğik çizgiyi URL'den kaldırdıktan sonra - resim yüklenir .. İlginç bir hata ...

Aşağıdaki eylemler benim durumumda yardımcı oldu.

Görüntüyü aynı ana makinenin altına yerleştirme .

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

Gerekli görüntüyü özellikle lider alt dize ile kullanıcı aracısını algılayarak WhatsApp'a geçirmek, örnek

WhatsApp/2.18.380 A

Gönder düğmesine basmadan önce birkaç saniye beklediğinden , WhatsApp'ın og meta verilerinden resim ve açıklama almak için zamanı olacaktır.

Bu denemelerden sonra bile. Web sitemdeki resimler birkaç kez getirildi, bazen alınmadı. Https://developers.facebook.com/tools/debug/sharing ile doğruladıktan sonra

django (python) çerçevemin görüntü yolunu göreceli olarak oluşturduğunu fark ettim. Tam URL ile görüntünün yolunda değişiklik yapmak zorunda kaldım. (http: // dahil). sonra çalışmaya başladı

Ek faydalı bilgiler:

Birkaç og: görüntü sağlayabilir, whatsapp sonuncusunu kullanır. Bu, örneğin facebook 1.91: 1 oranı ve whatsapp 1: 1 istediği soruna yardımcı olacaktır.

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