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

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

2020-10-30 02:57:03

其他回答

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

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

2013-11-04 22:36:46

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

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

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

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

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

2020-06-10 13:00:03

因为在这一点上，这个问题几乎是一个支持小组，为那些因各种原因而遭受WhatsApp不加载图像预览的人提供支持，下面是我的情况的根本原因，希望它最终能帮助到一些人:

确保元标记og:image内容链接使用HTTPS

当我通过https使我的网站可用时，我忘记了具体地将元标签从http更改为https。除了WhatsApp，其他所有社交媒体预览版都对这张照片进行了处理。

简单地让它https固定它为我。

2020-08-09 03:42:16