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

当我们分享这样的链接时，我们如何在我们的网站中包括一张图片来显示在WhatsApp上?

当前回答

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

2020-11-16 07:58:49

其他回答

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

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

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

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

2020-08-09 03:42:16

我也有同样的问题，在这里解决。

如果你添加meta og:image，它应该会显示出来

问题是，如果你不输入http://，以/结尾，whatsapp将不显示图像例如，如果你输入http://google.com/而不是google.com，它会显示图像和描述

希望它能帮助到别人。

2016-11-26 17:42:28

额外的有用信息:

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

2020-04-07 11:27:46

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

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

2019-01-03 19:11:18

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

在<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链接共享提供一个图像

推荐文章

最新文章

标签