html - Rich Link Preview 不适用于 Whatsapp IOS 但适用于 Android

Question

我正在开发一个网站，该网站将主要通过链接在 whatsapp 上共享。当在whatsapp上共享链接时，我需要显示丰富的预览。这仅适用于android，但不适用于IOS。
这就是我的头部在下面的 HTML 中的样子。我尝试了所有形式的建议，将图像保持在 300KB 以下，并且 1:1 的大小也小于 300px。一切都无济于事。丰富的预览根本不显示标题或描述。我做错了什么？这是网站的链接，以防有人需要帮我检查 https://www.happyventures.company/invite/zzisi/ .谢谢

<meta property="og:type" content="website">
<meta property="og:description" content="Happy - Just for good friends and family">
<meta property="og:title" content="Happy App">
<meta property="og:image" itemprop="image" content="https://happy-static.s3.eu-west-2.amazonaws.com/rsz_fav.png">
<meta name="twitter:image:alt" content="https://happy-static.s3.eu-west-2.amazonaws.com/rsz_fav.png">
<meta name="twitter:image" content="https://happy-static.s3.eu-west-2.amazonaws.com/rsz_fav.png">
<link href="https://www.happyventures.company" rel="canonical">
<meta property="og:image:width" content="250">
<meta property="og:image:height" content="250">
<meta property="og:image:type" content="image/png">
<link rel="apple-touch-icon" sizes="250x250" href="https://happy-static.s3.eu-west-2.amazonaws.com/rsz_fav.png">
<link rel="icon" type="image/png" sizes="250x250" href="https://happy-static.s3.eu-west-2.amazonaws.com/rsz_fav.png">
<link rel="icon" type="image/png" sizes="250x250" href="https://happy-static.s3.eu-west-2.amazonaws.com/rsz_fav.png">
<link rel="mask-icon" href="https://happy-static.s3.eu-west-2.amazonaws.com/rsz_fav.png" color="#6c63ff">```

Answer 1

好的，所以我在这里更新了我的答案:

我已经使用查看源复制了您网站的所有内容，并在我的域测试页面上提出，富文本在 IOS 上为我显示。

但奇怪的是你的主域 https://www.happyventures.company/和 https://www.happyventures.company/invite/zzisi/但是页面富文本不仅显示，然后我尝试了我的 WhatsApp 网络并尝试调试响应到底是什么然后我发现对于我的域它给了我响应消息但对于你的域它给出了 404 .

请在 https://web.whatsapp.com/ 上查看您的网站

如果您有“.com”域，也请尝试相同的操作。

查看 的屏幕截图404 :


对我有用的旧答案:
试试下面的代码:

<meta property="og:type" content="website">
<meta property="og:title" content="Happy App">
<meta property="og:image:width" content="250">
<meta property="og:image:height" content="250">
<meta property="og:image:type" content="image/png">
<meta property="og:description" content="2 Happy - Just for good friends and family">
<meta property="og:image" itemprop="image" content="https://happy-static.s3.eu-west-2.amazonaws.com/rsz_fav.png">

<meta name="twitter:image:alt" content="https://happy-static.s3.eu-west-2.amazonaws.com/rsz_fav.png">
<meta name="twitter:image" content="https://happy-static.s3.eu-west-2.amazonaws.com/rsz_fav.png">