为什么 WhatsApp 链接共享中不显示图像？

Question

我正在尝试使用开放图谱数据丰富网站，让页面作者决定哪些图像和文本显示在社交媒体的预览中。但是，我无法让 WhatsApp 在共享卡中显示小图像。

\n\n

我当前的标记如下所示：

\n\n

<meta property="og:url" content="https://dev.firapeel.nl/activiteiten/%CE%A3%CF%89%CE%BA%CF%81%CE%AC%CF%84%CE%B7%CF%82">\n<meta property="og:title" content="\xce\xa3\xcf\x89\xce\xba\xcf\x81\xce\xac\xcf\x84\xce\xb7\xcf\x82">\n<meta name="description" content="Excerpt of Greek text, something by Plato">\n<meta property="og:description" content="Excerpt of Greek text, something by Plato">\n<meta property="og:image" content="https://dev.firapeel.nl/img/opengraphtest/the-alps-4440879_1920.jpg?type=open_graph">\n<meta property="og:image:width" content="600">\n<meta property="og:image:height" content="315">\n

\n\n

当我仔细阅读这个答案时，我认为我符合所有提到的要求，并且图像小于300KB且大于300x200。出于测试目的，这是包含此数据的页面（页面不会永远在线，但至少只要没有可接受的答案）。

\n\n

让我惊讶的是，这个页面确实在 WhatsApp 上生成了预览图像，所以我查看了它的标记：

\n\n

<meta property="og:type" content="website" />\n<meta property="og:site_name" content="The Criterion Collection" />\n<meta property="og:title" content="Jack Reynor\xe2\x80\x99s Top 10" />\n<meta property="og:url" content="https://www.criterion.com/current/top-10-lists/365-jack-reynor-s-top-10" />\n<meta property="og:description" content="A voracious cinephile with wide-ranging taste, the star of Midsommar shares a list of favorite films that shows his particular affinity for the provocative and the macabre." />\n<meta property="og:image" content="https://s3.amazonaws.com/criterion-production/explore_images/1163-be829752be16371f35aad962dd0ee8dd/EqV7Y9BOuhZMNvHkcEmghaSAykI5cd_original.jpg" />\n<meta content="https://s3.amazonaws.com/criterion-production/explore_images/1163-be829752be16371f35aad962dd0ee8dd/EqV7Y9BOuhZMNvHkcEmghaSAykI5cd_original.jpg" property="thumbnail" />\n

\n\n

根据记录，链接图像的尺寸为 1600x1600。

\n\n

所以我尝试摆脱图像大小属性，使用更大的图像（尺寸为 1920x1079，并且没有查询参数），使用 300x300 的方形图像，使用thumbnail页面进行测试，而不需要 URL -编码实体，但无论我尝试哪种组合，都不起作用。

\n\n

更新：

\n\n

根据 Cosmin Staicu 的回答，URL 中的希腊字符似乎是问题所在，所以我选择了另一个仅包含 latin1 字符的页面，但这对我来说没有改变任何事情：

\n\n

\n

Answer 1

同时，我更改了服务器应用程序的结构：最初，我使用 PHP 脚本提供图像，该脚本将 URI 请求转换为内部文件名。由于服务器过载，这会导致在一次请求多个图像时出现 503“服务不可用”错误。

所以我决定将所有图像放在一个可公开访问的目录中，让 Apache 直接处理图像请求。这不仅带来了巨大的加速，而且作为一个副作用，这个问题得到了解决。