Showing Thumbnail for link in WhatsApp || og:image

2019-01-07 04:27发布

站内问答 / Android
1743 11 5

Tried to follow this question : Provide a picture for whatsapp link sharing

enter image description here

I have created a simple HTML webpage with the basic Facebook metatags:

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

The Facebook linter validate correctly and in Facebook it shows perfect, but when I try to share by WhatsApp the image doesn't show.

I'm trying it on WhatsApp on Android

→ This is the URL of the Sample Webpage

11条回答
混吃等死
2楼-- · 2019-01-07 05:08

I found the solution here Whatsapp preview link posted on 2 March 16

And you should see working Before and after screenshoot

enter image description here

There is two kind of code. First meta og:image inside <head>

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

Thumbnail schema from schema.org inside <body>

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

Hope this help. Thanks.

查看更多
0人赞 添加讨论(0) 举报
太酷不给撩
3楼-- · 2019-01-07 05:09

I had the same issue and the problem was the size of the picture. Whatsapp doesn't support picture with a size greater than 300KB.

So the most important property to display image on Whatsapp is: 

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

And the size of the image to display must be less than 300KB

查看更多
0人赞 添加讨论(0) 举报
你好瞎i
4楼-- · 2019-01-07 05:13

I don't know about the minimum number of meta tags required to work on whatsapp, found this in somewhere and this worked for me flawlessly. Note: Image resolution is 256 x 256.

   <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>
查看更多
0人赞 添加讨论(0) 举报
男人必须洒脱
5楼-- · 2019-01-07 05:14

In reply to https://stackoverflow.com/a/35785393/1518500

Try the updated version for schema.org

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

or using the json-ld format from google

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

 }
 </script>
查看更多
0人赞 添加讨论(0) 举报
Evening l夕情丶
6楼-- · 2019-01-07 05:16

I documented the perfect detailed solution here - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html There are seven steps to be done to get the perfect preview.

  1. Title : Add Keyword rich title to your webpage with maximum of 65 characters.

  2. Meta Description : Describe your web page in a maximum of 155 characters.

  3. og:title : Maximum 35 characters.

  4. og:url : Full link to your webpage address.

  5. og:description : Maximum 65 characters.

  6. og:image : Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised.

  7. favicon : A small icon of dimensions 32 x 32 pixels.

In the above page, you have the required specifications, the character limit and sample tags. Do upvote once you find it satisfactory.

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)