为WhatsApp链接共享提供图像

Question

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

Answer 1

只需几个步骤，就能为WhatsApp、Twitter、Facebook以及PC和移动设备的书签图标提供完美的预览。如果你喜欢阅读，请访问Open Graph(ogp.me)--但请确保阅读本答案中的步骤1-6以获得最佳的WhatsApp预览。

不同公司的许多技术审计结果显示，开放图形标签并不能帮助你获得更好的搜索引擎优化排名，它们只适用于社交媒体。schema.org的数据结构将帮助您进行SEO。

这些打开的图形 标记位于标记内部。

最多65个字符

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

步骤2：描述

最多155个字符

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

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

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

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

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

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

^*@richdebourke向我提到了这一点，但显然WhatsApp增加了它的最大图像大小（尺寸和文件大小）。我做了一些测试：它并不是每次在每个设备上都能始终如一地工作。我测试了2.x Mb的图像，即使这样也能工作9/10倍。<300KB是最安全的方法，但在2020年18-02-2020之前，使用较大的图像应该没有问题。不过，我建议将文件大小保持在2MB以下。如果你还没有用TinyPNG或任何其他图像压缩算法，那么一定要把你的图像通过TinyPNG或任何其他图像压缩算法。

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

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

步骤8:OG:区域设置

资源的区域设置。如果有其他语言翻译可用，还可以使用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" />

奖励步骤12：视频/音频

还可以共享音频/视频。例如，Facebook和twitter就很好地分享视频。读OGP.ME。

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