缩略图和说明未显示在Whatsapp预览链接上 [英] Thumbnail and Description are not being Displayed on Whatsapp Preview Link
问题描述
我已经从那些链接中完成了2020年标准的强制性步骤，但是描述和缩略图仍未显示在WhatsApp上.
I have done the mandatory steps of 2020 standard from those links but description and thumbnail are still not being displayed on WhatsApp.
我一直在测试的链接是: https://research.verdhana.id/TEST
The link that I have been testing is: https://research.verdhana.id/TEST
我的网站已经由具有有效SSL证书(非自签名)的SSL保护. 缩略图是JPEG图像，大小为18KB，尺寸为400x400.
My website is already secured by SSL with valid SSL certificate (not self-signed). The thumbnail is a JPEG image with size of 18KB and 400x400 dimension.
我使用Vue.js，并且不使用服务器端渲染，因此我将所有必需的meta标签放在index.html中，这样即使没有执行javascript也可以由搜寻器读取.
I use Vue.js and I do not use server side rendering, so I put all the mandatory meta tags inside index.html so they can be read by crawler even javascript is not executed.
og:image标记已使用完整路径和相同的域. og:url元标记对于任何URL路径都将始终相同，因为它是写在index.html中的，但是我认为这应该不是问题.
The og:image tag already uses full path and same domain. The og:url meta tag will always be the same for any URL path because it is written in the index.html, but I think it should not be a problem.
以下是head标签内的标签:
Here are the tags inside head tag:
<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仍未显示我的网站描述和缩略图，如下所示.
My website description and thumbnail are still not shown by WhatsApp like you can see below.
我试图在 Facebook调试器和
I tried to get preview on Facebook Debugger and iframely and both of them show the description and thumbnail.
我添加了fb:app_id标记，但仍未显示.
I have added fb:app_id tag but still not showing.
我需要做任何遗漏的步骤吗?
Are there any missing steps I need to do?
推荐答案
在OP的情况下可能不适用，但在此处将此答案转给有类似问题的其他人.
Probably does not apply in case of the OP, but dumping this answer here for others with a similar issue.
在我们的案例中，问题是og:image URL不包含文件扩展名(.jpg).我们正在使用Cloudinary，在这种情况下，不需要图像URL中的文件扩展名.
In our case, the issue was that the og:image URL did not include a file extension (.jpg). We are using Cloudinary, and in their case file extensions in the image URLs are not required.
将.jpg添加到图像URL后，图像开始显示在Whatsapp预览中.
Once we added the .jpg to the image URL, the image started showing up in the Whatsapp previews.
这篇关于缩略图和说明未显示在Whatsapp预览链接上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
