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

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

当前回答

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

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

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

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

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

2020-06-10 13:00:03

其他回答

我在这里记录了完美的详细解决方案- https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html 要获得完美的预览效果，有七个步骤。

标题:添加关键字丰富标题到你的网页，最多65个字符。元描述:描述你的网页，最多155个字字符。 og:title:最多35个字符。 og:url:到您网页地址的完整链接。 og:description:最大65个字符。 og:image:最小小于300KB的图片(JPG或PNG) 尺寸建议为300 × 200像素。 favicon:尺寸为32 × 32像素的小图标。

在上面的页面中，您有所需的规格、字符限制和示例标记。如果你觉得满意，就给它点赞。

2016-12-26 17:04:41

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

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

2020-09-27 15:41:40

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

<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

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

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

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

希望它能帮助到别人。

2016-11-26 17:42:28

2020标准

只需几个步骤，就能完美预览WhatsApp、Twitter、Facebook以及pc和移动设备上的书签图标。如果你喜欢阅读，去Open Graph (ogp.me) -但一定要阅读这个答案中的第1 - 6步，以获得最好的WhatsApp预览。

不同公司的许多技术审计结果表明，使用Open Graph标签不会帮助你获得更好的SEO排名，它们只适用于社交媒体。schema.org的数据结构将帮助您进行SEO。

这些Open Graph <meta>标签放在<head>标签里面。

请注意:@jaimish11提到一些应用程序或网站使用缓存，甚至将网站预览存储在他们的数据库中。这意味着当你在WhatsApp或Facebook上测试你的链接时，你很可能不会马上看到任何区别。使用另一个链接(另一个页面)可以达到目的。但是，只要您使用了该链接一次，这个“请注意”部分就会重新开始。

第一步:标题

不超过65个字符

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

步骤2:描述

不超过155个字符

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

步骤3:og:title

最多35个字符

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

步骤4:og:url

完整链接到当前网页地址

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

步骤5:og:description

最多65个字符

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

步骤6:og:image

图片(JPG或PNG)，大小不超过300KB，最小尺寸为300x200 *。该映像应该通过HTTPS连接提供，该连接具有有效的非自签名证书

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

* @RichDeBourke mentioned this to me, but apparently WhatsApp has increased its maximum image size (dimensions as well as file size). I did some tests: it does not work consistently every time on every device. I tested 2.x Mb images and even that seemed to work 9/10 times. <300KB is the safest approach, but you should be fine using larger images as of 18-02-2020. I would recommend keeping the file size below 2MB, though. And definitely throw your image through TinyPNG or any other image compression algorithm if you haven't already.

** @Indraraj提到，如果您的网站运行在https上，并使用自签名证书，则图像可能不会显示。

如果你完成了上面的步骤，你现在可以在WhatsApp中看到你的预览!但是，请注意上面的“请注意”部分。

步骤7:og:type

为了在图中表示对象，您需要指定它的类型。以下是可用的全局类型列表:http://ogp.me/#types。您还可以指定自己的类型。

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

步骤8:og:本地

资源的区域设置。如果有其他可用的语言翻译，也可以使用og:locale:alternate。

如果你不指定og:locale，它默认为en_US。

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

第九步:推特

要获得最好的Twitter支持，请阅读以下内容。

10 . Facebook

为了获得最好的Facebook支持，请阅读以下内容。

步骤11:favicon

要获得所有浏览器和设备的最佳favicon支持，请阅读本文。

额外步骤12:视频/音频

也可以共享音频/视频。例如，Facebook和Twitter就很好地分享视频。读ogp.me。当然，WhatsApp也有这样的选择:当你分享Instagram或Youtube链接时，WhatsApp的预览会与应用程序内的视频播放器一起提供。

超级奖励第13步:产品、人物、电影等。

这类信息实际上取决于提供商(Facebook，谷歌)。我不知道什么时候，但WhatsApp和Twitter可能会支持这些产品。通过这种方式，与你分享链接的人可能会在共享链接“小部件”中看到价格、平均评论分数。那太好了。对于在WhatsApp business应用程序中更新目录的企业帐户，这已经存在，但这与链接共享完全不同。

2017-04-01 08:20:38

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

推荐文章

最新文章

标签