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

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

enter image description here

440905 次浏览
小开

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

<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>
小开
我猜whatsapp没有白名单，因为我找到了一个适合我的解决方案。请按照以下步骤操作。 插入3个meta标签:

<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不支持300KB以上的图片。

所以在Whatsapp上显示图像的最重要的属性是:

<meta property="og:image" content="url_image">

和所显示图像的大小必须小于300KB。

如果问题仍然存在，还可以读取类似的问题的答案

小开

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

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

问题是如果你不输入http://，以/结尾，whatsapp将不显示图像 例如，如果你输入http://google.com/而不是google.com

，它会显示图像和描述

希望它能帮助到别人。

小开

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

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

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

小开

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

标题:添加关键字丰富标题到你的网页，最多65个 字符。< / p >

元描述:描述你的网页，最多155个字符 字符。< / p >

og:title:最多35个字符。

og:url:到您网页地址的完整链接。

og:description:最大65个字符。

og:image:小于300KB且最小的图片(JPG或PNG) 建议尺寸为300 * 200像素

favicon:尺寸为32 × 32像素的小图标。

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

小开
最佳答案

2020标准

只需几个步骤，就能完美预览WhatsApp、Twitter、Facebook以及pc和移动设备上的书签图标。如果你喜欢阅读，请去Open Graph (ogp.me) -但一定要阅读这个答案中的步骤1 - 6，以获得最好的WhatsApp预览。

不同公司的许多技术审计结果显示拥有Open Graph标签不会帮助你获得更好的SEO排名，他们只针对社交媒体。schema.org的数据结构将帮助你进行SEO。

这些Open Graph <meta>标记位于<head>标记中。

请注意: @jaimish11提到一些应用程序或网站使用缓存，甚至存储网站预览在他们的数据库。这意味着当你在WhatsApp或Facebook上测试你的链接时，你很可能不会马上看到任何区别。使用另一个链接(另一个页面)可以达到目的。但是只要你使用了该链接一次，这个“请note"节就会重新开始。

第一步:标题

不超过65个字符

<title>your keyword rich title of the website and/or webpage</title>

步骤2:描述

不超过155个字符

<meta name="description" content="description of your website/webpage, make sure you use keywords!" />

步骤3:og:title

最多35个字符

<meta property="og:title" content="short title of your website/webpage" />

步骤4:og:url

完整链接到当前网页地址

<meta property="og:url" content="https://www.example.com/webpage/" />

步骤5:og:description

最多65个字符

<meta property="og:description" content="description of your website/webpage" />

步骤6:og:image

图像(JPG或PNG)，大小小于300KB，最小尺寸为300 x 200 ＊。该映像应该通过HTTPS连接提供，该连接具有有效的非自签名证书

<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png" />

<一口> * < /一口> @RichDeBourke向我提到了这一点，但显然WhatsApp已经增加了其最大图像大小(尺寸以及文件大小)。我做了一些测试:它并不是每次在每个设备上都能始终如一地工作。我测试了2个。x Mb的图像，即使这样似乎也能工作9/10次。300KB是最安全的方法，但截至18-02-2020，您应该可以使用更大的图像。不过，我建议将文件大小保持在2MB以下。并且如果你还没有使用TinyPNG或任何其他图像压缩算法，肯定会将你的图像抛出。

<一口>** @Indraraj提到，如果您的网站运行在https上，并使用自签名证书，则图像可能不会显示。


如果你完成了上面的步骤，你现在可以在WhatsApp中看到你的预览!但是，要注意上面的“请note"部分。


步骤7:og:type

为了在图中表示对象，您需要指定它的类型。下面是可用的全局类型列表:http://ogp.me/#types。您还可以指定自己的类型。

<meta property="og:type" content="article" />

步骤8:og:locale

资源的区域设置。如果有其他可用的语言翻译，也可以使用og:locale:alternate。

如果你不指定og:locale，它默认为en_US。

<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />

第九步:推特

要获得最好的Twitter支持，请阅读这。

10 . Facebook

要获得最好的Facebook支持，请阅读这。

步骤11:favicon

要获得对所有浏览器和设备的最佳favicon支持，请阅读这。

额外步骤12:视频/音频

也可以共享音频/视频。例如，Facebook和Twitter就很好地分享视频。读ogp.me。当然，WhatsApp也有这样的选择:当你分享Instagram或Youtube链接时，WhatsApp的预览会与应用程序内的视频播放器一起提供。

超级奖励第13步:产品、人物、电影等。

这类信息实际上取决于提供商(Facebook，谷歌)。我不知道什么时候，但WhatsApp和Twitter 可以启用了对产品的支持。这样，与你分享链接的人可能会在共享链接的“widget”中看到价格、平均评论分数。那太好了。对于在WhatsApp business应用程序中更新目录的企业帐户，这已经存在，但这与链接共享完全不同。

小开

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

小开

在处理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://developers.facebook.com/tools/debug/sharing来验证你的属性为 Facebook经常改变它的政策、遵从性和API 如果你使用Messenger机器人或其他FB应用程序，你可能需要属性FB:app_id来让链接图像在Whatsapp中工作。 更多信息请访问Facebook开发者网站。 https://developers.facebook.com/docs/sharing/webmasters < / p >
小开

以下行动对我的情况有所帮助。

将image放在同一主机。

<meta property="og:url" content="https://www.same-host.com/whatsapp-image.png" />

通过前导子字符串例子检测用户代理，将所需的图像传递给WhatsApp

WhatsApp/2.18.380 A

等几秒钟在实际按下发送按钮之前，所以WhatsApp将有时间从og元数据中检索图像和描述。

小开
即使在这些尝试之后。我的网站图片有时会被取走，有时不会。 在使用https://developers.facebook.com/tools/debug/sharing后

意识到我的django (python)框架是渲染图像路径相对。我必须用完整的url更改图像的路径。(包括http://)。然后它开始工作了

小开

你需要以下标签来获得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:图像大小，它将被快速获取，而不是异步获取。

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

小开
我想提请注意的事实是，一个简单的<meta property="og:image" content="image.png" />，正如上面某处所建议的，不适合我(这实际上让我在一个循环现在几个星期)。工作的是一个绝对URL:
<meta property="og:image" content="https://domainname.com/image.png" /> < / p >

或以斜杠开头(如果图像在根目录中):
<meta property="og:image" content="/image.png" /> < / p >

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

小开

额外的有用信息:

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

< a href = " https://roei。流/ 2018/11/18 / ideal-open-graph-image-size-for-whatsapp-link-share / noreferrer“rel = > https://roei.stream/2018/11/18/ideal-open-graph-image-size-for-whatsapp-link-share/ < / >

https://css-tricks.com/essential-meta-tags-social-media/

小开

我尝试了这个线程下的几个建议，从我的外部搜索，但这对我来说是一个完全不同的问题。我使用og:形象标记指示的图像的特定指令正在被Jetpack插件提供的打开图形标记所覆盖。你可以找到我的详细答案在这里。然而，我认为有必要在这个更多人关注的帖子中简要地添加这些步骤。希望这能帮助到一些人。

Facebook共享调试器帮助我确定根本原因，从那里，我遵循这些步骤:

    使用上面的调试器调试你的网站。输入 URL并点击调试。这应该给你一个警告列表和 一旦向下滚动到打开的图形标记部分，您就会 能够看到你的网站正在获取的值。的 一个需要关注的是og:形象标记
  1. 进一步向下滚动到"看看我们的刮刀看到了什么 链接，然后搜索og:形象标签来找到
  2. 现在，简单地选择移除正在发生的覆盖的方法。 在我的例子中，我发现下面的函数很有用。它改变了 默认图像使用任何时候Jetpack都不能确定一个图像来 李使用。< / >

它改变默认图像使用任何时候，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。如果这些一般的说明对你不起作用，请遵循这些说明，因为，那么你的问题很可能与我的问题相似。此外，有时最简单的解决方案可能只是删除插件(只要你验证你可以没有它)。

在最后，你应该能够看到类似于- enter image description here的东西

希望这能有所帮助。

NS

小开

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

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

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

  1. 需要的标签(关注的主标签- og:image)
  2. 图像参数 .
  3. 一定会有帮助的工具
  4. 如何正确给出图像路径
  5. 根本原因及解决办法 .

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

小开

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

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

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

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

小开

在我们的例子中，问题是og:image URL不包括文件扩展名(.jpg)。我们正在使用Cloudinary，在它们的情况下，图像url中的文件扩展名是不需要的。

一旦我们将.jpg添加到图像URL中，图像就开始显示在Whatsapp预览中。

小开

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

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

小开

在失去4个小时后，在这个话题上发表我的意见。

我正在编写一个vue应用程序，它是用webpack编译的。 默认情况下，Webpack缩小了HTML，就像屠夫一样。它从许多属性中删除双引号 Whatsapp讨厌这个! 它只是跳过属性值周围的引号格式不正确的字段

关闭索引的最小化，一切都会好起来的!

下面是如何使用Vue-CLI在vue.config.js文件中添加这个:

    module.exports = {
chainWebpack: config => {
config.plugin('html')
.tap(args => {
args[0].minify = false
return args
})
}

from: https://github.com/vuejs/vue-cli/issues/4328#issuecomment-595682922

小开

如果有人正在寻找一种方式显示预览使用WhatsApp API，包括在你的网站上的元标签的图像，你需要设置preview_url = true。

在文本消息中发送url

默认情况下，移动WhatsApp应用程序可以识别url并使其可点击。要包含URL预览，请在消息正文中包含&;preview_url&;: true，并确保URL以http://或https://.开头需要主机名，IP地址不匹配。

大多数情况下，当你发送一个URL时，无论是否带有预览，消息的接收者都会看到一个他们可以点击的URL。

URL预览只会在以下情况之一发生后才会被渲染:

  • 业务已经向用户发送了一个消息模板。
  • 用户通过“点击聊天”开始对话。链接。
  • 用户将业务电话号码添加到他们的地址簿和
    • .开始对话

提交答案