小开

我相信你需要添加 itemprop到 og:image元标签，有图像大小设置为 256x256，也不会有害于添加 site_name，type和 updated_time属性:)

<meta property="og:site_name" content="San Roque 2014 Pollos">
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas" />
<meta property="og:image" itemprop="image" content="http://pollosweb.wesped.es/programa_pollos/play.png">
<meta property="og:type" content="website" />
<meta property="og:updated_time" content="1440432930" />

您可以在例如谷歌地图上看到这些元标记的作用。
在更改了 meta 标记之后，可能需要等待一段时间才能更新可能的缓存。

您可以从 Facebook 调试器调试/验证 Open Graph meta 标记
如果你可以在那里看到你所有的标签，那么那些没有正确显示你的标签的网站/应用程序可能对 Open Graph 标签有不同的要求。

编辑:
如果要通过 HTTP-Secure链接指定图像，则需要使用 og:image:secure_url而不是 og:image。

编辑2:
您还需要指定 og:type，因为它是四个基本必需参数之一。
<meta property="og:type" content="website" />应该能让你找到正确的方向。

小开

我在这里找到了解决方案

你应该看看工作的样子

Before and after screenshoot

有两种代码，第一种是 meta og: image inside < head >

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

来自 < body > 内部 schema.org 的缩略图模式

<link itemprop="thumbnailUrl" href="url_image">
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="url_image">
</span>

希望这个能帮上忙，谢谢。

小开

你只需在邮件开头输入“ http://”，例如: Http://www.google.com 显示了缩略图，但是 www.google.com 没有。

小开

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

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

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

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

小开

答复 https://stackoverflow.com/a/35785393/1518500

尝试使用 Schema.org 的更新版本

<span itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="imgurlHere">
<meta itemprop="width" content="1200">
<meta itemprop="height" content="800">
</span>

或者使用 google 的 json-ld 格式

<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "ImageObject",
"url": "ImgURLhere",
"height": 800,
"width": 1200


}
</script>

小开

对于所有仍然有这个问题，对于我来说，没有一个公布的解决方案。

我也有过类似的问题。该图像在所有其他共享对话框中显示正确。只有 WhatsApp 无法显示图像，即使 facebook 调试器正确地使用了 og: image 标记。

对我有效的解决办法是: 我用的是火药。对于在其存储中上传的内容，您将获得一个带有媒体标记的唯一下载 URL。比如:

Https://firebasestorage.googleapis.com/v0/b/xxxx.xxxxxxx.com/ ? alt = media & token = YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY-

我在 og: image meta 标记中使用了这个 URL。它曾在 Facebook 等网站上运行，但 WhatsApp 似乎无法从这个网址下载图片。相反，您需要在您的项目目录中包含这个映像，并将这个链接用于 og: image 标记。现在它在 WhatsApp 中也能正常工作。

之前(不是在 WhatsApp 工作，而是在 facebook 等等)

<meta property="og:image" itemprop="image" content="https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/your_image?alt=media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY">

之后(现在可以在所有测试的共享对话框中工作，包括 WhatsApp)

<meta property="og:image" itemprop="image" content="https://domain_name/path_to_image">

希望对你们有所帮助:)

小开

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

标题: 添加关键字富标题到您的网页，最多65个字符。
元描述: 描述你的网页，最多155个字符。
Og: title: 最多35个字符。
完整链接到你的网页地址。
描述: 最多65个字符。
Og: Image: 图像(JPG 或 PNG)的大小小于300KB，最小尺寸为300x200像素的建议。
图标: 尺寸为32 x 32像素的小图标。

在上面的页面中，您有所需的规格，字符限制和示例标签。一旦你觉得满意，请投赞成票。

小开

我希望这能有所帮助:

<meta property="og:title" content="Title goes here">
<meta property="og:site_name" content="Site name">
<meta property="og:image" content="imageURLShouldBeFromSameDomainName">
<meta property="og:image:width" content="640">
<meta property="og:image:height" content="300">

请注意应该从同一个域托管的 imgURL，否则它不会显示在 whatsapp 上。我试过从亚马逊加载一个网址，图像预览不工作。

小开

我也面临这个问题终于，我解决了

<meta property="og:image" itemprop="image" content="http://yourdomain.com/yourfolder/imagename.png" />

我的形象财产

尺寸: 300X200
大小: < 300KB
网址: http://yourdomain.com/yourfolder/imagename.png

确保图像名称中没有空格，如果有两个单词，则使用下划线符号

小开

我不知道开发 whatsapp 需要多少元标签，我在某个地方找到了这个，这个对我来说完美无瑕。注意: 图像分辨率为256 x 256。

   <head>
<meta property="og:site_name" content="sitename" />
<meta property="og:title" content="title">
<meta property="og:description" content="description">
<meta property="og:image" itemprop="image" content="http://www.yoursite.com/yourimage.jpg">
<link itemprop="thumbnailUrl" href="http://www.yoursite.com/yourimage.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:updated_time" content="updatedtime">
<meta property="og:locale" content="en_GB" />
</head>


<body>
<span itemprop="image" itemscope itemtype="image/jpeg">
<link itemprop="url" href="http://www.yoursite.com/yourimage.jpg">
</span>


</body>

小开

清除 whatsapp 数据并缓存(或者使用另一个 whatsapp) ！

Android Phone : Go to SETTINGS > APPS > Application List > WhatsApp > Storage and Clear Data.

小心! 在此操作之前备份您的消息。

然后结果是: 在清除数据和缓存 WhatsApp 之前和之后

小开

开放图表资料:

<meta property="og:title" content="Title of your website | website.com"/>
<meta property="og:type" content="Most popular business directory of Bangladesh"/>
<meta property="og:url" content="http://www.website.com/"/>
<meta property="og:image" content="http://www.moumaachi.com/images/dhaka-city.jpg"/>
<meta property="og:site_name" content="@website"/>
<meta property="fb:admins" content="Author"/>
<meta property="og:description" content="website.com is your online business directory of Country"/>

小开

在我的例子中，添加下面的 meta 标记解决了这个问题。我使用的是阿拉伯语内容，必须添加这个才能使图像显示在 WhatsApp 上:

<meta property='og:locale' content='ar_AR' />

注意: 如果您使用的是英文内容，则不需要添加这个 meta 标记，因为 English 是默认值。

小开

经过几个月的努力，我终于解决了这个问题。以下是我的解决方案:

<!-- MS, fb & Whatsapp -->


<!-- MS Tile - for Microsoft apps-->
<meta name="msapplication-TileImage" content="http://www.example.com/image01.jpg">


<!-- fb & Whatsapp -->


<!-- Site Name, Title, and Description to be displayed -->
<meta property="og:site_name" content="The Rock Photo Studio">
<meta property="og:title" content="The Rock Photo Studio in Florida">
<meta property="og:description" content="The best photo studio for your events">


<!-- Image to display -->
<!-- Replace   «example.com/image01.jpg» with your own -->
<meta property="og:image" content="http://www.example.com/image01.jpg">


<!-- No need to change anything here -->
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/jpeg">


<!-- Size of image. Any size up to 300. Anything above 300px will not work in WhatsApp -->
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">


<!-- Website to visit when clicked in fb or WhatsApp-->
<meta property="og:url" content="http://www.example.com">

复制以上内容，粘贴在网站的头部区域。关闭你的 Whatsapp 应用程序，重新打开，然后进行测试。不需要清除缓存，也不需要清除数据。

祝福所有人！

小开

似乎只需要这3个标签(og:title，twitter:description，rel="icon") :

<meta property="og:title" content="San Roque 2014 Pollos" />


<meta name="twitter:description" property="og:description" itemprop="description" content="Programa de fiestas" />


<link rel="icon" type="image/png" href="https://images.weserv.nl/?url=http://pollosweb.wesped.es/programa_pollos/play.png&w=192&height=192" sizes="192x192" />

实验/演奏

对我来说，最简单的实验方法是使用 CodeSandbox 进行以下步骤:

用 https://codesandbox.io/s/创建一个香草应用程序
在 index.html文件中相应地修改 meta 标记
保存文件(ctrl+s) ，它将分叉应用程序并生成自己的唯一 url
将这个 URL 粘贴到 WhatsApp 中以查看预览(您甚至不需要发送消息)
更改 meta 标记
修改 url-在 url 的末尾添加一个字符。这会丢弃“之前缓存的预览”

需要引用

只要确保始终有引号和结束引号，因为 WhatsApp 对此很敏感。你上面的例子没有你的 og:description的结束报价。

小开

附加有用信息:

您可以提供几个 og: images，whatsapp 将使用最后一个。这将有助于解决 Facebook 想要1.91:1的比例和 whatsapp 1:1的问题

Https://stackoverflow.com/a/61078968/8486854

小开

对于任何仍然经历这一点，我发现 在 Amazon S3上提供的图像不能工作为 WhatsApp 移动应用程序(Android 和 iOS，但 Mac 桌面应用程序是罚款)。很有可能是我们的 AWS 设置导致了这种情况，但是我也注意到了其他站点的模式(例如这个中的 og:image命中了像 https://s3.amazonaws.com这样的域)。

我试过的其他平台都没有问题，只有 WhatsApp 移动应用。只要我将 <meta property="og:image" content="https://some-non-aws-location" />指向另一个公共 URL，比如 Google Drive 文件(当然是公共共享的) ，它就能正常工作。

我还尝试在我们的 repo 中提交映像，这是托管和部署在具有自定义域的 AWS 上的，这也没有工作。所以 AWS 似乎仍然是罪魁祸首。希望这对谁有帮助！

小开

如果在所有这些提示之后，缩略图仍然没有显示出来，试试这个:

我的问题是，og 属性的双引号在为生产而构建时被删除了(npm run build)。Minify 模块就是这么做的。

因此，解决方案是取消删除操作，将 RemoveAttributeQuotes 属性设置为 false:

minify: {
...
removeAttributeQuotes: false,
...
}

在我的开发环境中，我将它设置在“ webpack.prod.con.js”文件中，并将它设置在相应的文件中。

只要重建，现在就可以了。

小开

这个方法对我很有效:

    <meta property="og:title" content="Testing Title" />
<meta
property="og:description"
content="This is best way to view your Time Table & Join Meetings"
/>
<meta
property="og:image"
itemprop="image"
content="//upload.wikimedia.org/wikipedia/commons/d/d4/JPEG_example_image_decompressed.jpg"
/>
<meta property="og:url" content="https://google.com/" />
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/jpeg" />

在 Codesandbox.io 上测试

这是链接: https://l8ogr.csb.app/

一个愚蠢的小东西做到了这一点，通过删除“ http”或“ https”从图像 Url

如果您的图像 URL 是 ex: https://test.com/img.jpeg到 //test.com/img.jpeg

<meta property="og:image" itemprop="image" content="//test.com/img.jpg"/>

小开

我按照这里的答案中的所有指示做了，但是我还是不能让它工作。WhatsApp 似乎还需要扩展来显示图像。

因此，对于指向 jpeg 的标记:

<meta property="og:image" itemprop="image" content="https://example.com/someimageid"/>

更改 API 以允许扩展和使用:

<meta property="og:image" itemprop="image" content="https://example.com/someimageid.jpeg"/>

然后看起来就有用了。

小开

有同样的问题，我终于得到了它的工作后，一些尝试。下面是我在网页上使用的8个 html 标签，它们可以让预览工作正常进行:

在 <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 _ umb.jpg

2.区分大小写的文件扩展名: 如果宿主提供程序上的映像扩展名为“。然后不要使用。或。Jpeg’。我观察到，基于托管提供商和浏览器的组合错误可能会发生，也可能不会发生，所以为了安全起见，更容易只匹配文件扩展名的情况。

3. 完成上述步骤后，如果缩略图预览仍然没有显示在 WhatsApp 消息中，那么:

强制停止移动应用程序(我在 Android 中试过) ，然后再试一次

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

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

小开

2020年11月: 根据我的经验，这些 meta 标签是必需的，它们会影响你在 Whatsapp 和 WhatsApp-thumbnail中看到的共享链接:

<head>
<meta content='myTitle' property='og:title'/>
<meta content="myDescription" property="og:Description"/>
<meta property="og:type" content= "website" />
<meta property="og:image" itemprop="image primaryImageOfPage" content="https://i.ibb.co/1GRpwND/600px-Approve-icon-svg.png" />
</head>

以及 <body>内部:

<a href="https://wa.me/?text=https://myaddress.blogspot.com/2020/11/try-16.html" target="_blank" rel="nofollow">Hello whatsApp</a>

更多解释:

1-假设你有 <meta content='example.com/page1' property='og:url'/>并且在正文中你引用了 <a href="https://wa.me/?text=example.com/page2" >Hello whatsApp</a>，页面 example.com/page2的 og:image和 og:description将会在 whatsApp 上呈现，就像你在正文中引用的链接一样(也许是显而易见的)。

2-当你 add/change任何打开的图形标签，如 og:description，并再次点击你的页面/主体上的 <a></a>标签，你在 WhatsApp 上看到的不会改变，除非你改变你的 <a></a>标签的 href="I am a new URL"或清除 WhatsApp 的缓存！

3-我尝试了 Png/jpg图像，所有小于300kb 的大小和所有大于300 * 300像素，图像内容是一个 https或一个 http网址，以上代码支持他们两个(不需要 og:image:secure_url)。

4-每次添加/更改 og内容时，为了在 WhatsApp 上有一个缩略图，更改不会影响第一次尝试！第二次就成功了。很奇怪！

小开

不确定这是不是 WhatsApp 的问题，但是在结尾粘贴没有“/”的链接对我来说很有用。

例子:-

Https://example.com
Https://example.com/ -拇指指甲不起作用

小开

花了一天的时间，但找出需要什么。下面的清单可能会帮助你

如果不包含 og:image:width和 og:image:height元标记，也没关系。以下是我的工作代码。使用 Facebook 调试器查找错误

<meta property="og:url" content="https://stgwww.moneycontrol.com/us-markets/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="YOUR_TITLE" />
<meta property="og:description" content="YOUR DESCRIPTION" />
<meta property="og:image" content="https://stgwww.moneycontrol.com/react-asset/images/moneycontrol-us-markets.png" />
<meta property="og:image:type" content="image/png" />

图像尺寸应小于 200kb
图像的宽度应该是 600px最大值，如果高度小于 600px也没关系，但最大值应该是 600px
如果您的网站是 https，请确保您的图像网址也应该有 https
确保 page url 等于在 og:url中传递的内容。在我的案例页面网址是 https://stgwww.moneycontrol.com/us-markets/，但我的 og:url是 <meta property="og:url" content="https://stgwww.moneycontrol.com/markets/us-markets/" />
og:image域名应与您的网站的域名相匹配，您不能使用其他网站的图片链接。
使用全路径，相对路径不起作用。

//correct
<meta property="og:image" content="https://stgwww.moneycontrol.com/react-asset/images/moneycontrol-us-markets.png" />


//wrong
<meta property="og:image" content="//images/moneycontrol-us-markets.png" />

在 WhatsApp | og 中为链接显示缩略图: 图像元标记不起作用

实验/演奏

需要引用