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


当前回答

在一个bug中工作后,发现在IOS中,HEAD中的元素可能会阻止WhatsApp搜索og:image /og:description / name=description。所以首先试着把它们放在其他事情的上面。

这行不通

<head>
    <div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>

    <meta property="og:description" content="description" />
    <meta property="og:image" content="http://cdn.some.com/random.jpg" />
</head>

这项工作:

    <head>
        <meta property="og:description" content="description" />
        <meta property="og:image" content="http://cdn.some.com/random.jpg" />

        <div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
    </head>

其他回答

我在这里记录了完美的详细解决方案- https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html 要获得完美的预览效果,有七个步骤。

标题:添加关键字丰富标题到你的网页,最多65个 字符。 元描述:描述你的网页,最多155个字 字符。 og:title:最多35个字符。 og:url:到您网页地址的完整链接。 og:description:最大65个字符。 og:image:最小小于300KB的图片(JPG或PNG) 尺寸建议为300 × 200像素。 favicon:尺寸为32 × 32像素的小图标。

在上面的页面中,您有所需的规格、字符限制和示例标记。如果你觉得满意,就给它点赞。

我自己也一直在尝试这样做,我已经添加了所有正确的元标签:

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

希望这对其他人有所帮助。

我想在这个帖子中添加一个答案,特别提到上面的线程中哪些帮助我解决了问题,以及它们可以遵循的顺序,以正确理解根本原因并一劳永逸地解决它:

当我在社交媒体上分享这个解决方案的链接时,我能够得到丰富的预览。

我在这篇文章中遵循了各种选项,下面是最接近正确答案的选项,它们都有助于最终结果:

需要的标签(主标签要聚焦- og:image) 图像参数 一定会有帮助的工具 如何正确给出图像路径 根本原因及解决方法

这将有望为人们节省滚动并找到正确答案所需的时间,以及所有试验和错误所需的努力。

我想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图像预览:

<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像素。