Whatsapp 预览链接上未显示缩略图和说明
Chr*_*iel 8 html thumbnails facebook-opengraph whatsapp vue.js
我已经通过这些链接完成了 2020 年标准的强制性步骤，但 WhatsApp 上仍然没有显示说明和缩略图。
我一直在测试的链接是： https: //research.verdhana.id/TEST
我的网站已通过 SSL 和有效的 SSL 证书（非自签名）进行保护。缩略图是大小为 18KB、尺寸为 400x400 的 JPEG 图像。
我使用 Vue.js 并且不使用服务器端渲染，因此我将所有强制元标记放在 index.html 中，这样即使不执行 JavaScript，爬虫也可以读取它们。
og:image 标签已使用完整路径和相同的域。og:url 元标记对于任何 URL 路径总是相同的，因为它是写在 index.html 中的，但我认为这应该不是问题。
以下是 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 仍然没有显示我的网站描述和缩略图，如下所示。
我尝试在Facebook Debugger和iframely上进行预览，它们都显示了描述和缩略图。
编辑：我已添加 fb:app_id 标记但仍未显示。
我需要执行任何缺少的步骤吗？
| 归档时间： |
|
| 查看次数： |
6076 次 |
| 最近记录： |