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

94

尝试遵循以下问题：提供图片以用于whatsapp链接共享

在此处输入图片说明

我用基本的Facebook元标记创建了一个简单的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 linter可以正确验证，并且在Facebook中显示完美，但是当我尝试通过WhatsApp共享时，图像无法显示。

我正在Android的WhatsApp上尝试

→这是示例网页的URL

android  html  facebook-opengraph  meta-tags  whatsapp 
— 耶苏洛佩兹
source
奇怪... og：image应该足够了。我试图分享一个YouTube链接，但我可以在聊天中正确看到缩略图。我试图查看Youtube是否在使用更多元标记时未发现任何特殊现象....我们是否面临缓存问题？
— cs.edoardo
对不起，但是你确定这是可能的吗？您还看过其他地方吗？你有一些对whatsapp有经验的链接吗？
— ProllyGeek
有可能增加图片的高度和宽度吗？？？？在Whatsapp
— Chandresh
我使用了不起作用的相同标签，请引导stackoverflow.com/questions/47236739/…–
— vinox
我可以在没有任何HTTP调用的情况下引用图片content="./images/logo.png"吗？
— TMOTTM '18年

Answers:

100

我相信您需要添加itemprop到og:imagemeta标签，将图片大小设置为，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上看到这些meta标签的运行情况。
更改元标记后，可能需要等待一段时间才能更新可能的缓存。

您可以从Facebook Debugger调试/验证Open Graph元标记。
如果您可以在那里查看所有标记，则标记未正确显示的网站/应用可能对Open Graph标记有不同的要求。

编辑：
如果要通过HTTP-Secure链接指定图像，则需要使用og:image:secure_url代替og:image。

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

— 未知
source
这可能是因为在您使用的两个元标记中的第一个中，该图像不可用itemprop="image"。错误消息：Cannot GET /logos/logo_512.png
— 未知
4
另外，如果你要使用安全-HTTP链接到图片，你需要使用property="og:image:secure_url"代替property="og:image"
— 未知
感谢您的时间。我进行了更改。但是仍然没有运气。：（
— Akhil Sekharan
youtube链接转到一个视频，其中他们演示如何在Illustrator中创建平面图标？
— 未知
抱歉，含糊不清。当我们通过WhatsApp发送此链接时，如该问题所示，消息旁边会显示视频的缩略图
— Akhil Sekharan
29

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

因此，在Whatsapp上显示图像的最重要属性是： 

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

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

— 塞德里加
source
dev.dubairent.com/property/…在我的案例中不起作用
— Jitendra Pancholi
10

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

<!-- 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应用，重新打开，然后进行测试。无需清除缓存，也无需清除数据。

祝福大家！

— 大卫·E
source
对我而言，文件大小完全负责。只要文件大小低于300 Kb，就可以了。我不需要度量属性。og：image标签就足够了。
— 伯恩哈德·克劳斯
在没有我的情况下工作dev.dubairent.com/property/...
— Jitendra Pancholi
9

我在这里找到解决方案Whatsapp预览链接发布于16 March 3

而且你应该看到工作

屏幕截图之前和之后

在此处输入图片说明

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

希望能有所帮助。谢谢。

— wong_udik
source
1
FB调试器：100％正常。丰富的预览：100％确定（包括Watsapp）。当我尝试通过WhatsApp共享时，图像不显示。我的网址是robotiqu.es ...一年后没有响应？
— Juanjo
1
@wong_udik如何通过Android Intent传递此HTML内容
— Raja Jawahar，
在我的情况不工作dev.dubairent.com/property/...
— Jitendra Pancholi
3

清除您的whatsapp数据并缓存（或使用其他whatsapp）！

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

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

清除whatsapp数据和缓存

然后是结果：在清除数据和缓存WhatsApp之前和之后 分享之前和之后

— 偶氮
source
1
这并使文件大小小于300kb对我
— 有用
1
仅清除缓存就足够了。无需清除数据。
— Sanket Berde
您可以改为缓存破坏链接的链接：https://link.com/?_=92375293579
— nathan
2

我不知道在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>
— falero80s
source
1

回复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>
— 乔尔·拉皮坦（Joell Lapitan）
source
1
您能为您的答案加些夸张吗？对于某些人来说，简单地显示代码可能会造成混淆。
— 安德烈·库尔
1

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

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

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

https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/？alt = media＆token = YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYYY

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

希望它能对您有所帮助:)

— 菲利普·米特曼
source
您能否进一步阐述？真正的区别是什么？您是否重写了图像的URL或做了什么？
— 约翰·马克斯
域可能必须与共享链接匹配。
— MarsAndBack
1

我在此处记录了完美的详细解决方案-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：description：最多65个字符。

  6. og：image：建议图片（JPG或PNG）的大小小于300KB，最小尺寸为300 x 200像素。

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

在上一页中，您具有必需的规格，字符数限制和示例标签。如果满意，请立即进行投票。

— 地带
source
请说明您的链接在做什么...链接可能会消失。
— Kurt Van den Branden
您的来源仅来自测试，还是任何地方都记录了这些要求？
— Keab42年
1

希望对您有所帮助：

<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上。我尝试从亚马逊加载网址，图片预览无法正常工作。

— 乔尔·拉皮坦（Joell Lapitan）
source
1
你将如何通过intent发送这个数据
— 拉贾Jawahar
这个问题完全是
— 题外话
1

就我而言，添加以下meta标记即可解决此问题。我使用的是阿拉伯语内容，必须添加此内容以使图像出现在WhatsApp上：

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

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

— 拉米·泽比亚
source
0

打开图数据：

<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"/>
— 阿曼努尔·拉曼（Amranur Ra​​hman）
source
在我的情况不工作dev.dubairent.com/property/...
— Jitendra Pancholi
0

只有这3个标签似乎是必需的（og:title，twitter:description，rel="icon"）：

<meta property="og:title" content="San Roque 2014 Pollos" />

<meta name="twitter:description" property="og:description" itemprop="description" content="Programa de fiestas" />

<link rel="icon" type="image/png" href="https://images.weserv.nl/?url=http://pollosweb.wesped.es/programa_pollos/play.png&w=192&height=192" sizes="192x192" />

实验/玩

对我来说，最简单的实验方法是按照以下步骤使用CodeSandbox：

  • 使用https://codesandbox.io/s/创建Vanilla应用
  • 在index.html文件中相应地修改元标记
  • 保存文件（ctrl+s），该文件将派生应用并生成自己的唯一网址
  • 将该网址粘贴到WhatsApp中以查看预览（您甚至无需发送消息）
  • 更改meta标签
  • 修改网址-在网址末尾添加一个字符。这将丢弃“先前的缓存预览”

需要报价

请务必确保始终使用引号和右引号，因为WhatsApp对此很敏感。您上面的示例没有对您的结束语og:description。

— 弗朗索瓦
source
在我的情况不工作dev.dubairent.com/property/...
— Jitendra Pancholi
1
@JitendraPancholi，您的（dubairent.com）网站不一样。在属性值周围需要双引号字符。这是您网站上的一个： <meta property=og:title content="Immaculate 4 Bed Townhouse Victory">。应该是： <meta property="og:title" content="Immaculate 4 Bed Townhouse Victory">。如果您将Webpack与HTML插件一起使用，请考虑设置minify.removeAttributeQuotes为false
— Francois
我现在进行了更正，但是whatsapp仍未在预览中显示图像，尽管标题和描述也与以前一样显示。
— Jitendra Pancholi
@JitendraPancholi，您可以将以上说明用于“对我来说最简单的实验方法是按照以下步骤使用CodeSandbox”。只需将您的<head>部分复制到香草应用中即可。要获取您网站的原始html，请使用“查看页面源代码”选项（在Chrome中为CTRL + U）。
— 弗朗索瓦
0

对于仍然遇到这种情况的任何人，我发现在Amazon S3上提供的图像不适用于WhatsApp移动应用程序（既适用于Android和iOS，也适用于Mac桌面应用程序）。这很可能是我们的AWS设置导致这一点，但我注意到在其他网站以及模式（如这一个有og:image打像一个域https://s3.amazonaws.com）。

我尝试过的任何其他平台都没有问题，只是WhatsApp移动应用程序。一旦我指向<meta property="og:image" content="https://some-non-aws-location" />另一个公共URL（例如Google云端硬盘文件（当然是公共共享）），它就可以正常工作。

我还尝试了在我们的存储库中提交该映像，该存储库通过自定义域托管和部署在AWS上，但也不起作用。因此，AWS似乎仍然是罪魁祸首。希望这对某人有帮助！

— 更好的地图
source
0

如果按照上述所有提示操作后，缩略图仍然没有显示，请尝试以下操作：

我的问题是，为生产而构建时，会删除og属性中的双引号（npm run build）。Minify模块正在执行此操作。

因此解决方案是取消此移除，将removeAttributeQuotes属性设置为false：

minify: {
    ...
    removeAttributeQuotes: false,
    ...
}

在开发环境中，将其设置在“ webpack.prod.conf.js”文件中。将其设置为等效文件。

只需重建即可使用。

— 德祖
source
0

我按照此处答案中的所有说明进行操作，但仍然无法正常工作。似乎WhatsApp还需要扩展名才能显示图像。

因此，对于指向jpeg的标签：

<meta property="og:image" itemprop="image" content="https://example.com/someimageid"/>

更改API以允许扩展和使用：

<meta property="og:image" itemprop="image" content="https://example.com/someimageid.jpeg"/>

然后它似乎起作用了...

— 尼克H247
source
0

在此处输入图片说明 遇到同样的问题，经过一番尝试，我终于让它工作了。这是我在网页上使用的8个html标签，以使预览正常工作：

在<head>标签中：

<meta property="og:title" content="ABC Blabla 2020 Friday" />
<meta property="og:url" content="https://bla123.neocities.org/mp/friday.html" />
<meta property="og:description" content="Photo Album">
<meta property="og:image" itemprop="image" content="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG"/>
<meta property="og:type" content="article" />
<meta property="og:locale" content="en_GB" />

在<body>标签中：

<link itemprop="thumbnailUrl" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">

<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">
</span>

这8个标签（头部6个，身体2个）效果很好。

提示：

1.使用确切的图片位置网址代替目录格式，即不要使用images / OG_thumb.jpg

2.区分大小写的文件扩展名：如果托管服务提供商上的图像扩展名是“ .JPG”，则不要使用“ .jpg”或“ .jpeg”。我观察到基于托管服务提供商和浏览器组合的错误可能会或可能不会发生，因此为了安全起见，更容易匹配文件扩展名的大小写。

3.完成上述步骤后，如果缩略图预览仍未显示在WhatsApp消息中，则：

一种。强制停止移动应用（我在Android中尝试过），然后重试

b。使用在线工具预览OG标签，例如，我曾经使用过：https : //searchenginereports.net/open-graph-checker

C。在移动浏览器中，将直接链接粘贴到OG拇指，并刷新浏览器4-5次。例如https://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG

— 岑尼
source
-1

此解决方案对我有用：

    <meta property="og:title" content="Testing Title" />
    <meta
      property="og:description"
      content="This is best way to view your Time Table & Join Meetings"
    />
    <meta
      property="og:image"
      itemprop="image"
      content="//upload.wikimedia.org/wikipedia/commons/d/d4/JPEG_example_image_decompressed.jpg"
    />
    <meta property="og:url" content="https://google.com/" />
    <meta property="og:type" content="website" />
    <meta property="og:image:type" content="image/jpeg" />

在codeandbox.io上测试

这是链接：https : //l8ogr.csb.app/

一件愚蠢的小事通过从图片网址中删除“ http”或“ https”来实现了这一魔力

如果你的图片网址是恩：https://test.com/img.jpeg对//test.com/img.jpeg

<meta property="og:image" itemprop="image" content="//test.com/img.jpg"/>
— SKJ
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.