iMessage 链接预览无法正常工作或显示灰色气泡

为什么 iMessage 预览为空或不显示

• 缺少 og:image。默认情况下，“信息”应用会显示一个带有标题、域名和小图标的灰色气泡。

• 标签是通过 JavaScript 添加的。链接预览不会运行 JavaScript，因此元数据必须存在于 HTML 中。

• 页面使用了 Meta Refresh 重定向。“信息”应用不会跟随 Meta 重定向。服务器端重定向可以正常工作。

• 页面过大。主页面限制在 1 MB 以内，图标、图片和视频总计限制在 10 MB 以内。

• 移动端和桌面端获取的 HTML 不同。Apple 要求两者使用相同的元数据。

如何解决

1. 使用meta 标签检查工具读取标签。

2. 添加宽度至少为 900 像素的 og:image 图片。避免在图片中包含文字，因为它可能会以较小尺寸显示。

3. 添加至少 108 像素的正方形图标。“信息”应用会使用 apple-touch-icon、favicon 或 <link rel> 图标。可以使用 favicon 检查工具进行测试。

4. 将 og:title 设置为不包含网站名称的页面标题，并将品牌名称放入 og:site_name 中。

5. 将所有 Meta Refresh 替换为服务器端重定向。

“信息”应用读取的标签

• 用于标题说明的 og:title

• 用于图片的 og:image

• 用于品牌的 og:site_name

• 指向视频文件以供内嵌播放的 og:video 或 twitter:player:stream

• 来自 apple-touch-icon 或 favicon 的图标

图片尺寸规则

• 图片宽度至少 900 像素

• 宽度小于 150 像素的图片可能会被忽略或显示为图标

• 正方形图标，每边至少 108 像素

• 页面 HTML 最大 1 MB；所有图片、图标和视频总计最大 10 MB

Apple 将这些称为指导原则，并表示限制可能会发生变化。

如何强制刷新

“信息”应用没有刷新工具。发送带有查询字符串的 URL，例如 ?v=2。未经验证：Apple 未公开预览缓存的保留时间。刷新工具也适用于其他应用。

来源

• TN3156: 为“信息”应用创建富预览