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

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

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

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

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

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

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

在失去4个小时后，在这个话题上发表我的意见。

我正在编写一个用webpack编译的vue应用程序。 默认情况下，Webpack缩小了HTML，就像屠夫一样。它从许多属性中删除了双引号。

Whatsapp讨厌这一点! 它只是跳过属性值周围的引号格式不正确的字段。

关闭索引的最小化，一切都会好起来的!

下面是如何使用Vue-CLI，在vue.config.js文件中添加这个:

    module.exports = {
      chainWebpack: config => {
        config.plugin('html')
          .tap(args => {
            args[0].minify = false
            return args
          })
      }

来源:https://github.com/vuejs/vue-cli/issues/4328#issuecomment-595682922

你需要以下标签来获得WhatsApp图像预览:

<meta property="og:title" content="Website name" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://url.com/" />
<meta property="og:description" content="Website description" />
<meta property="og:image" content="image.png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="600" />

正如Facebook文档所说，如果你指定了og:image大小，它将被快速获取，而不是异步获取。

图片格式建议为PNG。 推荐至少600x600像素。

我想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:image，当url以斜杠(/)结束时，它不能工作。从URL中删除斜杠后-图像被加载..有趣的错误……