当我们分享这样的链接时,我们如何在我们的网站中包括一张图片来显示在WhatsApp上?
当前回答
我建议经常查看https://developers.facebook.com/tools/debug/sharing以验证您的属性为 Facebook经常改变它的政策、法规和API。
如果你使用Messenger机器人或其他FB应用程序,你可能需要FB:app_id属性来让链接图像在Whatsapp中工作。 更多信息请访问Facebook开发者网站。 https://developers.facebook.com/docs/sharing/webmasters
其他回答
我尝试了这个线程下的几个建议,从我的外部搜索,但这对我来说是一个完全不同的问题。我使用og:image标记所指示的图像的特定指令正在被Jetpack插件提供的open graph标记所覆盖。你可以在这里找到我的详细答案。然而,我认为有必要在这个更多人关注的帖子中简要地添加这些步骤。希望这能帮助到一些人。
Facebook共享调试器帮助我确定了根本原因,从那里,我遵循以下步骤:
Debug your website using the debugger above. Simply type in the URL and hit debug. This should give you a list of warnings and once you scroll down to the open graph tags sections, you will be able to see the values that are being fetched for your website. The one to focus on is the og:image tag. Scroll further down to the "See exactly what our scraper sees for your URL" link and search for the og:image tag to find the villain in your story. Now simply, opt the means to remove an override that is occurring. In my case, I found the following function helpful. It changes the default image used any time Jetpack can not determine an image to use.
它改变默认图像使用任何时候,Jetpack不能确定一个图像使用
function custom_jetpack_default_image() {
return 'YOUR_IMAGE_URL';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );
需要补充的是,建议图像参数最小为300px x 200px,大小< 300kb。如果这些一般的说明对你不起作用,请遵循这些说明,因为,那么你的问题很可能与我的问题相似。此外,有时最简单的解决方案可能只是删除插件(只要你验证你可以没有它)。
最后你应该能看到像这样的东西
希望这能有所帮助。
NS
我想whatsapp没有白名单,因为我找到了一个适合我的解决方案。请按照以下步骤操作。 插入3个元标签:
<meta property="og:image" content="http://yourimage_with_complete_URL.png"/>
<meta property="og:title" content="Your Title"/>
<meta property="og:description" content="Your description."/>
你的图片必须是。png格式,600x600px尺寸,并且必须命名为“logo-yoursite.png” (曾经它为我工作就像那样)
不要忘记在你的网站上插入whatsapp的链接:
<a href='whatsapp://send?text=Text to send withe message: http://www.yoursite.com'>whatsApp</a>
这样做,你会做得很好!
我自己也一直在尝试这样做,我已经添加了所有正确的元标签:
<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。
希望这对其他人有所帮助。
我想提醒大家注意一个事实,简单的<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" />
(我本想把这句话作为评论,但现在还不允许这样做。版主可以随意移动这个,如果更合适的话。)
在失去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
推荐文章
- 在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”属性