当我们分享这样的链接时，我们如何在我们的网站中包括一张图片来显示在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标准
只需几个步骤，就能完美预览WhatsApp、Twitter、Facebook以及pc和移动设备上的书签图标。如果你喜欢阅读，去Open Graph (ogp.me) -但一定要阅读这个答案中的第1 - 6步，以获得最好的WhatsApp预览。
不同公司的许多技术审计结果表明，使用Open Graph标签不会帮助你获得更好的SEO排名，它们只适用于社交媒体。schema.org的数据结构将帮助您进行SEO。
这些Open Graph <meta>标签放在<head>标签里面。
请注意:@jaimish11提到一些应用程序或网站使用缓存，甚至将网站预览存储在他们的数据库中。这意味着当你在WhatsApp或Facebook上测试你的链接时，你很可能不会马上看到任何区别。使用另一个链接(另一个页面)可以达到目的。但是，只要您使用了该链接一次，这个“请注意”部分就会重新开始。
第一步:标题
不超过65个字符
<title>your keyword rich title of the website and/or webpage</title>
步骤2:描述
不超过155个字符
<meta name="description" content="description of your website/webpage, make sure you use keywords!" />
步骤3:og:title
最多35个字符
<meta property="og:title" content="short title of your website/webpage" />
步骤4:og:url
完整链接到当前网页地址
<meta property="og:url" content="https://www.example.com/webpage/" />
步骤5:og:description
最多65个字符
<meta property="og:description" content="description of your website/webpage" />
步骤6:og:image
图片(JPG或PNG)，大小不超过300KB，最小尺寸为300x200 *。该映像应该通过HTTPS连接提供，该连接具有有效的非自签名证书
<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png" />
* @RichDeBourke mentioned this to me, but apparently WhatsApp has increased its maximum image size (dimensions as well as file size). I did some tests: it does not work consistently every time on every device. I tested 2.x Mb images and even that seemed to work 9/10 times. <300KB is the safest approach, but you should be fine using larger images as of 18-02-2020. I would recommend keeping the file size below 2MB, though. And definitely throw your image through TinyPNG or any other image compression algorithm if you haven't already.
** @Indraraj提到，如果您的网站运行在https上，并使用自签名证书，则图像可能不会显示。
如果你完成了上面的步骤，你现在可以在WhatsApp中看到你的预览!但是，请注意上面的“请注意”部分。
步骤7:og:type
为了在图中表示对象，您需要指定它的类型。以下是可用的全局类型列表:http://ogp.me/#types。您还可以指定自己的类型。
<meta property="og:type" content="article" />
步骤8:og:本地
资源的区域设置。如果有其他可用的语言翻译，也可以使用og:locale:alternate。
如果你不指定og:locale，它默认为en_US。
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
第九步:推特
要获得最好的Twitter支持，请阅读以下内容。
10 . Facebook
为了获得最好的Facebook支持，请阅读以下内容。
步骤11:favicon
要获得所有浏览器和设备的最佳favicon支持，请阅读本文。
额外步骤12:视频/音频
也可以共享音频/视频。例如，Facebook和Twitter就很好地分享视频。读ogp.me。当然，WhatsApp也有这样的选择:当你分享Instagram或Youtube链接时，WhatsApp的预览会与应用程序内的视频播放器一起提供。
超级奖励第13步:产品、人物、电影等。
这类信息实际上取决于提供商(Facebook，谷歌)。我不知道什么时候，但WhatsApp和Twitter可能会支持这些产品。通过这种方式，与你分享链接的人可能会在共享链接“小部件”中看到价格、平均评论分数。那太好了。对于在WhatsApp business应用程序中更新目录的企业帐户，这已经存在，但这与链接共享完全不同。
我想提醒大家注意一个事实，简单的<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不支持300KB以上的图片。
所以在Whatsapp上显示图像的最重要的属性是:
<meta property="og:image" content="url_image">
并且要显示的图像大小必须小于300KB。
如果问题仍然存在，请阅读类似问题的答案
我想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>
这样做，你会做得很好!
在失去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
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素，而不占用文档流中的空间
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 在一个CSS宽度的小数点后的位置是尊重?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
- 反应:为什么当道具改变时子组件不更新
- 我怎么能检查html元素，从DOM消失失去焦点?
- 在Atom编辑器中是否有格式化HTML的命令?
- 把<script>标签放在</body>标签之后是错误的吗?
- 谷歌Chrome表单自动填充和它的黄色背景
