当我们分享这样的链接时,我们如何在我们的网站中包括一张图片来显示在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>

这样做,你会做得很好!

其他回答

额外的有用信息:

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

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

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

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

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

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

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

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

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

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

即使在这些尝试之后。我的网站图片有时会被取走,有时不会。 在https://developers.facebook.com/tools/debug/sharing验证后

意识到我的django (python)框架是渲染图像路径相对。我必须用完整的url更改图像的路径。(包括http://)。然后它开始工作了