为WhatsApp链接共享提供一个图像

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

当前回答

额外的有用信息:

你可以提供几个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/

2020-04-07 11:27:46

其他回答

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

2017-06-07 18:08:22

如果你想在某人在WhatsApp上分享的你网站的url旁边放一张照片，你必须在url链接的页面上放一个元标签，就像这样:

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

2013-11-04 22:36:46

你需要以下标签来获得WhatsApp图像预览:

<meta property="og:title" content="Website name" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://url.com/" />
<meta property="og:description" content="Website description" />
<meta property="og:image" content="image.png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="600" />

正如Facebook文档所说，如果你指定了og:image大小，它将被快速获取，而不是异步获取。

图片格式建议为PNG。推荐至少600x600像素。

2019-08-02 00:45:54

在看了很多答案，但无法解决这个问题后，我终于在多次迭代后让它工作了。这是我使用的确切代码:

在<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

2020-10-30 02:57:03

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

这样做，你会做得很好!

2016-04-03 16:50:02

为WhatsApp链接共享提供一个图像

推荐文章

最新文章

标签