当我们分享这样的链接时,我们如何在我们的网站中包括一张图片来显示在WhatsApp上?
当前回答
我想提醒大家注意一个事实,简单的<meta property="og:image" content="image.png" />,正如上面所建议的那样,并不适合我(这实际上已经让我在一个循环中好几周了)。可以使用绝对URL: <meta property="og:image" content="https://domainname.com/image.png" />
或者以斜杠开头(如果图像在根目录中): <meta property="og:image" content="/image.png" />
(我本想把这句话作为评论,但现在还不允许这样做。版主可以随意移动这个,如果更合适的话。)
其他回答
额外的有用信息:
你可以提供几个og:图片,whatsapp将使用最后一个。这将有助于解决例如facebook想要1.91:1的比例和whatsapp 1:1的问题
<meta property="og:image" content="https://www.link.com/facebook.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image" content="https://www.link.com/whatsapp.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />
https://roei.stream/2018/11/18/ideal-open-graph-image-size-for-whatsapp-link-share/
https://css-tricks.com/essential-meta-tags-social-media/
在我们的例子中,问题是og:image URL不包括文件扩展名(.jpg)。我们正在使用Cloudinary,在它们的情况下,图像url中的文件扩展名是不需要的。
当我们将.jpg格式添加到图片URL后,图片就开始在Whatsapp预览中显示。
如果有人正在寻找一种方式显示预览使用WhatsApp API,包括在你的网站上的元标签的图像,你需要设置preview_url=true。
在文本消息中发送url
默认情况下,移动WhatsApp应用程序可以识别url并使其可点击。要包含URL预览,请在消息体中包含"preview_url": true,并确保URL以http://或https://.开头需要主机名,IP地址不匹配。
大多数情况下,当你发送一个URL时,无论是否带有预览,消息的接收者都会看到一个他们可以点击的URL。
URL预览只会在以下情况之一发生后才会被渲染:
业务已经向用户发送了一个消息模板。 用户通过“点击聊天”链接开始对话。 用户将业务电话号码添加到他们的地址簿和 发起对话。
你需要以下标签来获得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像素。
我想在这个帖子中添加一个答案,特别提到上面的线程中哪些帮助我解决了问题,以及它们可以遵循的顺序,以正确理解根本原因并一劳永逸地解决它:
当我在社交媒体上分享这个解决方案的链接时,我能够得到丰富的预览。
我在这篇文章中遵循了各种选项,下面是最接近正确答案的选项,它们都有助于最终结果:
需要的标签(主标签要聚焦- og:image) 图像参数 一定会有帮助的工具 如何正确给出图像路径 根本原因及解决方法
这将有望为人们节省滚动并找到正确答案所需的时间,以及所有试验和错误所需的努力。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击