当我们分享这样的链接时,我们如何在我们的网站中包括一张图片来显示在WhatsApp上?


当前回答

我想whatsapp没有白名单,因为我找到了一个适合我的解决方案。请按照以下步骤操作。 插入3个元标签:

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

你的图片必须是。png格式,600x600px尺寸,并且必须命名为“logo-yoursite.png” (曾经它为我工作就像那样)

不要忘记在你的网站上插入whatsapp的链接:

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

这样做,你会做得很好!

其他回答

我也有同样的问题,在这里解决。

如果你添加meta og:image,它应该会显示出来

问题是,如果你不输入http://,以/结尾,whatsapp将不显示图像 例如,如果你输入http://google.com/而不是google.com,它会显示图像和描述

希望它能帮助到别人。

额外的有用信息:

你可以提供几个og:图片,whatsapp将使用最后一个。这将有助于解决例如facebook想要1.91:1的比例和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/

我自己也一直在尝试这样做,我已经添加了所有正确的元标签:

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

但在WhatsApp上分享我的链接时却看不到图片。

我发现WhatsApp也做了一些缓存的图像和url信息,不知道多长时间。

为了检查是否插入了正确的标记,我只是尝试了不同的url,例如:http://domain.com而不是http://www.domain.com。

希望这对其他人有所帮助。

因为在这一点上,这个问题几乎是一个支持小组,为那些因各种原因而遭受WhatsApp不加载图像预览的人提供支持,下面是我的情况的根本原因,希望它最终能帮助到一些人:

确保元标记og:image内容链接使用HTTPS

当我通过https使我的网站可用时,我忘记了具体地将元标签从http更改为https。除了WhatsApp,其他所有社交媒体预览版都对这张照片进行了处理。

简单地让它https固定它为我。

如果有人正在寻找一种方式显示预览使用WhatsApp API,包括在你的网站上的元标签的图像,你需要设置preview_url=true。

在文本消息中发送url

默认情况下,移动WhatsApp应用程序可以识别url并使其可点击。要包含URL预览,请在消息体中包含"preview_url": true,并确保URL以http://或https://.开头需要主机名,IP地址不匹配。

大多数情况下,当你发送一个URL时,无论是否带有预览,消息的接收者都会看到一个他们可以点击的URL。

URL预览只会在以下情况之一发生后才会被渲染:

业务已经向用户发送了一个消息模板。 用户通过“点击聊天”链接开始对话。 用户将业务电话号码添加到他们的地址簿和 发起对话。