问题描述
试图跟随这个问题: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_name
,type
和 updated_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 辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:薇晓朵技术论坛。