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

Question

试图遵循这个问题：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

Answer 1

我相信你需要将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" />应该让你朝着正确的方向前进。

Answer 2

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

标题：为您的网页添加关键字丰富的标题，最多65个字符。
元描述：描述您的网页最多155个字符。
og：title：最多35个字符。
og：url：指向您网页地址的完整链接。
og：description：最多65个字符。
og：image：建议尺寸小于300KB且最小尺寸为300 x 200像素的图像（JPG或PNG）。
favicon：尺寸为32 x 32像素的小图标。

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

Answer 3

我希望这有帮助：

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

请注意应该从同一个域托管的imgURL，否则它将不会显示在whatsapp上。我尝试从亚马逊加载网址，图片预览无效。

Answer 4

在我的例子中，添加下面的元标记解决了这个问题。我使用阿拉伯语内容并且必须添加此内容才能使图像显示在WhatsApp上：

<meta property='og:locale' content='ar_AR' />

注意：如果您使用的是英语内容，则无需添加此元标记，因为英语是默认值。

Answer 5

您只需要在开头键入带有“http：//”的消息。例如：http://www.google.com显示缩略图，但www.google.com没有。

Answer 6

打开图表数据：

<meta property="og:title" content="Title of your website | website.com"/>
<meta property="og:type" content="Most popular business directory of Bangladesh"/>
<meta property="og:url" content="http://www.website.com/"/>
<meta property="og:image" content="http://www.moumaachi.com/images/dhaka-city.jpg"/>
<meta property="og:site_name" content="@website"/>
<meta property="fb:admins" content="Author"/>
<meta property="og:description" content="website.com is your online business directory of Country"/>

Answer 7

我有同样的问题，问题是图片的大小。 Whatsapp不支持大小超过300KB的图片。

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

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

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

Answer 8

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

你应该看到工作Before and after screenshoot

有两种代码。第一个元：在<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>

希望这有帮助。谢谢。

Answer 9

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

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

我的图片属性

尺寸：300X200
大小：<300KB
网址：http://yourdomain.com/yourfolder/imagename.png

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

Answer 10

清除你的whatsapp数据和缓存（或使用另一个whatsapp）！

Android Phone : Go to SETTINGS > APPS > Application List > WhatsApp > Storage and Clear Data.

小心！在此操作之前备份您的消息。

然后结果：清除数据之前和之后和缓存WhatsApp

Answer 11

花了好几个月试图解决这个问题后，我终于解决了这个问题。这是我的解决方案：

<!-- MS, fb & Whatsapp -->

<!-- MS Tile - for Microsoft apps-->
<meta name="msapplication-TileImage" content="http://www.example.com/image01.jpg">    

<!-- fb & Whatsapp -->

<!-- Site Name, Title, and Description to be displayed -->
<meta property="og:site_name" content="The Rock Photo Studio">
<meta property="og:title" content="The Rock Photo Studio in Florida">
<meta property="og:description" content="The best photo studio for your events">

<!-- Image to display -->
<!-- Replace   «example.com/image01.jpg» with your own -->
<meta property="og:image" content="http://www.example.com/image01.jpg">

<!-- No need to change anything here -->
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/jpeg">

<!-- Size of image. Any size up to 300. Anything above 300px will not work in WhatsApp -->
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">

<!-- Website to visit when clicked in fb or WhatsApp-->
<meta property="og:url" content="http://www.example.com">

复制以上内容，粘贴在网站的头部区域。关闭你的Whatsapp应用程序，重新打开，那么测试。无需清除缓存，也无需清除数据。

祝福所有人！

Answer 12

我不知道在whatsapp上工作所需的元标记的最小数量，在某个地方发现了这个，这对我来说完美无缺。注意：图像分辨率为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>

Answer 13

回复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>

或使用谷歌的json-ld格式

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

 }
 </script>

Answer 14

对于所有仍然有这个问题的人，对我来说，没有任何已发布的解决方案。

我有类似的问题。图像在所有其他共享对话框中正确显示。只有WhatsApp无法显示图像，即使facebook调试器正确地具有og：image标签。

对我有用的解决方案：我正在使用firebase。对于其存储中上传的内容，您将获得带有媒体令牌的唯一下载URL。就像是：

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

我在og：image元标记中使用了此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">

之后（现在在所有测试的共享对话框中工作，包括WhatsApp）

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

希望它可能会帮助你们中的一些人:)

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

问题描述投票：55回答：14

14个回答

最新问题

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

问题描述 投票：55回答：14

14个回答

最新问题

问题描述投票：55回答：14