当我们分享这样的链接时，我们如何在我们的网站中包括一张图片来显示在WhatsApp上?
当前回答
在看了很多答案，但无法解决这个问题后，我终于在多次迭代后让它工作了。这是我使用的确切代码:
在<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
其他回答
如果你想在某人在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" />
(我本想把这句话作为评论，但现在还不允许这样做。版主可以随意移动这个，如果更合适的话。)
我想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>
这样做，你会做得很好!
以下行动对我的情况有所帮助。
将映像放在同一主机下。
<meta property="og:url" content="https://www.same-host.com/whatsapp-image.png" />
例如，通过前导子串检测用户代理，将所需图像传递给WhatsApp
WhatsApp/2.18.380 A
在真正按下发送按钮前等待几秒钟，以便WhatsApp有时间从og元数据中检索图像和描述。
我在这里记录了完美的详细解决方案- 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像素的小图标。
在上面的页面中，您有所需的规格、字符限制和示例标记。如果你觉得满意，就给它点赞。
