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

这样做,你会做得很好!

其他回答

我在这里记录了完美的详细解决方案- 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像素的小图标。

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

我建议经常查看https://developers.facebook.com/tools/debug/sharing以验证您的属性为 Facebook经常改变它的政策、法规和API。

如果你使用Messenger机器人或其他FB应用程序,你可能需要FB:app_id属性来让链接图像在Whatsapp中工作。 更多信息请访问Facebook开发者网站。 https://developers.facebook.com/docs/sharing/webmasters

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

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

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

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

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

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

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

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

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