为WhatsApp链接共享提供图像

时间：2013-11-04 22:36:46

标签： html meta-tags whatsapp open-graph-protocol

当我们分享这样的链接时，我们如何在我们的网站中添加图像以显示在WhatsApp中？

enter image description here

22 个答案:

答案 0 :(得分：201)

2019年标准

需要几个步骤才能获得适用于PC和移动设备的WhatsApp，Twitter，Facebook和书签图标的完美预览。如果您喜欢阅读，请转到ogp.me - 但请务必阅读此答案中的步骤1 - 6以获得最佳WhatsApp预览。

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

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

第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

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

第10步：Facebook

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

第11步：favicon

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

加分第12步：视频/音频

也可以共享音频/视频。例如，Facebook和Twitter分享视频非常好。阅读ogp.me。

答案 1 :(得分：13)

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

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

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

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

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

的答案

答案 2 :(得分：11)

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

这样做，你会做得很好！

答案 3 :(得分：9)

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

（我会将此添加为评论，但目前还不允许。主持人可以根据需要随意移动此内容。）

答案 4 :(得分：5)

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

在上面的页面中，您有所需的规格，字符数限制和样本标签。一旦你觉得它满意就做upvote。

答案 5 :(得分：3)

我也一直在努力做到这一点，并且我添加了所有正确的元标记：

<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也对图像和网址信息进行了某种缓存，不知道有多长时间。

要检查我是否插入了正确的代码，我只是尝试了不同的网址，例如：http://domain.com而不是http://www.domain.com。

希望这对其他人有帮助。

答案 6 :(得分：3)

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

答案 7 :(得分：3)

其他有用的信息：

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

答案 8 :(得分：2)

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

如果您使用Messenger机器人或其他FB应用程序，则可能需要属性fb：app_id才能使链接图像在Whatsapp中工作。 Facebook开发人员网站管理员网站上的更多内容。 https://developers.facebook.com/docs/sharing/webmasters

答案 9 :(得分：2)

我想对此线程添加一个答案，以特别提及上述哪个线程帮助我解决了问题，以及按照它们的顺序可以正确理解根本原因并一劳永逸地解决该问题： / p>

我可以使用this解决方案在社交媒体上共享链接的同时，获得丰富的预览。

我在该线程中遵循了各种选项，以下是最接近正确答案的选项，它们全都有助于最终结果：

  1. Tags required（要关注的主要标签-og：image）
  2. Image parameters
  3. Tool that will definitely help
  4. How to correctly give the image path
  5. Root cause and solution

这有望为某人节省滚动浏览和查找正确答案的时间以及所有尝试和错误所需的工作。

答案 10 :(得分：2)

我在该线程下以及通过外部搜索尝试了一些建议，但这对我来说是另外一个问题。我使用 og：image 标签指示的图像的特定说明被Jetpack插件提供的开放图形标签覆盖。您可以找到我的详细答案here。但是，我认为值得在此后续主题中简要介绍步骤。希望这对某人有帮助。

Facebook Sharing Debugger帮助我确定了根本原因，并从那里开始执行以下步骤：

  1. 使用上面的调试器调试您的网站。 只需输入 URL，然后点击debug。。这应该为您提供警告列表和 向下滚动到打开的图形标签部分，您将 能够查看为您的网站获取的值。的 重点关注的是 og：image 标签。
  2. 向下滚动到”“确切地查看我们的刮板看到的内容 您的网址” 链接，然后搜索 og：image 标记以找到 您故事中的反派。
  3. 现在，简单地选择删除发生的覆盖的方法。 就我而言，我发现以下功能很有帮助。它改变了 任何时候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和尺寸<300 KB。如果这些一般说明对您不起作用，请按照这些说明进行操作，因为那样的话，您的问题很可能类似于我的问题。另外，有时最简单的解决方案可能只是删除插件（前提是您确认没有插件就可以这样做）。

最后，您应该可以看到类似-enter image description here

希望这会有所帮助。

NS

答案 11 :(得分：2)

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

如果添加meta og：image

，则应该显示

问题是whatsapp如果你没有http：//键入并以/结尾，则不会显示图像 例如，如果您输入http://google.com/但不显示google.com

，则会显示图片和说明

希望它有所帮助。

答案 12 :(得分：1)

您需要以下标签来获取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像素。

答案 13 :(得分：0)

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。使用确切的图片位置网址代替目录格式，即，不要使用images / OG_thumb.jpg

2。区分大小写的文件扩展名：如果您的托管服务提供商上的图像扩展名是“ .JPG”，则不要使用“ .jpg”或“ .jpeg”。我观察到基于托管服务提供商和浏览器组合的错误可能或可能不会发生，因此，为了安全起见，更容易匹配文件扩展名的大小写。

3。完成上述步骤后，如果缩略图预览仍未显示在WhatsApp消息中，则：

a。强制停止移动应用（我曾在Android中尝试过），然后重试

b。使用在线工具预览OG标签，例如，我曾经使用过https://searchenginereports.net/open-graph-checker

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

答案 14 :(得分：0)

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

答案 15 :(得分：0)

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

在短信中发送网址

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

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

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

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

答案 16 :(得分：0)

如果您想在WhatsApp上分享的网站网址旁边有一张图片，您必须在网址链接的网页上添加元标记，如下所示：

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

答案 17 :(得分：0)

在我们的案例中，问题是og:image URL不包含文件扩展名（.jpg）。我们正在使用Cloudinary，在这种情况下，不需要图像URL中的文件扩展名。

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

答案 18 :(得分：0)

由于在这一点上，这个问题几乎是针对那些因各种原因而苦苦支持WhatsApp无法加载图像预览的人的支持小组，因此，这就是我的案例的根本原因，希望它最终可以对某人有所帮助：< / p>

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

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

只需https即可为我修复。

答案 19 :(得分：0)

即使经过这些尝试。我的网站图像有时被获取。 使用https://developers.facebook.com/tools/debug/sharing

验证后

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

答案 20 :(得分：0)

在我的情况下，采取以下行动很有帮助。

将图像放置在相同主机下。

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

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

WhatsApp/2.18.380 A

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

答案 21 :(得分：0)

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

相关问题
最新问题