Whatsapp 预览链接上未显示缩略图和说明

2024-04-18

我知道也有类似的问题here https://stackoverflow.com/questions/19778620/provide-an-image-for-whatsapp-link-sharing and here https://stackoverflow.com/questions/25100917/showing-thumbnail-for-link-in-whatsapp-ogimage-meta-tag-doesnt-work.

我已经通过这些链接完成了 2020 年标准的强制性步骤,但 WhatsApp 上仍然没有显示说明和缩略图。

我一直在测试的链接是:https://research.verdhana.id/测试 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>

My website description and thumbnail are still not shown by WhatsApp like you can see below. WhatsApp not showing description and thumbnail

I tried to get preview on Facebook Debugger https://developers.facebook.com/tools/debug and iframely https://iframely.com/embed and both of them show the description and thumbnail. Facebook Debugger preview Iframely embedded preview

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

我需要执行任何缺少的步骤吗?


刚刚用我的 WhatsApp 尝试了一下,效果很好:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Whatsapp 预览链接上未显示缩略图和说明 的相关文章

  • BeautifulSoup 不抓取动态内容

    我遇到的问题是我想从此页面获取相关链接 http support apple com kb TS1538 http support apple com kb TS1538 如果我在 Chrome 或 Safari 中检查 Element 我
  • 超出最大调用堆栈大小 - Vue.js

    我有一个计算方法 可以让我计算产品的总价和折扣值 并希望获得以下值 总计 折扣 cartTotal var total 0 var discount Math round 0 1 this cartTotal 100 100 this ca
  • 拉伸图像以填充浏览器窗口的宽度

    我有一个图像 我希望宽度能够填满浏览器窗口 无论窗口大小如何 如何在 HTML 和 CSS 中执行此操作 您可以添加宽度和高度为100 的div 也可以设置图像宽度和高度为100 div img src https picsum photo
  • div 内的溢出自动在 ie 中不起作用

    这是我的代码http jsfiddle net FbC86 http jsfiddle net FbC86 如果您使用 Chrome 或 Firefox 打开此页面 单元格内的文本将通过垂直滚动条正确溢出 如果您使用 Internet Ex
  • 在 docker 容器内运行 vite 开发服务器

    我有一个 Vue cli 应用程序 我正在尝试将其转换为 vite 我正在使用 Docker 来运行服务器 我看了几个教程 并让 vite 在开发模式下运行 没有错误 但是 浏览器无法访问该端口 也就是说 当我在 macbook 的命令行上
  • 如何正确设置 100% DIV 高度以匹配文档/窗口高度?

    我有一个包装器 位于中心位置 并带有 y 重复的背景图像 div some content div wrapper width 900px margin 0 auto 0 auto background image url image jp
  • 致命错误:发送表单时未找到“App\Http\Controllers\Input”类

    我正在尝试发送一封包含来自 Laravel 应用程序的表单的电子邮件 当你点击提交时 它会抛出上述错误 致命错误 找不到类 App Http Controllers Input 不知道为什么 因为我没有 也不知道我需要有一个输入控制器 或者
  • CodeIgniter - 为什么使用 xss_clean

    如果我正在清理我的数据库插入 并且还转义我编写的 HTMLhtmlentities text ENT COMPAT UTF 8 是否还需要使用 xss clean 过滤输入 它还有什么其他好处 xss clean http docs gip
  • 如何配置 Firefox 在某些链接上运行 emacsclientw?

    我有一个 Perl 脚本 它会在一堆日志文件中查找 有趣 的行 以获取一些有趣的定义 它生成一个 HTML 文件 其中包含一个表 该表的列是时间戳 文件名 行号引用和 有趣 位 我想做的是让文件名 行号成为一个实际的链接 它将在 emacs
  • Bootstrap 100% 宽度/全宽度

    我想用 Bootstrap 创建一个新网站 我需要它的宽度为 100 但我不希望它是流畅的 至少现在不是 我遇到的问题是 使用 bootstrap 标准将您限制为 960px 并且使用流体布局它是全宽的 但其行为就像流体布局应该通过在窗口尺
  • CSS淡入淡出动画延迟计时

    我正在尝试使用 css3 创建幻灯片效果 我有三张图像 我需要将它们相互淡入淡出 每次转换需要持续 3 秒 第一张图像显示 3 秒 然后淡入第二张图像 第三张图像同样显示 我不确定如何计算关键帧的百分比 Codepen http codep
  • 在什么情况下使用html 5的
    标签来代替

    你在什么场景下使用 section html 5 的标签 代替 div 章节的示例包括章节 选项卡式对话框中的各个选项卡式页面或论文的编号部分 网站的主页可以分为介绍 新闻和联系信息几个部分 部分元素表示通用文档或应用程序部分 部分元素不是
  • 一旦我们点击取消按钮,文本字段就会隐藏

    我们正在使用 magento 多供应商网站 我们正在使用以下代码来更新和取消价格 但是一旦我们单击 取消 按钮 文本字段就会隐藏 PHTML span class label pro status span
  • 绝对位置在固定位置内不起作用

    div div div div Both main and inner集装箱取走position fixed 内胆的制作方法position absolute和主容器position fixed 你需要定义top right bottom
  • 解析 Angular2 中的 xml 以在视图中呈现

    我是否需要解析 xml 以从 xml 获取数据以在 html 中呈现 我目前正在使用获取本地 xml 文件http get请求并在控制台日志中显示 xml 文件中的所有信息 我认为它只是在读取它 问题是如何在angular2中将xml转换为
  • 使用 javascript 获取选择标签的名称

    我在任何地方都没有找到这个问题 所以我将其发布在这里 我有一堆选择标签 部分使用 VBScript 命名 我希望能够获取从 javascript 中的 onchange 事件调用的选择标签的名称 这是代码
  • 我将与 ng-include 一起使用什么文件路径?

    我的角度项目的路径是这样的 web server py flask server program app static app js controllers js etc templates index html home html 索引
  • 如何在 jQuery 中使用其中心作为参考点来缩小 div?

    我有以下 div div style margin left 0px height 100px width 100px background color red div 我想使用 jQueryanimate 将 div 缩小到其大小的一半
  • 针对较小屏幕的拆分表行

    我有一个固定宽度为 960px 有 5 列的表格 当我在移动设备中查看时 我想制作第 3 4 5 列 看起来就像在下一行 有什么方法可以让 CSS 打断一行 使其看起来像这样 但是 还保留原来的HTML代码吗 您可以使用 FlexBox f
  • 当属性值在 HTML5 中可以保持不带引号时

    HTML5 中什么时候属性值可以保持不带引号 HTML4 01 是一个 SGML 应用程序 因此 在 HTML4 中 如果值中使用的唯一字符是当前声明为名称字符的字符 字母数字字符 句号 则可以省略引号 好吧 来自 W3C 工作草案 201

随机推荐

  • 复选框值始终为“打开”[重复]

    这个问题在这里已经有答案了 这是我的复选框 HTML
  • C# - 转换日期时间格式 yyyy-MM-dd [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我正在尝试将日期时间格式从 dd M
  • nock 库 - 如何匹配任何 url

    嗨 我正在尝试箭库 https github com flatiron nock blob master README md但正在努力匹配查询字符串上的随机模式 我认为类似下面的代码应该可以工作 但我无法让任何东西工作 var nock r
  • 在pandas中读取csv时自动确定标题行

    我正在尝试从共享相同列名称的不同 csv 文件收集数据 但是 某些 csv 文件的标题位于不同的行中 有没有办法根据包含 大多数 值 实际标题名称 的第一行动态确定标题行 我尝试了以下方法 def process file file pat
  • 没有单位的行高的缺点?

    在没有单位的情况下指定行高是否有任何缺点 浏览器 设备不一致 Example body line height 1 5 在大多数情况下 使用无单位行高实际上更好 请参阅 http meyerweb com eric thoughts 200
  • JSHint 和 eclipse 插件

    所以我刚刚在 Eclipse Kepler 中安装了 JSHint 我加载了 jshintrc 文件 如何在我的 javascript 文件上运行 jshint 我没有看到菜单项 也没有看到指定文件名等的地方 有人可以帮忙吗 添加后 jsh
  • 任意预设精度小数(几乎像 BigDecimal)

    我正在寻找一个 java 类 它将保存具有任意预设精度的十进制值 班上BigDecimal看起来是一个很好的起点 但我希望能够将小数的大小限制为最终用户决定的大小 从字面上讲 最终用户将指定一个以 10 为基数的范围 我将分配足够的字节来表
  • 如何使用 open() 函数清除 .txt 文件?

    我有一个简单的程序 可以打开文件并替换文本 但是 我希望程序清除文件 然后保存需要保存的内容 我怎么做 或者有更简单的方法吗 如果您使用模式打开文件w如果文件已经存在 它将覆盖该文件 with open your file w as f f
  • 加载内核模块时出现未知符号

    我需要帮助理解为什么在插入模块时出现错误 我努力了this http www linuxforums org forum kernel 56497 unkown symbol module error while insmodding bu
  • spring jar bootRun 导致 GraphQL Schema 错误

    当我使用 gradle 构建 Spring Boot 应用程序时bootRun or build然后运行输出 jar 我从控制台日志中得到以下大量错误列表 2018 03 18 00 49 38 754 ERROR 228 main o s
  • Qt 自定义外观和感觉?

    我可以强制我的 Qt 应用程序使用不同的外观和感觉 就像在 KDE 中一样吗 您始终可以使用 QApplication setStyle 更改小部件的样式 Qt4 中有一些预定义的选项可用 在 main cpp 中做这样的事情 includ
  • 如何使用 ggplot2 面颜色和形状?

    也许 我错过了 ggplot 语法中的一些内容 可以毫无错误地绘制以下 3 个方面 不幸的是 面图混合了颜色和形状 右侧一栏应仅显示蓝色标记 而中间一栏应显示绿色标记 data1 num delay claim supply project
  • 错误:输入文件并非全部位于同一目录中,请提供显式 wd

    在尝试构建一个大约两周前工作的 PDF 后 没有大惊小怪 在一台全新安装了 R R studio 的新机器上 bookdown等等 我有这个错误 Error Input files not all in same directory ple
  • Laravel 迁移更改列的默认值

    我有一个已分配默认值的表 例如 我们可以看看以下内容 Schema create users function Blueprint table table gt increments id gt unsigned table gt inte
  • 子元素悬停时的 CSS 过渡

    当子元素的父元素悬停在其上方时 我试图暂停子元素的显示 Html span div This Is The Child div Some Text in the span span Css span position relative sp
  • 如何在 php 脚本仍在运行时显示结果

    所以我尝试过在脚本仍在执行时显示结果 https stackoverflow com questions 5415665 show results while script is still executing 但由于某种原因它不起作用 所
  • Jshell错误:java.lang.NullPointerException:charsetName

    我正在尝试使用 JDK11 提供的 JShell 来运行一些简单的命令 但是当我输入 jshell gt System out println Hello World 它给了我错误 Exception in thread main java
  • 抽象类中可以有静态数据成员吗?

    我设计了一系列相关的类 为了能够管理它们 我让它们从一个抽象类派生 这些类都需要访问一系列共享资源 我发现自己在每个类中创建了一个指针向量 它们全部相同 它们必然必须相同 似乎在基类中创建一个静态成员将使所有派生类都可以访问该向量 这意味着
  • 如何向我的应用程序添加“撰写评论”/“给我们评分”功能?

    我希望在我的应用程序中添加某种 撰写评论 或 给我们评分 功能 以便我的客户可以轻松地对我的应用程序进行评分和评论 我能想到的最佳实践是在我的应用程序中进行某种弹出窗口或打开 UIWebView 这样用户在打开 App Store 应用程序
  • Whatsapp 预览链接上未显示缩略图和说明

    我知道也有类似的问题here https stackoverflow com questions 19778620 provide an image for whatsapp link sharing and here https stac