为 WhatsApp 链接分享提供图片

Posted 2023-02-21

技术标签:

【中文标题】为 WhatsApp 链接分享提供图片【英文标题】：Provide an image for WhatsApp link sharing 【发布时间】：2013-11-15 17:09:30 【问题描述】：

当我们分享这样的链接时，我们如何在我们的网站中包含一张图片以显示在 WhatsApp 中？

【问题讨论】：

你可以在iframely.com/embed上测试你的页面的dom 测试 Facebook 的渲染方式：developers.facebook.com/tools/debug 【参考方案1】：

2020 年标准

只需几个步骤即可获得 WhatsApp、Twitter、Facebook 和个人电脑和移动设备的书签图标的完美预览。如果您喜欢阅读，请转到Open Graph (ogp.me) - 但请务必阅读此答案中的步骤 1 - 6，以获得最佳 WhatsApp 预览。

不同公司的许多技术审计结果表明拥有 Open Graph 标签不会帮助您获得更好的 SEO 排名，它们仅适用于社交媒体。 schema.org 的数据结构将帮助您进行 SEO。

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

请注意： @jaimish11 提到一些应用程序或网站使用缓存，甚至将网站预览存储在其数据库中。这意味着，例如，当您在 WhatsApp 或 Facebook 中测试您的链接时，您很可能不会立即看到任何差异。使用另一个链接（另一个页面）就可以了。但是，一旦您使用该链接一次，这个“请注意”部分就会重新开始。

第 1 步：标题

最多 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

大小小于 300KB 且最小尺寸为 300 x 200 ^* 的图像（JPG 或 PNG）。此图像应通过具有有效非自签名证书的 HTTPS 连接提供。^**

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

^* @RichDeBourke 向我提到了这一点，但显然 WhatsApp 增加了它的最大图像大小（尺寸和文件大小）。我做了一些测试：它并非每次在每台设备上都能始终如一地工作。我测试了 2.x Mb 图像，即使这样似乎也能工作 9/10 次。 TinyPNG 或任何其他图像压缩算法，请务必使用您的图像。

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

如果您完成了上述步骤，您现在可以在 WhatsApp 中看到您的预览！但是，请注意上面的“请注意”部分。

第 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" />

第 9 步：推特

如需获得最佳 Twitter 支持，请阅读 this。

第 10 步：Facebook

如需获得最佳 Facebook 支持，请阅读 this。

第 11 步：网站图标

要获得对所有浏览器和设备的最佳网站图标支持，请阅读this。

额外第 12 步：视频/音频

还可以共享音频/视频。例如，Facebook 和 Twitter 可以很好地共享视频。阅读ogp.me。当然 WhatsApp 也有这个选项：当您分享 Instagram 或 Youtube 链接时，WhatsApp 预览会附带应用内视频播放器。

超级红利第13步：产品、人物、电影等

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

【讨论】：

请注意，如果您的网站使用自签名证书在 https 上运行，它可能无法正常工作。在 Facebook 和 whatsapp 上验证 @Indraraj 感谢分享，这也可以在 Facebook 开发者文档 中找到我把上面所有的标签都放了。但仍然没有显示图片 @DerkJanSpeelman 现在工作正常。谢谢。我忘记将图像尺寸保持为 300*200。您可以通过在共享或粘贴 URL 时更改 URL 来解决缓存问题。例如，如果您的 URL 是 test.com，您可以将其更改为 test.com?cache。您可以从字面上添加任何内容到 URL，等待几秒钟，假设您的所有元标记都以正确的格式应用，更新的文本将显示出来。这对我有用。但我认为有机地改变需要大约 24 小时。【参考方案2】：

我有同样的问题，问题是图片的大小。 Whatsapp 不支持大于 300KB 的图片。

因此，在 Whatsapp 上显示图像最重要的属性是：

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

并且要显示的图片大小必须小于 300KB。

如果问题仍然存在，请阅读this similar question 的答案

【讨论】：

+1 表示大小限制信息，但不正确。 Whatsapp 应用获取前 300.000 个字节（Http 标头：“范围：字节 = 0-299999”）人们如何知道 300.000 字节或 300kB（小 k）的大小限制？我在互联网上搜索了一个来源，但在 WhatsApp 网站或 Open Graph Protocol 网站 ogp.me 上找不到这个大小限制。 url_image 需要 https 服务【参考方案3】：

我想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 格式，尺寸为 600x600 像素，并且必须命名为“logo-yoursite.png” （一旦它对我有用，就像那样）

不要忘记在您的网站中插入 whatsapp 的链接：

<a href='whatsapp://send?text=Text to send withe message: http://www.yoursite.com'>whatsApp</a>

这样做，你会做得很好！

【讨论】：

图片不显示给我，你有其他解决方案吗？大图也可以！在the answer 的@Cedriga 中说图像不能大于300kb，他是对的。绝对不是名字。我可以确认 JPG 有效。 whatsapp 的链接不是我们缺少的，我相信，是的，正如@workwise 所说，PNG 和 JPG 都可以。不错！非常感谢！【参考方案4】：

我在这里记录了完美的详细解决方案 - 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 x 200 像素。

favicon ：尺寸为 32 x 32 像素的小图标。

在上面的页面中，您有所需的规格、字符限制和示例标签。觉得满意就点个赞吧。

【讨论】：

我正在寻找的完美答案这是非常imp：og:image : Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised. 这些参数至关重要，我认为重点应该放在 og:image 标签上。建议使用 300 KB 大小限制和最小 300px x 200px。请记住，尺寸以像素为单位。【参考方案5】：

我想提请注意一个简单的<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" />

（我会将此作为评论添加，但目前还不允许。如果更合适，版主可以随意移动它。）

【讨论】：

我认为最好给出合格的路径，而不是诉诸相对路径。您回答中的建议对我有用。我认为您需要使用 .jpg 图片，.png 图片无法与 whatsapp 一起使用。【参考方案6】：

其他有用信息：

您可以提供多个 og:images，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/

【讨论】：

【参考方案7】：

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

在<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 消息中，则：

一个。强制停止移动应用（我在 android 中尝试过）并重试

b.使用在线工具预览OG标签例如：https://searchenginereports.net/open-graph-checker

c。在移动浏览器中粘贴直接链接到 OG 拇指并刷新浏览器 4-5 次。例如https://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG

【讨论】：

赞成您最后提供的链接。他们帮助我了解需要重置的是 WhatsApp 缓存。【参考方案8】：

我自己也一直在尝试这样做，并且添加了所有正确的元标记：

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

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

【讨论】：

对我来说工作得很好......谢谢！【参考方案9】：

在一个 bugg 中工作后，发现在 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>

【讨论】：

我的 2 美分，我希望这对某人有所帮助。就我而言，twitter:image 为空，从而使 WhatsApp 无法获取og:image。尝试删除其他<meta> 标签有助于调试社交分享功能。我猜 whatsapp 正在读到底，并在发现意外的东西后停止（div，空的 twitter:image）。这里的想法是告诉人们将元 og:image 放在顶部，并确保它被阅读为什么要在部分放置一个？我在一家公司工作，该公司通过出色的用户体验、搜索引擎优化等来抓取和“重塑”您的内容网络。如果您从客户端抓取头部并仅添加 og: 元数据，则它不起作用.我喜欢对whatsapp如何处理HTML进行心理逆向工程，不再做任何调试yala yala yala！我们如何使用意图发送这个？【参考方案10】：

我建议您始终查看https://developers.facebook.com/tools/debug/sharing 以验证您的属性为 Facebook 经常更改其政策、合规性和 API。

如果您使用 Messenger 机器人或其他 FB 应用程序，您可能需要属性 fb:app_id 才能在 Whatsapp 中使用链接图像。更多信息请访问 Facebook 开发者网站管理员网站。 https://developers.facebook.com/docs/sharing/webmasters

【讨论】：

很多人在 Wordpress 中使用 Yoast SEO。仅当您在每个帖子的 Yoast SEO 选项卡中添加 Facebook 图像时，它才会在帖子上添加 og:image。【参考方案11】：

我遇到了同样的问题，这里来解决。

如果添加 meta og:image 应该会显示

问题是，如果您在没有 http:// 的情况下键入并以 / 结尾，whatsapp 将不会显示图像例如，如果您键入 http://google.com/ 但不使用 google.com，它会显示图像和说明

希望对某人有所帮助。

【讨论】：

【参考方案12】：

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

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

我在此线程中遵循了各种选项，以下是最接近正确答案的选项，它们都对最终结果做出了贡献：

Tags required（要关注的主要标签 - og:image） Image parameters Tool that will definitely help How to correctly give the image path Root cause and solution

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

【讨论】：

【参考方案13】：

我在这个帖子下和我的外部搜索中尝试了几个建议，但这对我来说完全是另一个问题。我使用 og:image 标记指示的图像的具体说明被 Jetpack 插件提供的开放图形标记覆盖。你可以找到我的详细答案here。但是，我认为值得在这个更受关注的线程上简要添加步骤。希望这对某人有所帮助。

Facebook Sharing Debugger 帮助我确定了根本原因，然后我按照以下步骤操作：

只需输入 URL 并点击调试。

og:image

“查看我们的刮板所看到的确切内容您的 URL"

og:image

它会在 Jetpack 无法确定要使用的图像时更改使用的默认图像

function custom_jetpack_default_image() 
    return 'YOUR_IMAGE_URL';

add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );

我应该补充一点，建议使用最小 300px x 200px 和 size

最后你应该能够看到类似 -

希望这会有所帮助。

【讨论】：

【参考方案14】：

您需要以下标签才能获得 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 docs 所说，如果您指定 og:image 大小，它将被快速获取而不是异步获取。

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

【讨论】：

就我而言，我有 1200*628 像素的图像，这意味着我必须提供像 <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="628" /> 这样的图像，对吗？我们是否需要在标签中给出图像（该图像具有）的宽度和高度，或者如果我们在元标签中提到宽度和高度，它将以该尺寸显示？请澄清@moreirapontocom【参考方案15】：

由于此时此问题几乎是针对因各种原因而遭受 WhatsApp 无法加载图像预览的人们的支持小组，这就是我的案例的根本原因，希望它最终可以帮助某人：

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

当我通过https 提供我的网站时，我忘记将元标记从http 专门更改为https。除了 WhatsApp，其他所有社交媒体预览都处理了该图像。

只需让它 https 为我修复它。

【讨论】：

【参考方案16】：

在失去 4 小时后在这个主题上加我 2 美分。

我正在编写一个使用 webpack 编译的 vue 应用程序。默认情况下，Webpack 会缩小 HTML，就像屠夫一样。它从许多属性中删除了双引号。

Whatsapp 讨厌这样！它只是跳过格式不正确的字段，并在属性值周围加上引号。

关闭索引的缩小，一切都会好起来的！

这是使用 Vue-CLI 的方法，将其添加到 vue.config.js 文件中：

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

来自：https://github.com/vuejs/vue-cli/issues/4328#issuecomment-595682922

【讨论】：

【参考方案17】：

如果您想在某人在 WhatsApp 上分享的您网站的网址旁边放一张图片，您必须在该网址链接到的页面上放置一个元标记，如下所示：

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

【讨论】：

嗨！我已经尝试过了，并且可以与 Facebook 的 URL 调试器完美配合，但是 whatsapp 消息仍然没有显示我的缩略图。这是其他人，也有同样的问题：***.com/questions/25100917/… @AkhilSekharan 可以在这里找到正确答案：***.com/a/32154775/501206 谢谢史蒂夫。我已经尝试过这种方式，并得出结论，WhatsApp 有一个可以显示缩略图的域的内部白名单。例如 youtube 我得出了同样的结论...FB调试器：100% ok。丰富的预览：100% ok（包括 Watsapp）。当我尝试通过 WhatsApp 分享时，图像不显示。我的网址是 robots.es ...一年后没有回应？图片没有显示给我，任何人都可以有解决方案@Juanjo【参考方案18】：

有同样的问题，添加了 og:image 并且当 url 以斜线符号 (/) 结尾时它不起作用。从 URL 中删除斜线后 - 图像被加载.. 有趣的错误...

【讨论】：

【参考方案19】：

以下操作对我有帮助。

将图片放在同一主机下。

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

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

WhatsApp/2.18.380 A

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

【讨论】：

如果我输入 URL 并等待一段时间，那么它将在之后获得预览如果我点击发送按钮然后它会显示，如果我输入 URL 并点击发送按钮 没有任何延迟（在获取元标记信息之前）然后预览不显示。【参考方案20】：

即使经过这些尝试。我的网站图片有时会被获取，有时不会。用https://developers.facebook.com/tools/debug/sharing验证后

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

【讨论】：

【参考方案21】：

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

我们将.jpg 添加到图片 URL 后，图片开始显示在 Whatsapp 预览中。

【讨论】：

【参考方案22】：

如果有人正在寻找一种使用 WhatsApp API 显示预览的方法，通过将图像包含在您网站的元标记中，您需要设置 preview_url=true。

在短信中发送 URL

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

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

只有在发生以下任一情况后才会呈现 URL 预览：

商家已向用户发送消息模板。用户使用“点击聊天”链接发起对话。用户将公司电话号码添加到他们的通讯录中，然后发起对话。

【讨论】：

以上是关于为 WhatsApp 链接分享提供图片的主要内容，如果未能解决你的问题，请参考以下文章

Flutter MethodChannel 直接分享到 Whatsapp

图片的 WhatsApp HTML 分享链接

使用Jsoup解决网页中图片链接问题

如何使用 WhatsApp Api 从企业向客户发送消息 [关闭]

Whatsapp 分享链接在 Safari 中不起作用

我想从我的 android 应用程序分享到 whatsapp 的链接 [重复]

为 WhatsApp 链接分享提供图片

2020 年标准

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

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