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


当前回答

如果你想在某人在WhatsApp上分享的你网站的url旁边放一张照片,你必须在url链接的页面上放一个元标签,就像这样:

<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>

其他回答

我想提醒大家注意一个事实,简单的<meta property="og:image" content="image.png" />,正如上面所建议的那样,并不适合我(这实际上已经让我在一个循环中好几周了)。可以使用绝对URL: <meta property="og:image" content="https://domainname.com/image.png" />

或者以斜杠开头(如果图像在根目录中): <meta property="og:image" content="/image.png" />

(我本想把这句话作为评论,但现在还不允许这样做。版主可以随意移动这个,如果更合适的话。)

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

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

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

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

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

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

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

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

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

如果你添加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/