为WhatsApp链接共享提供一个图像

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

当前回答

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

在文本消息中发送url

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

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

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

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

2021-01-22 10:59:03

其他回答

我想在这个帖子中添加一个答案，特别提到上面的线程中哪些帮助我解决了问题，以及它们可以遵循的顺序，以正确理解根本原因并一劳永逸地解决它:

当我在社交媒体上分享这个解决方案的链接时，我能够得到丰富的预览。

我在这篇文章中遵循了各种选项，下面是最接近正确答案的选项，它们都有助于最终结果:

需要的标签(主标签要聚焦- og:image) 图像参数一定会有帮助的工具如何正确给出图像路径根本原因及解决方法

这将有望为人们节省滚动并找到正确答案所需的时间，以及所有试验和错误所需的努力。

2020-06-10 13:00:03

在看了很多答案，但无法解决这个问题后，我终于在多次迭代后让它工作了。这是我使用的确切代码:

在<head>标签中:

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

在<body>标签中:

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

这8个标签(6个在头部，2个在身体)工作得很好。

小贴士:

1.使用准确的图像位置URL，而不是目录格式，即不要使用images/OG_thumb.jpg

2.区分大小写的文件扩展名:如果你的主机提供商上的图像扩展名是“。jpg”，那么不要使用“。jpg”或“。jpeg”。我观察到，基于托管提供商和浏览器组合错误可能会发生，也可能不会发生，所以为了安全起见，它更容易匹配文件扩展名的情况。

3.在完成以上步骤后，如果缩略图预览仍然没有显示在WhatsApp消息中，那么:

a.强制停止手机应用(我在安卓系统下尝试过)，再试一次

b.使用在线工具预览OG标签，例如我使用的:https://searchenginereports.net/open-graph-checker

c.在移动浏览器中，将“直接链接”粘贴到OG拇指上，并刷新浏览器4-5次。比如https://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG

2020-10-30 02:57:03

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

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

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

2016-12-15 18:41:49

在我们的例子中，问题是og:image URL不包括文件扩展名(.jpg)。我们正在使用Cloudinary，在它们的情况下，图像url中的文件扩展名是不需要的。

当我们将.jpg格式添加到图片URL后，图片就开始在Whatsapp预览中显示。

2020-09-27 15:41:40

额外的有用信息:

你可以提供几个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/

2020-04-07 11:27:46

为WhatsApp链接共享提供一个图像

推荐文章

最新文章

标签