当我们共享这样的链接时，如何在我们的网站中包含图片以显示在WhatsApp中？
Answers:
只需几步即可为WhatsApp，Twitter，Facebook和PC和移动设备的书签图标获得完美的预览。如果您喜欢阅读，请访问ogp.me-但请确保阅读此答案中的步骤1-6，以获取最佳的WhatsApp预览。
请注意：某些应用或网站使用缓存，甚至将网站预览存储到其数据库中。这意味着，例如，当您在WhatsApp或Facebook中测试链接时，很可能不会立即看到任何差异。使用另一个链接（另一页）可以解决问题。但是，一旦您使用该链接一次，此“请注意”部分就会重新开始。
步骤1：标题
最多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，最小尺寸为300 x 200 *
<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">* @RichDeBourke向我提到了这一点，但是显然WhatsApp增加了其最大图像大小（尺寸和文件大小）。我做了一些测试：并非每次都在每个设备上都一致工作。我测试了2.x Mb图像，即使它看起来也可以工作9/10次。<300KB是最安全的方法，但是从2020年2月18日开始，使用较大的图像应该没问题。不过，我建议将文件大小保持在2MB以下。如果还没有的话，绝对可以通过 TinyPNG或任何其他图像压缩算法来抛出图像。
如果完成上述步骤，现在可以在WhatsApp中查看预览！但是，请注意上面的“请注意”部分。
步骤7：og：type
为了使对象在图形中表示，您需要指定其类型。以下是可用的全局类型的列表：http : //ogp.me/#types。您也可以指定自己的类型。
<meta property="og:type" content="article" />步骤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" />步骤9：Twitter
为了获得最好的Twitter支持，请阅读此内容。
步骤10：Facebook
要获得Facebook的最佳支持，请阅读此内容。
步骤11：网站图示
为了获得所有浏览器和设备的最佳图标支持，请阅读此内容。
奖励步骤12：视频/音频
也可以共享音频/视频。例如，Facebook和Twitter可以很好地共享视频。阅读ogp.me。
我有同样的问题，问题是图片的大小。Whatsapp不支持大于300KB的图片。
因此，在Whatsapp上显示图像的最重要属性是：
<meta property="og:image" content="url_image">并且要显示的图像大小必须小于300KB。
如果问题仍然存在，请阅读此类似问题的答案
我猜whatsapp中没有白名单，因为我找到了一个对我有用的解决方案。进行如下操作。插入3个meta标签：
<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>这样做，您会做得很好！
我在此处记录了完美的详细解决方案-https: //amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html 要获得完美的预览，需要执行七个步骤。
标题：将关键字丰富的标题添加到您的网页中，最多65个字符。
元描述：最多以155个字符描述您的网页。
og：title：最多35个字符。
og：url：指向您的网页地址的完整链接。
og：description：最多65个字符。
og：image：建议图片（JPG或PNG）的尺寸小于300KB，最小尺寸为300 x 200像素。
favicon：尺寸为32 x 32像素的小图标。
在上一页中，您具有必需的规格，字符限制和示例标签。如果满意，请立即进行投票。
og:image : Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised.
我想提请注意以下事实：<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" />
（我本来会将此添加为评论，但目前还不允许。主持人可以根据需要随意移动。）
我也一直在尝试自己做，并且添加了所有正确的meta标签：
<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。
希望这对其他人有帮助。
在虫虫中工作之后，发现在IOS中， HEAD中的元素可能会停止对og：image / og：description / name = description的WhatsApp搜索。因此，请首先尝试将它们放在其他所有事物之上。
这不行
<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>twitter:image空的，使WhatsApp无法获取og:image。尝试删除其他<meta>标签可以帮助调试社交共享功能。
og:image放在最前面，并确保它被读取
我建议总是看看https://developers.facebook.com/tools/debug/sharing以验证您的媒体资源，因为Facebook经常会更改其政策，合规性和API。
如果您使用Messenger机器人或其他FB应用程序，则可能需要属性fb：app_id才能使链接图像在Whatsapp中工作。有关更多信息，请访问Facebook开发人员网站管理员网站。 https://developers.facebook.com/docs/sharing/webmasters
我有同样的问题，这里是要解决的。
如果添加meta og：image应该显示
问题是，如果不输入http：//并以/结尾，whatsapp将不会显示图像。例如，如果您输入http://google.com/，它将显示图像和说明。而不是google.com
希望它能帮助某人。
我在此线程下以及从外部搜索中尝试了一些建议，但这对我来说是另外一个问题。我使用og：image标签指示的图像的特定说明已被Jetpack插件提供的开放图形标签覆盖。你可以在这里找到我的详细答案。但是，我认为值得在此后续主题中简要介绍步骤。希望这对某人有帮助。
在Facebook上共享调试器帮我找出根源，并从那里，我按照这些步骤：
每当Jetpack无法确定要使用的图像时，它将更改使用的默认图像
function custom_jetpack_default_image() {
return 'YOUR_IMAGE_URL';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );我应该补充一点，建议使用图像参数，例如最小300px x 200px和尺寸<300 KB。如果这些一般说明对您不起作用，请按照这些说明进行操作，因为这很可能是您的问题与我的类似。另外，有时最简单的解决方案可能只是删除插件（前提是您确认没有插件也可以这样做）。
最后，您应该可以看到类似- 
希望这可以帮助。
NS
您需要以下标签来获取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:width" content="1200" /> <meta property="og:image:height" content="628" />我一样提供吗？我们是否需要在标签中给出该图像具有的图像的宽度和高度，或者是否为图像像素提供任何图像？如果我们在meta标签中提及宽度和高度，它将以该尺寸显示？请澄清@moreirapontocom
如果您想在您的网站上某人在WhatsApp上共享的URL旁边有图片，则必须在该URL链接到的页面上放置一个metatag，如下所示：
<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>在我的情况下，采取以下行动是有帮助的。
将映像放在同一主机下。
<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：//）。然后它开始工作
其他有用的信息：
您可以提供几个og：images，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/