当我们分享这样的链接时，我们如何在我们的网站中包括一张图片来显示在WhatsApp上?
如果你想在某人在WhatsApp上分享的你网站的url旁边放一张照片，你必须在url链接的页面上放一个元标签，就像这样:
<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>
我想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>
这样做，你会做得很好!
我也有同样的问题，问题是图片的大小。Whatsapp不支持300KB以上的图片。
所以在Whatsapp上显示图像的最重要的属性是:
<meta property="og:image" content="url_image">
并且要显示的图像大小必须小于300KB。
如果问题仍然存在，请阅读类似问题的答案
我也有同样的问题，在这里解决。
如果你添加meta og:image，它应该会显示出来
问题是，如果你不输入http://，以/结尾，whatsapp将不显示图像 例如，如果你输入http://google.com/而不是google.com，它会显示图像和描述
希望它能帮助到别人。
我自己也一直在尝试这样做，我已经添加了所有正确的元标签:
<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也做了一些缓存的图像和url信息，不知道多长时间。
为了检查是否插入了正确的标记，我只是尝试了不同的url，例如:http://domain.com而不是http://www.domain.com。
希望这对其他人有所帮助。
我在这里记录了完美的详细解决方案- 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像素的小图标。
在上面的页面中，您有所需的规格、字符限制和示例标记。如果你觉得满意，就给它点赞。
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应用程序中更新目录的企业帐户，这已经存在，但这与链接共享完全不同。
在一个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>
我建议经常查看https://developers.facebook.com/tools/debug/sharing以验证您的属性为 Facebook经常改变它的政策、法规和API。
如果你使用Messenger机器人或其他FB应用程序，你可能需要FB:app_id属性来让链接图像在Whatsapp中工作。 更多信息请访问Facebook开发者网站。 https://developers.facebook.com/docs/sharing/webmasters
以下行动对我的情况有所帮助。
将映像放在同一主机下。
<meta property="og:url" content="https://www.same-host.com/whatsapp-image.png" />
例如，通过前导子串检测用户代理，将所需图像传递给WhatsApp
WhatsApp/2.18.380 A
在真正按下发送按钮前等待几秒钟，以便WhatsApp有时间从og元数据中检索图像和描述。
即使在这些尝试之后。我的网站图片有时会被取走，有时不会。 在https://developers.facebook.com/tools/debug/sharing验证后
意识到我的django (python)框架是渲染图像路径相对。我必须用完整的url更改图像的路径。(包括http://)。然后它开始工作了
你需要以下标签来获得WhatsApp图像预览:
<meta property="og:title" content="Website name" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://url.com/" />
<meta property="og:description" content="Website description" />
<meta property="og:image" content="image.png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="600" />
正如Facebook文档所说，如果你指定了og:image大小，它将被快速获取，而不是异步获取。
图片格式建议为PNG。 推荐至少600x600像素。
我想提醒大家注意一个事实，简单的<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" />
(我本想把这句话作为评论，但现在还不允许这样做。版主可以随意移动这个，如果更合适的话。)
额外的有用信息:
你可以提供几个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/
我尝试了这个线程下的几个建议，从我的外部搜索，但这对我来说是一个完全不同的问题。我使用og:image标记所指示的图像的特定指令正在被Jetpack插件提供的open graph标记所覆盖。你可以在这里找到我的详细答案。然而，我认为有必要在这个更多人关注的帖子中简要地添加这些步骤。希望这能帮助到一些人。
Facebook共享调试器帮助我确定了根本原因，从那里，我遵循以下步骤:
Debug your website using the debugger above. Simply type in the URL and hit debug. This should give you a list of warnings and once you scroll down to the open graph tags sections, you will be able to see the values that are being fetched for your website. The one to focus on is the og:image tag. Scroll further down to the "See exactly what our scraper sees for your URL" link and search for the og:image tag to find the villain in your story. Now simply, opt the means to remove an override that is occurring. In my case, I found the following function helpful. It changes the default image used any time Jetpack can not determine an image to use.
它改变默认图像使用任何时候，Jetpack不能确定一个图像使用
function custom_jetpack_default_image() {
return 'YOUR_IMAGE_URL';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );
需要补充的是，建议图像参数最小为300px x 200px，大小< 300kb。如果这些一般的说明对你不起作用，请遵循这些说明，因为，那么你的问题很可能与我的问题相似。此外，有时最简单的解决方案可能只是删除插件(只要你验证你可以没有它)。
最后你应该能看到像这样的东西
希望这能有所帮助。
NS
我想在这个帖子中添加一个答案，特别提到上面的线程中哪些帮助我解决了问题，以及它们可以遵循的顺序，以正确理解根本原因并一劳永逸地解决它:
当我在社交媒体上分享这个解决方案的链接时，我能够得到丰富的预览。
我在这篇文章中遵循了各种选项，下面是最接近正确答案的选项，它们都有助于最终结果:
需要的标签(主标签要聚焦- og:image) 图像参数 一定会有帮助的工具 如何正确给出图像路径 根本原因及解决方法
这将有望为人们节省滚动并找到正确答案所需的时间，以及所有试验和错误所需的努力。
因为在这一点上，这个问题几乎是一个支持小组，为那些因各种原因而遭受WhatsApp不加载图像预览的人提供支持，下面是我的情况的根本原因，希望它最终能帮助到一些人:
确保元标记og:image内容链接使用HTTPS
当我通过https使我的网站可用时，我忘记了具体地将元标签从http更改为https。除了WhatsApp，其他所有社交媒体预览版都对这张照片进行了处理。
简单地让它https固定它为我。
在我们的例子中，问题是og:image URL不包括文件扩展名(.jpg)。我们正在使用Cloudinary，在它们的情况下，图像url中的文件扩展名是不需要的。
当我们将.jpg格式添加到图片URL后，图片就开始在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
在失去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
如果有人正在寻找一种方式显示预览使用WhatsApp API，包括在你的网站上的元标签的图像，你需要设置preview_url=true。
在文本消息中发送url
默认情况下，移动WhatsApp应用程序可以识别url并使其可点击。要包含URL预览，请在消息体中包含"preview_url": true，并确保URL以http://或https://.开头需要主机名，IP地址不匹配。
大多数情况下，当你发送一个URL时，无论是否带有预览，消息的接收者都会看到一个他们可以点击的URL。
URL预览只会在以下情况之一发生后才会被渲染:
业务已经向用户发送了一个消息模板。 用户通过“点击聊天”链接开始对话。 用户将业务电话号码添加到他们的地址簿和 发起对话。
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素，而不占用文档流中的空间
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 在一个CSS宽度的小数点后的位置是尊重?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
- 反应:为什么当道具改变时子组件不更新
- 我怎么能检查html元素，从DOM消失失去焦点?
- 在Atom编辑器中是否有格式化HTML的命令?
- 把<script>标签放在</body>标签之后是错误的吗?
- 谷歌Chrome表单自动填充和它的黄色背景
