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


当前回答

我也有同样的问题,问题是图片的大小。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上分享的你网站的url旁边放一张照片,你必须在url链接的页面上放一个元标签,就像这样:

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

我想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>

这样做,你会做得很好!

因为在这一点上,这个问题几乎是一个支持小组,为那些因各种原因而遭受WhatsApp不加载图像预览的人提供支持,下面是我的情况的根本原因,希望它最终能帮助到一些人:

确保元标记og:image内容链接使用HTTPS

当我通过https使我的网站可用时,我忘记了具体地将元标签从http更改为https。除了WhatsApp,其他所有社交媒体预览版都对这张照片进行了处理。

简单地让它https固定它为我。

我想提醒大家注意一个事实,简单的<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" />

(我本想把这句话作为评论,但现在还不允许这样做。版主可以随意移动这个,如果更合适的话。)