当我们分享这样的链接时,我们如何在我们的网站中包括一张图片来显示在WhatsApp上?
当前回答
如果你想在某人在WhatsApp上分享的你网站的url旁边放一张照片,你必须在url链接的页面上放一个元标签,就像这样:
<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>
其他回答
你需要以下标签来获得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像素。
我在这里记录了完美的详细解决方案- 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像素的小图标。
在上面的页面中,您有所需的规格、字符限制和示例标记。如果你觉得满意,就给它点赞。
我想在这个帖子中添加一个答案,特别提到上面的线程中哪些帮助我解决了问题,以及它们可以遵循的顺序,以正确理解根本原因并一劳永逸地解决它:
当我在社交媒体上分享这个解决方案的链接时,我能够得到丰富的预览。
我在这篇文章中遵循了各种选项,下面是最接近正确答案的选项,它们都有助于最终结果:
需要的标签(主标签要聚焦- og:image) 图像参数 一定会有帮助的工具 如何正确给出图像路径 根本原因及解决方法
这将有望为人们节省滚动并找到正确答案所需的时间,以及所有试验和错误所需的努力。
如果你想在某人在WhatsApp上分享的你网站的url旁边放一张照片,你必须在url链接的页面上放一个元标签,就像这样:
<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>
我建议经常查看https://developers.facebook.com/tools/debug/sharing以验证您的属性为 Facebook经常改变它的政策、法规和API。
如果你使用Messenger机器人或其他FB应用程序,你可能需要FB:app_id属性来让链接图像在Whatsapp中工作。 更多信息请访问Facebook开发者网站。 https://developers.facebook.com/docs/sharing/webmasters
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击