如何制作WhatsApp for iOS在我网站的og标签中获取预览集的图像?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何制作WhatsApp for iOS在我网站的og标签中获取预览集的图像?相关的知识,希望对你有一定的参考价值。

我正在尝试为我的网站设置og:image标签,以便用户在共享网站链接时可以看到缩略图。现在缩略图工作得很好facebook,twitter和Linkedin。但是,当我在WhatsApp上分享链接时,它只适用于android。在WhatsApp for ios的情况下,它尝试加载图像但失败,只有网站描述与网站链接一起发送。

我已经关注了这个论坛上的所有答案。我试图用于缩略图的图像是669 × 378 px,大小为89KB。根据facebook调试器没有错误。我的网站是在WordPress,所以我之前使用的是Yoast SEO,但为了解决这个问题,我尝试手动添加meta标签,但没有什么适用于IOS的WhatsApp。

这些是facebook调试器为我的网站https://www.indiadappfest.com找到的元标签

These are the raw tags that we found
Meta Tag    <meta property="og:locale" content="en_US" />
Meta Tag    <meta property="og:type" content="website" />
Meta Tag    <meta property="og:title" content="India Dapp Fest 2019 | Asia&#039;s top-notch revelation on blockchain based applications" />
Meta Tag    <meta property="og:description" content="India Dapp Fest is a top-notch conference focussed on blockchain, enabling conscious decentralization and inturn, ushering in a change to pave the path for future work assemblies" />
Meta Tag    <meta property="og:url" content="https://www.indiadappfest.com" />
Meta Tag    <meta property="og:site_name" content="India Dapp Fest 2019" />
Meta Tag    <meta property="og:image" content="https://www.indiadappfest.com/wp-content/uploads/2019/03/thumbnail-2-low-resolution.jpg" />
Meta Tag    <meta property="og:image:secure_url" content="https://www.indiadappfest.com/wp-content/uploads/2019/03/thumbnail-2-low-resolution.jpg" />
Meta Tag    <meta property="og:updated_time" content="1553416119" />

有人,请帮我修一下ios。

答案

根据开放图形documentation你应该使用1:1,即方形图像,除此之外删除yoast seo插件并手动添加元标记(我使用了一个名为脚本和样式的插件)。这帮我解决了WhatsApp for ios中缩略图的问题。您可能还想添加另一个带有矩形图像的元标记,因为当您在Facebook上分享时,Facebook将会扭曲1:1图像。

以上是关于如何制作WhatsApp for iOS在我网站的og标签中获取预览集的图像?的主要内容,如果未能解决你的问题,请参考以下文章

如何在聊天中回复特定消息,就像使用 html css javascript/jquery 的 skype/whatsapp

如何从firebase加载WhatsApp Sticker?

谷歌助手如何直接从谷歌助手应用程序发送个人 whatsapp 消息?为whatsapp制作用户界面的是谷歌助理吗?

包括web whatsapp自己的网站

如何根据文字长度增加 UITextview 高度,如 whatsapp

如何在网站中实现whatsapp分享按钮[重复]