当我们分享这样的链接时,我们如何在我们的网站中包括一张图片来显示在WhatsApp上?
当前回答
我也有同样的问题,问题是图片的大小。Whatsapp不支持300KB以上的图片。
所以在Whatsapp上显示图像的最重要的属性是:
<meta property="og:image" content="url_image">
并且要显示的图像大小必须小于300KB。
如果问题仍然存在,请阅读类似问题的答案
其他回答
有同样的问题,添加了og:image,当url以斜杠(/)结束时,它不能工作。从URL中删除斜杠后-图像被加载..有趣的错误……
如果你想在某人在WhatsApp上分享的你网站的url旁边放一张照片,你必须在url链接的页面上放一个元标签,就像这样:
<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>
在我们的例子中,问题是og:image URL不包括文件扩展名(.jpg)。我们正在使用Cloudinary,在它们的情况下,图像url中的文件扩展名是不需要的。
当我们将.jpg格式添加到图片URL后,图片就开始在Whatsapp预览中显示。
我建议经常查看https://developers.facebook.com/tools/debug/sharing以验证您的属性为 Facebook经常改变它的政策、法规和API。
如果你使用Messenger机器人或其他FB应用程序,你可能需要FB:app_id属性来让链接图像在Whatsapp中工作。 更多信息请访问Facebook开发者网站。 https://developers.facebook.com/docs/sharing/webmasters
你需要以下标签来获得WhatsApp图像预览:
<meta property="og:title" content="Website name" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://url.com/" />
<meta property="og:description" content="Website description" />
<meta property="og:image" content="image.png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="600" />
正如Facebook文档所说,如果你指定了og:image大小,它将被快速获取,而不是异步获取。
图片格式建议为PNG。 推荐至少600x600像素。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击