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

当我们

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

回答:

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。

以上是 提供用于WhatsApp链接共享的图像 的全部内容, 来源链接: utcz.com/qa/427856.html

回到顶部