Bu soruyu takip etmeye çalıştım: Whatsapp bağlantı paylaşımı için bir resim sağlayın

Temel Facebook meta etiketleriyle basit bir HTML web sayfası oluşturdum:

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

Facebook linter doğru bir şekilde doğrulanıyor ve Facebook'ta mükemmel görünüyor, ancak WhatsApp ile paylaşmaya çalıştığımda görüntü görünmüyor.

Android'de WhatsApp'ta deniyorum

→ Bu, Örnek Web Sayfasının URL'sidir

Ben eklemeniz gerekir inanıyoruz itempropiçin og:image, meta etiketine görüntü boyutu setine sahip 256x256ve aynı zamanda eklemek zarar vermez site_name, typeve updated_time ya özellikleri :)

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

Bu meta etiketleri, örneğin Google Haritalar'da çalışırken görebilirsiniz .
Meta etiketlerinizi değiştirdikten sonra, olası önbelleklerin güncellenmesi için bir süre beklemeniz gerekebilir.

Facebook Hata Ayıklayıcısından Open Graph meta etiketlerinde hata ayıklayabilir / doğrulayabilirsiniz.
Tüm etiketlerinizi orada görebiliyorsanız, etiketlerinizin düzgün şekilde gösterilmediği sitelerin / uygulamaların Açık Grafik etiketleri için farklı gereksinimleri olabilir.

DÜZENLE:
Bir HTTP-Securebağlantıyla bir resim belirleyecekseniz , og:image:secure_urlbunun yerine kullanmanız gerekir og:image.

DÜZENLEME2:
Ayrıca og:typegerekli dört temel parametreden biri olduğu için belirtmeniz gerekir.
<meta property="og:type" content="website" />sizi doğru yöne götürmelidir.

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

Yani Whatsapp'ta resim göstermenin en önemli özelliği şudur:

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

Ve görüntülenecek resmin boyutu 300 KB'tan küçük olmalıdır

Ben de bu problemle karşılaştım Sonunda çözdüm

<meta property="og:image" itemprop="image" content="http://yourdomain.com/yourfolder/imagename.png" />

Görüntü özelliğim

1. Boyut: 300X200
2. Boyut: <300KB
3. URL: http://yourdomain.com/folder/imagename.png

Resim adında boşluk olmadığından emin olun, iki kelimeniz varsa alt çizgi işaretini kullanın

Aylarca bunu anlamaya çalıştıktan sonra, nihayet sorunu çözdüm. İşte benim çözümüm:

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

Yukarıdakileri kopyalayın, web sitesinin baş alanına yapıştırın. Whatsapp uygulamanızı KAPATIN, tekrar açın, SONRA test edin. Önbelleği temizlemeye ve VERİLERİ TEMİZLEMEYE GEREK YOKTUR.

Herkese kutsamalar!

Çözümü burada buldum Whatsapp önizleme bağlantısı 2 Mart 16'da yayınlandı

Ve çalıştığını görmelisin

İki tür kod vardır. İlk meta og: <head> içindeki görüntü

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

<body> içindeki schema.org'dan küçük resim şeması

<link itemprop="thumbnailUrl" href="url_image"> 
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> 
  <link itemprop="url" href="url_image"> 
</span>

Umarım bu yardımcı olur. Teşekkürler.

Whatsapp verilerinizi ve önbelleğinizi temizleyin (veya başka bir whatsapp kullanın)!

Android Phone : Go to SETTINGS > APPS > Application List > WhatsApp > Storage and Clear Data.

Dikkatli ol ! Bu eylemden önce mesajlarınızı yedekleyin.

Ardından sonuç: verileri temizlemeden ve WhatsApp'ı önbelleğe almadan önce ve sonra

Whatsapp üzerinde çalışmak için gereken minimum meta etiket sayısını bilmiyorum, bunu bir yerde buldum ve bu benim için kusursuz bir şekilde çalıştı. Not: Görüntü çözünürlüğü 256 x 256'dır.

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

Ek yararlı bilgiler:

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

https://stackoverflow.com/a/61078968/8486854

Https://stackoverflow.com/a/35785393/1518500 adresine yanıt olarak

Schema.org için güncellenmiş sürümü deneyin

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

veya google'dan json-ld biçimini kullanarak

<script type="application/ld+json">
 {
"@context": "http://schema.org/",
"@type": "ImageObject",
 "url": "ImgURLhere",
    "height": 800,
    "width": 1200

 }
 </script>

Hala bu sorunu yaşayan herkes için ve bana gelince, yayınlanan çözümlerin hiçbiri işe yaramadı.

Ben de benzer bir sorun yaşadım. Resim, diğer tüm paylaşım iletişim kutularında doğru şekilde gösteriliyordu. Facebook hata ayıklayıcısının og: image etiketini doğru bir şekilde içermesine rağmen, yalnızca WhatsApp resmi görüntüleyemedi.

Benim için işe yarayan çözüm: Firebase kullanıyorum. Depolamalarına yüklenen içerik için, bir medya jetonlu benzersiz bir İndirme URL'si alırsınız. Gibi bir şey:

https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/ ? alt = media & token = YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY

Bu URL'yi og: image meta etiketinde kullandım. Facebook vb. İçin çalıştı, ancak WhatsApp bu URL'den resmi indiremiyor gibi görünüyor. Bunun yerine, görüntüyü proje dizininize eklemeniz ve og: image etiketi için bu bağlantıyı kullanmanız gerekir. Artık WhatsApp'ta da düzgün çalışıyor.

Önceden (WhatsApp'ta değil, facebook'ta vb.)

<meta property="og:image" itemprop="image" content="https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/your_image?alt=media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY">

Sonra (artık WhatsApp dahil test edilen tüm paylaşılan iletişim kutularında çalışıyor)

<meta property="og:image" itemprop="image" content="https://domain_name/path_to_image">

Umarım bazılarınıza yardımcı olabilir :)

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

1. Başlık: Web sayfanıza maksimum 65 karakter içeren Anahtar Kelime açısından zengin başlık ekleyin.

2. Meta Açıklama: Web sayfanızı maksimum 155 karakter ile açıklayın.

3. og: title: Maksimum 35 karakter.

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

5. og: açıklama: Maksimum 65 karakter.

6. og: image: 300KB'den küçük ve minimum 300 x 200 piksel boyutunda resim (JPG veya PNG) önerilir.

7. 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 bulduğunuzda oy verin.

Umarım bu yardımcı olur:

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

Aynı etki alanında barındırılması gereken imgURL'yi not edin, aksi takdirde whatsapp'ta görünmez. Amazon'dan bir url yüklemeyi denedim, resim önizleme çalışmıyor.

Benim durumumda, aşağıdaki meta etiketi eklemek sorunu çözdü. Arapça içerik kullanıyordum ve görüntünün WhatsApp'ta görünmesi için bunu eklemek zorunda kaldım:

<meta property='og:locale' content='ar_AR' />

Not: İngilizce içerik kullanıyorsanız, varsayılan değer İngilizce olduğundan bu meta etiketi eklemenize gerek yoktur.

Mesajı yalnızca başında "http: //" ile yazmanız gerekir. Örneğin: http://www.google.com küçük resmi gösterir, ancak www.google.com göstermez.

Grafik verilerini açın:

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

Sadece bu 3 etiketler gerekli görünmektedir ( 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" />

Deney yapma / oynama

Benim için deneme yapmanın en kolay yolu CodeSandbox ile şu adımları izlemekti:

• Https://codesandbox.io/s/ ile bir Vanilya uygulaması oluşturun
• Meta etiketlerinizi index.htmldosyada uygun şekilde değiştirin
• ctrl+sUygulamayı çatallayacak ve kendi benzersiz url'sini oluşturacak dosyayı ( ) kaydedin
• Önizlemeyi görmek için bu url'yi WhatsApp'a yapıştırın (mesaj göndermenize bile gerek yok)
• Meta etiketlerde değişiklik yapın
• URL'yi değiştirin - URL'nin sonuna tek bir karakter ekleyin. Bu, "önceki önbelleğe alınmış önizlemeyi" atar

Teklif gerekli

WhatsApp buna duyarlı olduğu için HER ZAMAN tekliflerinizin ve kapanış tekliflerinin olduğundan emin olun. Yukarıdaki örneğiniz, sizin için bir kapanış fiyatına sahip değil og:description.

Hala bunu yaşayan biri için , Amazon S3'te sunulan görüntülerin WhatsApp mobil uygulaması için çalışmadığını fark ettim (hem Android hem de iOS, ancak Mac masaüstü uygulaması iyi durumda). Bizim AWS ayarlar bu neden çok mümkün, ama ben de diğer sitelerdeki desen (örn fark bu bir bir ile og:imagebir alan adı gibi isabet https://s3.amazonaws.com).

Denediğim başka hiçbir platformda sorun yoktu, sadece WhatsApp mobil uygulamaları. En kısa sürede kızkardeşimi belirttiği gibi <meta property="og:image" content="https://some-non-aws-location" />(alenen tabii paylaşılan) bir Google Drive dosyası gibi başka kamu URL'ye, bu cezayı çalıştı.

Ayrıca, özel bir etki alanıyla AWS'de barındırılan ve dağıtılan depomuzdaki görüntüyü kaydetmeyi denedim ve bu da işe yaramadı. Öyleyse, suçlu hala AWS gibi görünüyor. Umarım bu birine yardımcı olur!

Tüm bu ipuçlarından sonra, küçük resim hala görünmüyorsa, şunu deneyin:

Benim sorunum, üretim için oluşturulduğunda og özniteliklerinden çift tırnakların kaldırılmasıydı (npm run build). Minify modülü bunu yapıyordu.

Dolayısıyla çözüm, bu kaldırmayı iptal ederek removeAttributeQuotes özniteliğini false olarak ayarlamaktı:

minify: {
    ...
    removeAttributeQuotes: false,
    ...
}

Geliştirme ortamımda bunu "webpack.prod.conf.js" dosyasında ayarlıyorum. Eşdeğer dosyanıza ayarlayın.

Sadece yeniden inşa edin ve şimdi çalışıyor.

Buradaki cevaplardaki tüm talimatları takip ettim ve yine de işe yarayamadım. Görünüşe göre WhatsApp, görüntüyü görüntülemek için uzantıya ihtiyaç duyuyor.

Yani bir jpeg'i işaret eden bir etiket için:

<meta property="og:image" itemprop="image" content="https://example.com/someimageid"/>

Uzantıya izin vermek için API'yi değiştirin ve şunları kullanın:

<meta property="og:image" itemprop="image" content="https://example.com/someimageid.jpeg"/>

ve sonra işe yarıyor gibi görünüyor ...

Aynı sorunu yaşadım, biraz denedikten sonra nihayet çalıştırdım. Önizlemeyi çalıştırmak için web sayfamda kullandığım 8 html etiketi:

In <head>etiketi:

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

In <body>etiketi:

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

Bu 8 etiket (6 kafada, 2 gövdede) mükemmel çalıştı.

İpuçları:

1. Dizin biçimi yerine tam görüntü konumu URL'sini kullanın, yani images / OG_thumb.jpg kullanmayın

2. Vaka duyarlı dosya uzantısı: Barındırma sağlayıcınızdaki resim uzantısı adı ".JPG" ise, ".jpg" veya ".jpeg" kullanmayın. Barındırma sağlayıcısı ve tarayıcı kombinasyonu hatasına bağlı olarak hata olabilir veya olmayabilir güvenli olması için dosya uzantısı durumuyla eşleşmesi daha kolaydır.

3. Yukarıdaki adımları uyguladıktan sonra, küçük resim önizlemesi hala WhatsApp mesajında ​​görünmüyorsa, o zaman:

a. Mobil uygulamayı durdurmaya zorlayın (Android'de denedim) ve tekrar deneyin

b. OG etiketini önizlemek için çevrimiçi aracı kullanın. Örneğin, kullandım: https://searchenginereports.net/open-graph-checker

c. Mobil tarayıcıda OG başparmağına doğrudan bağlantı yapıştırın ve tarayıcıyı 4-5 kez yenileyin. örneğin https://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG

Kasım 2020: Deneyimlediğim gibi, bu meta etiketler gereklidir ve Whatsapp'daki paylaşılan bağlantıda gördüklerinizi etkiler ve 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>

ve içeride <body> :

<a href="https://wa.me/?text=https://myaddress.blogspot.com/2020/11/try-16.html" target="_blank" rel="nofollow">Hello whatsApp</a>

Daha fazla açıklama:

Eğer varsayalım 1- <meta content='example.com/page1' property='og:url'/>ve iç gövde başvurmak <a href="https://wa.me/?text=example.com/page2" >Hello whatsApp</a>, og:imageve og:descriptionsayfanın example.com/page2beden (belki bariz) daki linke sözü edilen WhatsApp sunulabilir.Dijital sönecektir.

2-Ne zaman add/changegibi herhangi bir açık grafik etiketleri og:descriptionve yine size tıklayarak <a></a>değiştirmek sürece sayfa / vücut üzerinde etiketi, ne sen WhatsApp gördüğünüz değişmez href="I am a new URL"çıkartmalarınızın <a></a>etiketi veya WhatsApp açık cache !!

3- Png/jpgTümü 300 kb'den küçük ve tümü piksel olarak 300 * 300'den büyük olan resimleri denedim ve resim içeriği bir https veya bir httpurl idi, yukarıdaki kod her ikisini de destekliyor (Gerek yok og:image:secure_url).

4- ogWhatsApp'ta bir küçük resim olması için içerik eklediğinizde / değiştirdiğinizde , değişiklikler ilk denemede etkilemez !! ve ikinci denemede başarılı. Çok ilginç !

Bu Çözüm benim için çalışıyor:

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

codeandbox.io'da test edildi

bağlantı burada: https://l8ogr.csb.app/

Resim URL'sinden " http" veya " https" öğesini kaldırarak bu sihri aptalca küçük bir şey yaptı

resim URL'niz ex: https://test.com/img.jpegto//test.com/img.jpeg

<meta property="og:image" itemprop="image" content="//test.com/img.jpg"/>