当我们分享这样的链接时,我们如何在我们的网站中包括一张图片来显示在WhatsApp上?


当前回答

我也有同样的问题,在这里解决。

如果你添加meta og:image,它应该会显示出来

问题是,如果你不输入http://,以/结尾,whatsapp将不显示图像 例如,如果你输入http://google.com/而不是google.com,它会显示图像和描述

希望它能帮助到别人。

其他回答

有同样的问题,添加了og:image,当url以斜杠(/)结束时,它不能工作。从URL中删除斜杠后-图像被加载..有趣的错误……

额外的有用信息:

你可以提供几个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上分享的你网站的url旁边放一张照片,你必须在url链接的页面上放一个元标签,就像这样:

<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>