为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不支持300KB以上的图片。

所以在Whatsapp上显示图像的最重要的属性是:

<meta property="og:image" content="url_image">

并且要显示的图像大小必须小于300KB。

如果问题仍然存在，请阅读类似问题的答案

2016-08-27 14:38:26

在一个bug中工作后，发现在IOS中，HEAD中的元素可能会阻止WhatsApp搜索og:image /og:description / name=description。所以首先试着把它们放在其他事情的上面。

这行不通

<head>
    <div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>

    <meta property="og:description" content="description" />
    <meta property="og:image" content="http://cdn.some.com/random.jpg" />
</head>

这项工作:

    <head>
        <meta property="og:description" content="description" />
        <meta property="og:image" content="http://cdn.some.com/random.jpg" />

        <div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
    </head>

2018-04-27 14:34:41

以下行动对我的情况有所帮助。

将映像放在同一主机下。

<meta property="og:url" content="https://www.same-host.com/whatsapp-image.png" />

例如，通过前导子串检测用户代理，将所需图像传递给WhatsApp

WhatsApp/2.18.380 A

在真正按下发送按钮前等待几秒钟，以便WhatsApp有时间从og元数据中检索图像和描述。

2019-04-22 14:44:03

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

额外的有用信息:

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

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

推荐文章

最新文章

标签