问题描述

试图跟随这个问题:Provide a picture for whatsapp link sharing

我创建了一个简单的 HTML 网页与基本的 Facebook 元标签:

<!--FACEBOOK-->
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas />
<meta property="og:image" content="http://pollosweb.wesped.es/programa_pollos/play.png" />        

Facebook linter 验证正确,在 Facebook 中显示完美,但是当我尝试通过 WhatsApp 分享图像时不会显示。

我正在 Android 上的 WhatsApp 上尝试

This is the URL of the Sample Webpage

最佳解决方法

我相信您需要将 itemprop 添加到 og:image 元标记中,将图像大小设置为 256x256,并且不会对 site_nametypeupdated_time 属性添加任何影响:)

<meta property="og:site_name" content="San Roque 2014 Pollos">
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas" />
<meta property="og:image" itemprop="image" content="http://pollosweb.wesped.es/programa_pollos/play.png">
<meta property="og:type" content="website" />
<meta property="og:updated_time" content="1440432930" />

您可以在 Google Maps 上查看这些元标记。更改元标记后,您可能需要等待一段时间才能更新缓存。

您可以从 Facebook Debugger 调试/验证 Open Graph 元标记如果您可以看到所有标签,那么标签无法正确显示的网站/应用可能对 Open Graph 标签有不同的要求。

编辑:如果要通过 HTTP-Secure 链接指定图像,则需要使用 og:image:secure_url 而不是 og:image

EDIT2:您还需要指定 og:type,因为它是四个基本必需参数之一。 <meta property="og:type" content="website" /> 应该让你走向正确的方向。

次佳解决方法

我在这里找到了解决方案 Whatsapp preview link posted on 2 March 16

你应该看到工作 Before and after screenshoot

有两种代码。第一个元 og:< head> 内的图像

<meta property="og:image" content="url_image">

来自 schema.org 中的< body> 中的缩略图架构

<link itemprop="thumbnailUrl" href="url_image"> 
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> 
  <link itemprop="url" href="url_image"> 
</span>

希望这个帮助。谢谢。

第三种解决方法

我有同样的问题,问题是图片的大小。 Whatsapp 不支持大小大于 300KB 的图片。

所以在 Whatsapp 上显示图像的最重要的属性是:

<meta property="og:image" content="url_image">

而要显示的图像的大小必须小于 300KB

参考文献

注:本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:薇晓朵技术论坛