提供用于WhatsApp链接共享的图像

Question

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

Answer 1

2020年标准
只需几步即可为WhatsApp，Twitter，Facebook和PC和移动设备的书签图标获得完美的预览。如果您喜欢阅读，
请访问ogp.me-但请务必阅读此答案中的步骤1-6，以获取最佳的WhatsApp预览。

请注意：某些应用或网站使用缓存，甚至将网站
预览存储到其数据库中。这意味着，例如，当您在WhatsApp或Facebook中测试链接时，很可能不会立即看到任何差异。使用另一个链接（另一页）可以解决问题。但是，一旦您使用该链接一次，此“请注意”部分就会重新开始。

步骤1：标题

最多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!">

步骤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：description

最多65个字符

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

第6步：og：image

图片（JPG或PNG），尺寸小于300KB，最小尺寸为300 x
200 *

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

• @RichDeBourke向我提到了这一点，但是显然WhatsApp
  增加了其最大图像大小（尺寸和文件大小）。我做了一些
  测试：并非每次都在每个设备上都一致工作。我测试了2.x
  Mb图像，甚至可以工作9/10次。<300KB是最安全的
  方法，但是从2020年2月18日开始，使用较大的图像应该没问题。不过，我
  建议将文件大小保持在2MB以下。 如果还没有的话，绝对可以
  通过TinyPNG或任何其他图像压缩
  算法来抛出图像。

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

步骤7：og：type

为了在图形中表示对象，您需要
指定其类型。以下是可用的全局类型的列表：
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

为了获得最好的Twitter支持。

步骤10：Facebook

要获得Facebook的最佳支持。

步骤11：网站图示

为了获得所有浏览器和设备的最佳图标支持。

奖励步骤12：视频/音频

也可以共享音频/视频。例如，Facebook和Twitter可以很好地
共享视频。阅读ogp.me。