当我们分享这样的链接时,我们如何在我们的网站中包括一张图片来显示在WhatsApp上?
当前回答
如果有人正在寻找一种方式显示预览使用WhatsApp API,包括在你的网站上的元标签的图像,你需要设置preview_url=true。
在文本消息中发送url
默认情况下,移动WhatsApp应用程序可以识别url并使其可点击。要包含URL预览,请在消息体中包含"preview_url": true,并确保URL以http://或https://.开头需要主机名,IP地址不匹配。
大多数情况下,当你发送一个URL时,无论是否带有预览,消息的接收者都会看到一个他们可以点击的URL。
URL预览只会在以下情况之一发生后才会被渲染:
业务已经向用户发送了一个消息模板。 用户通过“点击聊天”链接开始对话。 用户将业务电话号码添加到他们的地址簿和 发起对话。
其他回答
以下行动对我的情况有所帮助。
将映像放在同一主机下。
<meta property="og:url" content="https://www.same-host.com/whatsapp-image.png" />
例如,通过前导子串检测用户代理,将所需图像传递给WhatsApp
WhatsApp/2.18.380 A
在真正按下发送按钮前等待几秒钟,以便WhatsApp有时间从og元数据中检索图像和描述。
额外的有用信息:
你可以提供几个og:图片,whatsapp将使用最后一个。这将有助于解决例如facebook想要1.91:1的比例和whatsapp 1:1的问题
<meta property="og:image" content="https://www.link.com/facebook.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image" content="https://www.link.com/whatsapp.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />
https://roei.stream/2018/11/18/ideal-open-graph-image-size-for-whatsapp-link-share/
https://css-tricks.com/essential-meta-tags-social-media/
我也有同样的问题,在这里解决。
如果你添加meta og:image,它应该会显示出来
问题是,如果你不输入http://,以/结尾,whatsapp将不显示图像 例如,如果你输入http://google.com/而不是google.com,它会显示图像和描述
希望它能帮助到别人。
我尝试了这个线程下的几个建议,从我的外部搜索,但这对我来说是一个完全不同的问题。我使用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>
这样做,你会做得很好!
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素,而不占用文档流中的空间
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 在一个CSS宽度的小数点后的位置是尊重?
- 我怎么能选择一个特定的类的最后一个元素,而不是父里面的最后一个孩子?
- 反应:为什么当道具改变时子组件不更新
- 我怎么能检查html元素,从DOM消失失去焦点?
- 在Atom编辑器中是否有格式化HTML的命令?
- 把<script>标签放在</body>标签之后是错误的吗?
- 谷歌Chrome表单自动填充和它的黄色背景