当我们分享这样的链接时,我们如何在我们的网站中包括一张图片来显示在WhatsApp上?
当前回答
在失去4个小时后,在这个话题上发表我的意见。
我正在编写一个用webpack编译的vue应用程序。 默认情况下,Webpack缩小了HTML,就像屠夫一样。它从许多属性中删除了双引号。
Whatsapp讨厌这一点! 它只是跳过属性值周围的引号格式不正确的字段。
关闭索引的最小化,一切都会好起来的!
下面是如何使用Vue-CLI,在vue.config.js文件中添加这个:
module.exports = {
chainWebpack: config => {
config.plugin('html')
.tap(args => {
args[0].minify = false
return args
})
}
来源:https://github.com/vuejs/vue-cli/issues/4328#issuecomment-595682922
其他回答
在一个bug中工作后,发现在IOS中,HEAD中的元素可能会阻止WhatsApp搜索og:image /og:description / name=description。所以首先试着把它们放在其他事情的上面。
这行不通
<head>
<div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
<meta property="og:description" content="description" />
<meta property="og:image" content="http://cdn.some.com/random.jpg" />
</head>
这项工作:
<head>
<meta property="og:description" content="description" />
<meta property="og:image" content="http://cdn.some.com/random.jpg" />
<div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
</head>
我自己也一直在尝试这样做,我已经添加了所有正确的元标签:
<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不支持300KB以上的图片。
所以在Whatsapp上显示图像的最重要的属性是:
<meta property="og:image" content="url_image">
并且要显示的图像大小必须小于300KB。
如果问题仍然存在,请阅读类似问题的答案
在看了很多答案,但无法解决这个问题后,我终于在多次迭代后让它工作了。这是我使用的确切代码:
在<head>标签中:
<meta property="og:title" content="ABC Blabla 2020 Friday" />
<meta property="og:url" content="https://bla123.neocities.org/mp/friday.html" />
<meta property="og:description" content="Photo Album">
<meta property="og:image" itemprop="image" content="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG"/>
<meta property="og:type" content="article" />
<meta property="og:locale" content="en_GB" />
在<body>标签中:
<link itemprop="thumbnailUrl" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">
</span>
这8个标签(6个在头部,2个在身体)工作得很好。
小贴士:
1.使用准确的图像位置URL,而不是目录格式,即不要使用images/OG_thumb.jpg
2.区分大小写的文件扩展名:如果你的主机提供商上的图像扩展名是“。jpg”,那么不要使用“。jpg”或“。jpeg”。我观察到,基于托管提供商和浏览器组合错误可能会发生,也可能不会发生,所以为了安全起见,它更容易匹配文件扩展名的情况。
3.在完成以上步骤后,如果缩略图预览仍然没有显示在WhatsApp消息中,那么:
a.强制停止手机应用(我在安卓系统下尝试过),再试一次
b.使用在线工具预览OG标签,例如我使用的:https://searchenginereports.net/open-graph-checker
c.在移动浏览器中,将“直接链接”粘贴到OG拇指上,并刷新浏览器4-5次。比如https://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG
因为在这一点上,这个问题几乎是一个支持小组,为那些因各种原因而遭受WhatsApp不加载图像预览的人提供支持,下面是我的情况的根本原因,希望它最终能帮助到一些人:
确保元标记og:image内容链接使用HTTPS
当我通过https使我的网站可用时,我忘记了具体地将元标签从http更改为https。除了WhatsApp,其他所有社交媒体预览版都对这张照片进行了处理。
简单地让它https固定它为我。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击