在WhatsApp ||中显示链接的缩略图 og:图片元标记不起作用

试图遵循这个问题: 提供一个WhatsApp链接共享的图片

在这里输入图像说明

我用基本的Facebook元标记创build了一个简单的HTML网页:

<!--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的lintervalidation正确,并在Facebook上显示完美,但是当我试图通过WhatsApp分享图像不显示。

我正在尝试在Android上的WhatsApp

→ 这是示例网页的URL

我相信你需要添加itempropog: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地图上查看这些元标记。
在您更改元标记之后,您可能需要等待一段时间才能更新可能的caching。

您可以从Facebookdebugging器debugging/validationOpen Graph元标记
如果您可以在那里看到所有的标签,那么标签没有正确显示的网站/应用对Open Graph标签可能会有不同的要求。

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

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

我在这里find了解决scheme,这里的WhatsApp预览链接发布于3月2日

你应该看到在屏幕前后工作

在这里输入图像说明

有两种代码。 第一个meta og:image里面的<head>

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

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

 <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

对于所有仍然有这个问题,而对于我来说没有解决scheme。

我有类似的问题。 图像在所有其他共享对话框中正确显示。 只有WhatsApp不能显示图像,即使facebookdebugging器正确地使用了og:image标签。

为我工作的解决scheme:我使用的是Firebase。 对于上传的内容,您可以通过媒体令牌获得唯一的下载url。 就像是:

https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/?alt =媒体和令牌= YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY

我在og:image meta标签中使用了这个URL。 它为Facebook等工作,但似乎像WhatsApp不能从这个URL下载图像。 相反,您需要将图像包含在您的项目目录中,并使用此链接显示og:image标记。 现在它也可以在WhatsApp中正常工作。

之前(不工作在WhatsApp,但Facebook等)

 <meta property="og:image" itemprop="image" content="https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/your_image?alt=media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY"> 

之后(现在在testing的所有共享对话中工作,包括WhatsApp)

 <meta property="og:image" itemprop="image" content="https://domain_name/path_to_image"> 

希望它可以帮助你们中的一些:)

我也面临这个问题最后,我解决了它

 <meta property="og:image" itemprop="image" content="http://yourdomain.com/yourfolder/imagename.png" /> 

我的图片属性

  1. 尺寸:300X200
  2. 大小:<300KB
  3. URL:http: //yourdomain.com/yourfolder/imagename.png

确保图像名称中没有空格,如果有两个单词,则使用下划线符号

您只需在开始处input带“http://”的讯息。 例如: http : //www.google.com显示缩略图,但www.google.com没有。

在回复https://stackoverflow.com/a/35785393/1518500

尝试schema.org的更新版本

 <span itemprop="image" itemscope itemtype="http://schema.org/ImageObject"> <link itemprop="url" href="imgurlHere"> <meta itemprop="width" content="1200"> <meta itemprop="height" content="800"> </span> 

或者使用google的json-ld格式

 <script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "ImageObject", "url": "ImgURLhere", "height": 800, "width": 1200 } </script> 

我在这里logging了完美的详细解决scheme – https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html有七个步骤可以完成预览。;

  1. 标题:添加关键字丰富标题到您的网页最多65个字符。

  2. 元描述:描述您的网页最多155个字符。

  3. og:title:最多35个字符。

  4. og:url:完整链接到您的网页地址。

  5. og:说明:最多65个字符。

  6. og:image:build议尺寸小于300KB,最小尺寸为300 x 200像素的图片(JPG或PNG)。

  7. favicon:尺寸为32 x 32像素的小图标。

在上面的页面中,您具有所需的规格,字符限制和样本标签。 一旦你觉得满意,就做点赞。

我希望这个帮助:

 <meta property="og:title" content="Title goes here"> <meta property="og:site_name" content="Site name"> <meta property="og:image" content="imageURLShouldBeFromSameDomainName"> <meta property="og:image:width" content="640"> <meta property="og:image:height" content="300"> 

注意应该从同一个域托pipe的imgURL,否则它不会显示在whatsapp上。 我试图从亚马逊加载url,图像预览不工作。

我不知道在whatsapp上工作所需的最小数量的meta标签,发现这在某个地方,这完美地工作。 注意:图像分辨率是256 x 256。

  <head> <meta property="og:site_name" content="sitename" /> <meta property="og:title" content="title"> <meta property="og:description" content="description"> <meta property="og:image" itemprop="image" content="http://www.yoursite.com/yourimage.jpg"> <link itemprop="thumbnailUrl" href="http://www.yoursite.com/yourimage.jpg"> <meta property="og:image:type" content="image/jpeg"> <meta property="og:updated_time" content="updatedtime"> <meta property="og:locale" content="en_GB" /> </head> <body> <span itemprop="image" itemscope itemtype="image/jpeg"> <link itemprop="url" href="http://www.yoursite.com/yourimage.jpg"> </span> </body>