html - 为 WhatsApp 链接分享提供图片

Question

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

score 538 · Accepted Answer

2020年标准

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

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

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

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

第一步：标题

最多 65 个字符

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

第二步：描述

最多 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:描述

最多 65 个字符

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

第 6 步：og:图像

尺寸小于 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 次。<300KB 是最安全的方法，但截至 2020 年 2 月 18 日，您应该可以使用较大的图像。不过，我建议将文件大小保持在 2MB 以下。如果您还没有使用TinyPNG或任何其他图像压缩算法，请务必使用您的图像

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

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

第 7 步：og:类型

为了让您的对象在图中表示，您需要指定其类型。以下是可用的全局类型列表：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 支持，请阅读此内容。

第 10 步：脸书

为了获得最好的 Facebook 支持，请阅读此内容。

第 11 步：网站图标

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

奖励步骤 12：视频/音频

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

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

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

score 25 · Accepted Answer

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

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

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

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

如果问题仍然存在，请阅读此类似问题的答案

score 13 · Accepted Answer

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

这样做，你会做得很好！

score 11 · Accepted Answer

我在这里记录了完美的详细解决方案 - 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 且最小尺寸为 300 x 200 像素的图像（JPG 或 PNG）。

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

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

score 9 · Accepted Answer

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

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

score 8 · Accepted Answer

其他有用信息：

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

score 6 · Accepted Answer

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

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

score 5 · Accepted Answer

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

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

希望这对其他人有帮助。

score 4 · Accepted Answer

在一个 bugg 中工作后，发现在 IOS中，HEAD 中的元素可能会停止 og:image /og:description / name=description 的 WhatsApp 搜索。因此，首先尝试将它们放在其他一切之上。

这不起作用

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

score 4 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

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

希望它可以帮助某人。

score 2 · Accepted Answer

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

Facebook 共享调试器帮助我确定了根本原因，然后我按照以下步骤操作：

使用上面的调试器调试您的网站。只需输入 URL 并点击调试。这应该会给您一个警告列表，一旦您向下滚动到打开的图形标签部分，您将能够看到正在为您的网站获取的值。需要关注的是og:image标签。
进一步向下滚动到“查看我们的抓取工具对您的 URL 看到的确切内容”链接并搜索og:image标签以找到您故事中的恶棍。
现在简单地说，选择删除正在发生的覆盖的方法。就我而言，我发现以下功能很有帮助。每当 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 和 size < 300 KB 等图像参数。如果此类一般说明对您不起作用，请按照这些说明进行操作，因为您的问题很可能与我的问题相似。此外，有时最简单的解决方案可能只是删除插件（前提是您确认可以不使用它）。

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

希望这可以帮助。

NS

score 2 · Accepted Answer

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

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

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

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

score 1 · Accepted Answer

您需要以下标签才能获得 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 像素。

score 1 · Accepted Answer

由于在这一点上，这个问题几乎是为那些因各种原因而遭受 WhatsApp 无法加载图像预览的人们提供的支持小组，这就是我的案例的根本原因，希望它最终可以帮助某人：

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

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

只需https让它为我修复它。

score 1 · Accepted Answer

输掉 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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

以下行动对我有帮助。

将图像放在同一主机下。

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

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

WhatsApp/2.18.380 A

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

在短信中发送 URL

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

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

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

商家已向用户发送消息模板。
用户使用“点击聊天”链接发起对话。
用户将公司电话号码添加到他们的地址簿并发起对话。

score 0 · Accepted Answer

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

一旦我们添加.jpg到图片 URL，图片就开始出现在 Whatsapp 预览中。

html - 为 WhatsApp 链接分享提供图片

22 回答 22

2020年标准

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

Related

Reference

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