当我们分享这样的链接时,我们如何在我们的网站中包括一张图片来显示在WhatsApp上?
当前回答
你需要以下标签来获得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像素。
其他回答
我也有同样的问题,在这里解决。
如果你添加meta og:image,它应该会显示出来
问题是,如果你不输入http://,以/结尾,whatsapp将不显示图像 例如,如果你输入http://google.com/而不是google.com,它会显示图像和描述
希望它能帮助到别人。
我在这里记录了完美的详细解决方案- https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html 要获得完美的预览效果,有七个步骤。
标题:添加关键字丰富标题到你的网页,最多65个 字符。 元描述:描述你的网页,最多155个字 字符。 og:title:最多35个字符。 og:url:到您网页地址的完整链接。 og:description:最大65个字符。 og:image:最小小于300KB的图片(JPG或PNG) 尺寸建议为300 × 200像素。 favicon:尺寸为32 × 32像素的小图标。
在上面的页面中,您有所需的规格、字符限制和示例标记。如果你觉得满意,就给它点赞。
我建议经常查看https://developers.facebook.com/tools/debug/sharing以验证您的属性为 Facebook经常改变它的政策、法规和API。
如果你使用Messenger机器人或其他FB应用程序,你可能需要FB:app_id属性来让链接图像在Whatsapp中工作。 更多信息请访问Facebook开发者网站。 https://developers.facebook.com/docs/sharing/webmasters
额外的有用信息:
你可以提供几个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/
如果有人正在寻找一种方式显示预览使用WhatsApp API,包括在你的网站上的元标签的图像,你需要设置preview_url=true。
在文本消息中发送url
默认情况下,移动WhatsApp应用程序可以识别url并使其可点击。要包含URL预览,请在消息体中包含"preview_url": true,并确保URL以http://或https://.开头需要主机名,IP地址不匹配。
大多数情况下,当你发送一个URL时,无论是否带有预览,消息的接收者都会看到一个他们可以点击的URL。
URL预览只会在以下情况之一发生后才会被渲染:
业务已经向用户发送了一个消息模板。 用户通过“点击聊天”链接开始对话。 用户将业务电话号码添加到他们的地址簿和 发起对话。
推荐文章
- 这个CSS是如何产生一个圆的?
- 我如何显示点(“…”)在一个跨度与隐藏溢出?
- 画布在使用CSS时被拉伸,但正常使用“width”/“height”属性
- 如何让一个按钮将我的页面重定向到另一个页面?
- 如何让元素被点击(对于整个文档)?
- Node.js上的html解析器
- 大写还是小写文档类型?
- 样式化HTML电子邮件的最佳实践
- CSS/HTML:什么是使文本斜体的正确方法?
- 我如何才能在表中应用边界?
- 如何使一个DIV不包装?
- CSS div元素-如何显示水平滚动条只?
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 使用“!”的含义是什么?重要的”?
- 资源解释为样式表,但以MIME类型text/html传输(似乎与web服务器无关)