当我们分享这样的链接时，我们如何在我们的网站中包括一张图片来显示在WhatsApp上?
当前回答
我在这里记录了完美的详细解决方案- https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html 要获得完美的预览效果，有七个步骤。
标题:添加关键字丰富标题到你的网页，最多65个 字符。 元描述:描述你的网页，最多155个字 字符。 og:title:最多35个字符。 og:url:到您网页地址的完整链接。 og:description:最大65个字符。 og:image:最小小于300KB的图片(JPG或PNG) 尺寸建议为300 × 200像素。 favicon:尺寸为32 × 32像素的小图标。
在上面的页面中，您有所需的规格、字符限制和示例标记。如果你觉得满意，就给它点赞。
其他回答
额外的有用信息:
你可以提供几个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标准
只需几个步骤，就能完美预览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应用程序中更新目录的企业帐户，这已经存在，但这与链接共享完全不同。
如果你想在某人在WhatsApp上分享的你网站的url旁边放一张照片，你必须在url链接的页面上放一个元标签，就像这样:
<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>
有同样的问题，添加了og:image，当url以斜杠(/)结束时，它不能工作。从URL中删除斜杠后-图像被加载..有趣的错误……
在失去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
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗，比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击
