当我们分享这样的链接时，我们如何在我们的网站中包括一张图片来显示在WhatsApp上?
当前回答
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应用程序中更新目录的企业帐户，这已经存在，但这与链接共享完全不同。
其他回答
有同样的问题，添加了og:image，当url以斜杠(/)结束时，它不能工作。从URL中删除斜杠后-图像被加载..有趣的错误……
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应用程序中更新目录的企业帐户，这已经存在，但这与链接共享完全不同。
我尝试了这个线程下的几个建议，从我的外部搜索，但这对我来说是一个完全不同的问题。我使用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
我建议经常查看https://developers.facebook.com/tools/debug/sharing以验证您的属性为 Facebook经常改变它的政策、法规和API。
如果你使用Messenger机器人或其他FB应用程序，你可能需要FB:app_id属性来让链接图像在Whatsapp中工作。 更多信息请访问Facebook开发者网站。 https://developers.facebook.com/docs/sharing/webmasters
在一个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>
推荐文章
- Angular 2模板中的标签是什么意思?
- 如何设置身体高度溢出滚动
- 在输入type="number"时禁用webkit的旋转按钮?
- 如何在另一个元素之后添加一个元素?
- 我如何有效地解析HTML与Java?
- “ ”和“”有什么区别?
- 如何使用JavaScript代码获得浏览器宽度?
- 防止滚动条增加到Chrome页面的宽度
- 使用图像而不是单选按钮
- 我可以嵌套一个<按钮>元素内< >使用HTML5?
- 设置TextView文本从html格式的字符串资源在XML
- 为什么我的球(物体)没有缩小/消失?
- Twitter Bootstrap 3 Sticky Footer
- CSS在特定的“内联块”项之前/之后换行
- 很好的初学者教程socket.io?
