当我们分享这样的链接时，我们如何在我们的网站中包含一个图像以显示在WhatsApp中？
我有同样的问题，问题是图片的大小 . Whatsapp不支持大小超过300KB的图片 .
所以在Whatsapp上显示图像最重要的属性是：
<meta property="og:image" content="url_image">
和 size of the image to display must be less than 300KB .
如果问题仍然存在，请阅读this similar question的答案
我一直在努力做到这一点，我已经添加了所有正确的元标记：
<meta property="og:image" itemprop="image" content="image_url" /> <meta property="og:image:url" itemprop="image" content="image_url" /> <meta property="og:image:type" content="image/png" />
但是在WhatsApp中共享我的链接时却看不到图像 .
我发现WhatsApp也会对图像和网址信息进行某种缓存，不知道多长时间 .
要检查我是否插入了正确的标签，我只是尝试了不同的网址，例如：http://domain.com而不是http://www.domain.com .
希望这有助于其他人 .
我在这里记录了完美的详细解决方案 - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html要完成预览，需要完成七个步骤 .
Headers ：为您的网页添加关键字丰富的 Headers ，最多65个字符 . 元描述：描述您的网页最多155个字符 . og：title：最多35个字符 . og：url：您网页地址的完整链接 . og：description：最多65个字符 . og：image：建议大小小于300KB且最小尺寸为300 x 200像素的图像（JPG或PNG） . favicon：尺寸为32 x 32像素的小图标 .
在上面的页面中，您具有所需的规格，字符限制和样本标签 . 一旦你觉得它满意就做upvote .
有同样的问题，添加og：图像，它没有工作，而网址结束斜杠符号（/） . 从URL中删除斜杠后 - 图像被加载..有趣的bug ...
在一个bugg工作后，发现在IOS中， elements in HEAD might stop the WhatsApp search of the og:image / og：description / name = description . 所以 try first to put them on top 其他一切 .
这不起作用
<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>
如果你想在你的网站上有人在WhatsApp上分享的网址旁边有一张图片，你必须在URL链接的页面上放置一个元标记，如下所示：
<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>
需要几个步骤才能获得WhatsApp，Twitter，Facebook和PC和移动设备书签图标的完美预览 . 如果你喜欢阅读请转到ogp.me - 但请务必阅读本答案中的步骤1 - 6以获得最佳的WhatsApp预览 .
Step 1: title
最多65个字符
<title>your keyword rich title of the website and/or webpage</title>
Step 2: description
最多155个字符
<meta name="description" content="description of your website/webpage, make sure you use keywords!">
Step 3: og:title
最多35个字符
<meta property="og:title" content="short title of your website/webpage" />
Step 4: og:url
完整链接到您的网页地址
<meta property="og:url" content="https://www.example.com/webpage/" />
Step 5: og:description
<meta property="og:description" content="description of your website/webpage">
Step 6: og:image
建议尺寸小于300KB且最小尺寸为300×200像素的图像（JPG或PNG）
<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">
Step 7: og:type
为了在图形中表示对象，需要指定其类型 . 以下是可用的全球类型列表：http://ogp.me/#types . 您还可以指定自己的类型 .
<meta property="og:type" content="article" />
Step 8: og:locale
资源的区域设置 . 如果您有其他语言翻译，也可以使用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" />
Step 9: Twitter
要获得最佳Twitter支持，请阅读this .
Step 10: Facebook
要获得最佳Facebook支持，请阅读this .
Step 11: favicon
要获得对所有浏览器和设备的最佳favicon支持，请阅读this .
Bonus step 12: video/audio
它也可以共享音频/视频 . 例如，Facebook和Twitter分享视频非常好 . 阅读ogp.me .
我有同样的问题，这里是解决 .
如果你添加meta og：image，它应该会显示出来
问题是whatsapp如果你输入没有http：//并且以/结尾，则不会显示图像 . 例如，如果你键入http://google.com/，它会显示图像和描述，但不会显示google.com
希望它可以帮到某人 .
我猜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>
这样做，你会做得很好！
9 回答
我有同样的问题，问题是图片的大小 . Whatsapp不支持大小超过300KB的图片 .
所以在Whatsapp上显示图像最重要的属性是：
和 size of the image to display must be less than 300KB .
如果问题仍然存在，请阅读this similar question的答案
我一直在努力做到这一点，我已经添加了所有正确的元标记：
但是在WhatsApp中共享我的链接时却看不到图像 .
我发现WhatsApp也会对图像和网址信息进行某种缓存，不知道多长时间 .
要检查我是否插入了正确的标签，我只是尝试了不同的网址，例如：http://domain.com而不是http://www.domain.com .
希望这有助于其他人 .
我在这里记录了完美的详细解决方案 - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html要完成预览，需要完成七个步骤 .
在上面的页面中，您具有所需的规格，字符限制和样本标签 . 一旦你觉得它满意就做upvote .
有同样的问题，添加og：图像，它没有工作，而网址结束斜杠符号（/） . 从URL中删除斜杠后 - 图像被加载..有趣的bug ...
在一个bugg工作后，发现在IOS中， elements in HEAD might stop the WhatsApp search of the og:image / og：description / name = description . 所以 try first to put them on top 其他一切 .
如果你想在你的网站上有人在WhatsApp上分享的网址旁边有一张图片，你必须在URL链接的页面上放置一个元标记，如下所示：
2018标准
需要几个步骤才能获得WhatsApp，Twitter，Facebook和PC和移动设备书签图标的完美预览 . 如果你喜欢阅读请转到ogp.me - 但请务必阅读本答案中的步骤1 - 6以获得最佳的WhatsApp预览 .
Step 1: title
最多65个字符
Step 2: description
最多155个字符
Step 3: og:title
最多35个字符
Step 4: og:url
完整链接到您的网页地址
Step 5: og:description
最多65个字符
Step 6: og:image
建议尺寸小于300KB且最小尺寸为300×200像素的图像（JPG或PNG）
Step 7: og:type
为了在图形中表示对象，需要指定其类型 . 以下是可用的全球类型列表：http://ogp.me/#types . 您还可以指定自己的类型 .
Step 8: og:locale
资源的区域设置 . 如果您有其他语言翻译，也可以使用og：locale：alternate .
如果未指定og：locale，则默认为en_US .
Step 9: Twitter
要获得最佳Twitter支持，请阅读this .
Step 10: Facebook
要获得最佳Facebook支持，请阅读this .
Step 11: favicon
要获得对所有浏览器和设备的最佳favicon支持，请阅读this .
Bonus step 12: video/audio
它也可以共享音频/视频 . 例如，Facebook和Twitter分享视频非常好 . 阅读ogp.me .
我有同样的问题，这里是解决 .
如果你添加meta og：image，它应该会显示出来
问题是whatsapp如果你输入没有http：//并且以/结尾，则不会显示图像 . 例如，如果你键入http://google.com/，它会显示图像和描述，但不会显示google.com
希望它可以帮到某人 .
我猜whatsapp中没有白名单，因为我发现了一个对我有用的解决方案 . 做如下 . 插入3个元标记：
您的图片必须是.png格式和600x600px尺寸，并且必须命名为'logo-yoursite.png'（一旦它对我起作用就像那样）
别忘了在你的网站上插入whatsapp的链接：
这样做，你会做得很好！