当我们分享这样的链接时,我们如何在我们的网站中包括一张图片来显示在WhatsApp上?
当前回答
我在这里记录了完美的详细解决方案- 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" itemprop="image" content="image_url" />
<meta property="og:image:url" itemprop="image" content="image_url" />
<meta property="og:image:type" content="image/png" />
但在WhatsApp上分享我的链接时却看不到图片。
我发现WhatsApp也做了一些缓存的图像和url信息,不知道多长时间。
为了检查是否插入了正确的标记,我只是尝试了不同的url,例如:http://domain.com而不是http://www.domain.com。
希望这对其他人有所帮助。
你需要以下标签来获得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 property="og:url" content="https://www.same-host.com/whatsapp-image.png" />
例如,通过前导子串检测用户代理,将所需图像传递给WhatsApp
WhatsApp/2.18.380 A
在真正按下发送按钮前等待几秒钟,以便WhatsApp有时间从og元数据中检索图像和描述。
即使在这些尝试之后。我的网站图片有时会被取走,有时不会。 在https://developers.facebook.com/tools/debug/sharing验证后
意识到我的django (python)框架是渲染图像路径相对。我必须用完整的url更改图像的路径。(包括http://)。然后它开始工作了
我也有同样的问题,问题是图片的大小。Whatsapp不支持300KB以上的图片。
所以在Whatsapp上显示图像的最重要的属性是:
<meta property="og:image" content="url_image">
并且要显示的图像大小必须小于300KB。
如果问题仍然存在,请阅读类似问题的答案
推荐文章
- 在notepad++中格式化代码
- 表单中包含表单,可以吗?
- 如何创建表只使用<div>标签和Css
- html5 - canvas元素-多层
- 如何确保<select>表单字段被禁用时提交?
- 如何在HTML文本换行?
- 如何在JavaScript中转义单引号(')?
- 如何使用HTML/CSS在文本中插入空格/制表符
- 用背景图像填充SVG路径元素
- 将JSON显示为HTML
- HTML被认为是一种编程语言吗?
- 如何修复favicon.ico错误:“Failed to load resource: net::ERR_EMPTY_RESPONSE”
- 这个CSS是如何产生一个圆的?
- 我如何显示点(“…”)在一个跨度与隐藏溢出?
- 画布在使用CSS时被拉伸,但正常使用“width”/“height”属性