为什么在WhatsApp链接分享中图片无法显示？

Question

我正在尝试使用Open Graph数据丰富网站，让页面作者决定在社交媒体上预览时显示哪些图像和文本。然而，我无法让WhatsApp在共享卡中显示小图像。

我的当前标记如下：

<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">
<meta property="og:title" content="Σωκράτης">
<meta name="description" content="Excerpt of Greek text, something by Plato">
<meta property="og:description" content="Excerpt of Greek text, something by Plato">
<meta property="og:image" content="https://dev.firapeel.nl/img/opengraphtest/the-alps-4440879_1920.jpg?type=open_graph">
<meta property="og:image:width" content="600">
<meta property="og:image:height" content="315">

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

我发现这个页面在WhatsApp上确实会生成预览图像，所以我查看了它的标记。

<meta property="og:type" content="website" />
<meta property="og:site_name" content="The Criterion Collection" />
<meta property="og:title" content="Jack Reynor’s Top 10" />
<meta property="og:url" content="https://www.criterion.com/current/top-10-lists/365-jack-reynor-s-top-10" />
<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." />
<meta property="og:image" content="https://s3.amazonaws.com/criterion-production/explore_images/1163-be829752be16371f35aad962dd0ee8dd/EqV7Y9BOuhZMNvHkcEmghaSAykI5cd_original.jpg" />
<meta content="https://s3.amazonaws.com/criterion-production/explore_images/1163-be829752be16371f35aad962dd0ee8dd/EqV7Y9BOuhZMNvHkcEmghaSAykI5cd_original.jpg" property="thumbnail" />

记录一下，链接图片的尺寸为1600x1600。

所以我试图去掉图片大小属性，使用一个尺寸更大的图片（尺寸为1920x1079，没有查询参数），使用一个300x300的正方形图片，使用缩略图元属性，在不需要URL编码实体的页面上进行测试，但无论我尝试哪种组合，都没有效果。

更新：

根据Cosmin Staicu的答案，似乎URL中的希腊字符是问题所在，因此我选择只包含Latin1字符的另一页，但对我来说这并没有改变什么。

- Marcel Korpel

---

我可以在WhatsApp的桌面和移动应用中看到你的预览图片， 请问您所使用的系统或移动设备规格是什么？ - Esteban Camargo

@EstebanCamargo 我在 iPhone 6s 上尝试过，也在 Linux 版本的 Chromium 77 上的 WhatsApp 网页版上尝试过。 - Marcel Korpel

Answer 1

您的og实现仅适用于某些WhatsApp版本。这是因为URL（整个页面的URL，而不仅仅是图像）包含非ASCII字符。

我已经复制/粘贴了您的HTML代码到我的网站上，并且只要文件名为index.html或ogtest.html，它就可以正常工作。

但是，当我将文件重命名为希腊字符时，og协议停止工作了。

- Cosmin Staicu

---

看起来不错，但对我没用。我有另一个页面，位于https://dev.firapeel.nl/activiteiten/book6，但我无法获取图像。我会稍微更新一下我的问题。 - Marcel Korpel

您提供的链接在我的机器上运行良好。另一方面，我通常为og协议提供一个额外的元标记：<meta property="og:image:type" content="image/jpeg">。 - Cosmin Staicu

另外，根据规范，您还需要为图像添加alt文本：<meta property="og:image:alt" content="description">。 - Cosmin Staicu

感谢您的建议。我认为我可以假设这是一个本地问题。我会在我的网络中检查其他人是否能看到这张图片，并在此期间保持这个问题开放，但除了URL中的非Latin1字符外，可能根本没有问题。 - Marcel Korpel

为了快速预览网站的 OG（Open Graph）情况，Chrome 浏览器有一个叫做 Open Graph Preview 的扩展程序。它可以帮助您进行调试。 - Cosmin Staicu

Answer 2

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

因此，我决定将所有图像放在一个公共可访问的目录中，让 Apache 直接处理图像请求。这不仅大大加快了速度，而且副作用是解决了这个问题。

- Marcel Korpel

Answer 3

在我的情况下，Whatsup 上的共享帖子显示了缩略图，所以我通过将 img 格式更改为 .jpg 并将其大小调整为 <300 kb 来进行修复。

先决条件是我正在使用 Yoast SEO 和 Anyshare 插件。

- marvin gitau