在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
我相信你需要添加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地图上查看这些元标记。
在您更改元标记之后，您可能需要等待一段时间才能更新可能的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" />
我的图片属性
- 尺寸：300X200
- 大小：<300KB
- 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有七个步骤可以完成预览。;
-
标题：添加关键字丰富标题到您的网页最多65个字符。
-
元描述：描述您的网页最多155个字符。
-
og：title：最多35个字符。
-
og：url：完整链接到您的网页地址。
-
og：说明：最多65个字符。
-
og：image：build议尺寸小于300KB，最小尺寸为300 x 200像素的图片（JPG或PNG）。
-
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>
