代码之家 › 专栏 › 技术社区 › Marcel Korpel

为什么WhatsApp链接共享中没有显示图像?

open-graph-protocol whatsapp meta-tags html

Marcel Korpel · 技术社区 · 5 年前

我试图用开放的图形数据丰富网站,让页面作者决定哪些图片和文本出现在社交媒体的预览中。但是,我无法让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">

当我读的时候 this answer 非常接近,我认为我符合所有提到的要求,并且图像小于300KB,大于300x200。出于测试目的, here 是包含此数据的页面(页面不会永远在线,但至少只要没有可接受的答案)。

我突然想到 this page 确实在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的正方形图像,使用 thumbnail

更新:

根据Cosmin Staicu的回答,URL中的希腊字符似乎是问题所在,所以我选择了 another page 只有拉丁文字符,但这并没有改变我的一件事:

0 回复 | 直到 5 年前

Cosmin Staicu Sadeeq Ahmad 5 年前

你的og实现只适用于whats应用程序的某些版本。这是因为url(整个页面,不仅仅是图像)包含非ascii字符。

我在我的一个网站上复制/粘贴了你的html代码,只要文件名为索引.html或者ogtest.html.

Marcel Korpel 4 年前

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

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

marvin gitau 4 年前

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