缩略图和描述在Whatsapp预览链接中未显示

8

我知道有类似的问题在这里herehere

我已经按照那些链接中的2020标准做了必要的步骤,但是描述和缩略图仍然无法在WhatsApp上显示。

我一直在测试的链接是:https://research.verdhana.id/TEST

我的网站已经使用有效的SSL证书(不是自签名)进行了安全保护。 缩略图是一个18KB大小,400x400尺寸的JPEG图像。

我使用Vue.js,并且不使用服务器端渲染,所以我将所有必要的meta标签放在index.html中,以便它们可以被爬虫读取,即使未执行JavaScript。

og:image标签已经使用完整路径和相同的域名。 因为它是写在index.html中的,所以og:url meta标签始终对于任何URL路径都是相同的,但我认为这不应该是问题。

下面是head标记内的标记:

<head>
  <meta property="fb:app_id" content="my_fb_id" />
  <meta property="og:image" content="https://research.verdhana.id/logo.jpg" />
  <meta property="og:image:width" content="400" />
  <meta property="og:image:height" content="400" />
  <meta property="og:title" content="Verdhana | Research" />
  <meta property="og:description" content="Verdhana research website" />
  <meta property="og:url" content="https://research.verdhana.id" />
  <meta property="og:site_name" content="Verdhana | Research" />
  <meta property="og:type" content="website" />
  <link rel="shortcut icon" href="<%= BASE_URL %>logo.ico" />
  <link rel="icon" href="<%= BASE_URL %>logo.ico" />
  <title>Verdhana | Research</title>
  <meta name="description" content="Verdhana research website" />
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css" />
</head>

我的网站描述和缩略图仍未像下面的截图一样在WhatsApp中显示。 WhatsApp not showing description and thumbnail

我尝试在Facebook Debuggeriframely上获取预览,两者都显示了描述和缩略图。 Facebook Debugger preview Iframely embedded preview

编辑: 我已经添加了fb:app_id标签,但仍未显示。

我是否需要执行其他步骤?

3个回答

1

1

我刚刚尝试了一下我的WhatsApp,它对我来说运行良好:

enter image description here


这很有趣,因为我也问了一些从未打开链接的朋友,他们没有缩略图和描述。你做了什么不寻常的事情,比如先清理WhatsApp缓存或其他吗? - Chrisma Daniel
这是在WhatsApp桌面版上的情况,刚刚在手机上尝试了一下,但没有显示图片或描述。真的很奇怪,我看不出任何原因会导致这种情况。 - Daniel_Knights
1
我也一样。在Windows上的WhatsApp可以使用,但在Android上无法使用。‍♂️‍♂️‍♂️ - dewd
我遇到了类似的问题,链接预览在Facebook上可以工作,但在WhatsApp上却不行 :( - Chetan Kantharia
我们在 WhatsApp 中也遇到了这个问题,有更新吗?:( - AbingPj
显示剩余7条评论

1

可能不适用于本主题,但是为了帮助其他遇到类似问题的人,在此放置答案。

我们的情况是,og:image URL中不包括文件扩展名(.jpg)。我们使用Cloudinary,在他们的情况下,图像URL中的文件扩展名不是必需的。

一旦我们在图像URL中添加了.jpg,图像就开始出现在WhatsApp预览中。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接