为 WhatsApp 链接共享提供图像

当我们分享这样的链接时，我们如何在我们的网站中包含图像以在 WhatsApp 中显示？

原文由 maxdaniel98 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.8k

2020年标准

只需几个步骤即可获得适用于个人电脑和移动设备的 WhatsApp、Twitter、Facebook 和书签图标的完美预览。如果您喜欢阅读，请转到 Open Graph (ogp.me) - 但请务必阅读此答案中的步骤 1 - 6 以获得最佳的 WhatsApp 预览。

不同公司的许多技术审计结果表明 ，拥有 Open Graph 标签不会帮助您获得更好的 SEO 排名，它们仅适用于社交媒体。 schema.org 的数据结构将帮助您进行 SEO。

这些 Open Graph <meta> 标签位于 <head> 标签内。

请注意： @jaimish11 提到一些应用程序或网站使用缓存，甚至将网站预览存储在他们的数据库中。这意味着当您在 WhatsApp 或 Facebook 中测试您的链接时，您很可能不会立即看到任何差异。使用另一个链接（另一个页面）就可以了。但是一旦您使用该链接一次，这个 “请注意” 部分就会重新开始。

第一步：标题

最多 65 个字符

<title>your keyword rich title of the website and/or webpage</title>

第二步：描述

最多 155 个字符

<meta name="description" content="description of your website/webpage, make sure you use keywords!" />

第 3 步：og:title

最多 35 个字符

<meta property="og:title" content="short title of your website/webpage" />

第 4 步：og:url

完整链接到当前网页地址

<meta property="og:url" content="https://www.example.com/webpage/" />

第 5 步：og:描述

最多 65 个字符

<meta property="og:description" content="description of your website/webpage" />

第 6 步：og:image

图片（JPG 或 PNG），尺寸小于 300KB，最小尺寸为 300 x 200 * 。此图像应通过具有有效非自签名证书的 HTTPS 连接提供。 **

 <meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png" />

* @RichDeBourke 向我提到了这一点，但显然 WhatsApp 增加了其最大图像大小（尺寸和文件大小）。我做了一些测试：它并不是每次都能在每台设备上始终如一地工作。我测试了 2.x Mb 图像，甚至它似乎工作了 ⁹⁄₁₀ 次。 <300KB 是最安全的方法，但从 18-02-2020 开始，您应该可以使用更大的图像。不过，我建议将文件大小保持在 2MB 以下。如果您还没有通过 TinyPNG 或任何其他图像压缩算法，一定要将您的图像扔掉。

\*\* @Indraraj 提到如果您的站点使用自签名证书在 https 上运行，则图像可能不会显示。

如果您完成了上述步骤，您现在可以在 WhatsApp 中看到您的预览！但是，请注意上面的 “请注意” 部分。

第 7 步：og:类型

为了在图中表示您的对象，您需要指定其类型。以下是可用的全局类型列表：http: //ogp.me/#types 。您还可以指定自己的类型。

 <meta property="og:type" content="article" />

第 8 步：og:locale

资源的区域设置。如果您有其他可用的语言翻译，您也可以使用 og:locale:alternate。

如果您不指定 og:locale，则默认为 en_US。

 <meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />

第 9 步：推特

要获得最佳的 Twitter 支持，请阅读此内容。

第 10 步：脸书

要获得最佳的 Facebook 支持，请阅读此内容。

第 11 步：网站图标

要获得对所有浏览器和设备的最佳网站图标支持，请阅读此内容。

奖励步骤 12：视频/音频

也可以共享音频/视频。例如，Facebook 和 Twitter 可以很好地分享视频。阅读 ogp.me。当然，WhatsApp 也有此选项：当您分享 Instagram 或 Youtube 链接时，WhatsApp 预览会随应用内视频播放器一起提供。

超级奖励第 13 步：产品、人物、电影等。

这种信息实际上取决于提供商（Facebook、Google）。我不知道什么时候，但 WhatsApp 和 Twitter 可以启用对产品的支持。这样，您与之共享链接的人可能会在共享链接“小部件”中看到价格、平均评论分数。那样就好了。对于在 WhatsApp Business 应用程序中更新目录的企业帐户，这已经存在，但这与链接共享完全不同。

原文由 Derk Jan Speelman 发布，翻译遵循 CC BY-SA 4.0 许可协议

为 WhatsApp 链接共享提供图像

2020年标准

你尚未登录，登录后可以

问一个鼠标滚动事件，这种是怎么实现的？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

threejs用octree实现房间内第三人称漫游并且添加了碰撞，人物在碰撞到墙壁的时候不停的弹回，应该怎么修改才能不会疯狂的弹回？

Vue为什么说textarea标签不支持插值表达式的？

为什么下面的代码内部的 div 其 100% 高度可以跳过上层元素?

单页应用网站缓存不是由于index.html文件被缓存导致的吗？

election嵌套了一个web项目通信为什么会中断?

Stack Overflow 翻译