当我们分享这样的链接时,我们如何在我们的网站中包括一张图片来显示在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:image,当url以斜杠(/)结束时,它不能工作。从URL中删除斜杠后-图像被加载..有趣的错误……
我想在这个帖子中添加一个答案,特别提到上面的线程中哪些帮助我解决了问题,以及它们可以遵循的顺序,以正确理解根本原因并一劳永逸地解决它:
当我在社交媒体上分享这个解决方案的链接时,我能够得到丰富的预览。
我在这篇文章中遵循了各种选项,下面是最接近正确答案的选项,它们都有助于最终结果:
需要的标签(主标签要聚焦- og:image) 图像参数 一定会有帮助的工具 如何正确给出图像路径 根本原因及解决方法
这将有望为人们节省滚动并找到正确答案所需的时间,以及所有试验和错误所需的努力。
我在这里记录了完美的详细解决方案- 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像素的小图标。
在上面的页面中,您有所需的规格、字符限制和示例标记。如果你觉得满意,就给它点赞。
我想提醒大家注意一个事实,简单的<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" />
(我本想把这句话作为评论,但现在还不允许这样做。版主可以随意移动这个,如果更合适的话。)
你需要以下标签来获得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像素。
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素,而不占用文档流中的空间
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 在一个CSS宽度的小数点后的位置是尊重?
- 我怎么能选择一个特定的类的最后一个元素,而不是父里面的最后一个孩子?
- 反应:为什么当道具改变时子组件不更新
- 我怎么能检查html元素,从DOM消失失去焦点?
- 在Atom编辑器中是否有格式化HTML的命令?
- 把<script>标签放在</body>标签之后是错误的吗?
- 谷歌Chrome表单自动填充和它的黄色背景