提供用于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