当我们分享这样的链接时,我们如何在我们的网站中包括一张图片来显示在WhatsApp上?


当前回答

我建议经常查看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: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。

希望这对其他人有所帮助。

以下行动对我的情况有所帮助。

将映像放在同一主机下。

<meta property="og:url" content="https://www.same-host.com/whatsapp-image.png" />

例如,通过前导子串检测用户代理,将所需图像传递给WhatsApp

WhatsApp/2.18.380 A

在真正按下发送按钮前等待几秒钟,以便WhatsApp有时间从og元数据中检索图像和描述。

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"/>

因为在这一点上,这个问题几乎是一个支持小组,为那些因各种原因而遭受WhatsApp不加载图像预览的人提供支持,下面是我的情况的根本原因,希望它最终能帮助到一些人:

确保元标记og:image内容链接使用HTTPS

当我通过https使我的网站可用时,我忘记了具体地将元标签从http更改为https。除了WhatsApp,其他所有社交媒体预览版都对这张照片进行了处理。

简单地让它https固定它为我。