实验/演奏

Question

试图关注这个问题：Provide a picture for whatsapp link sharing

我创建了一个简单的HTML网页，其中包含基本的Facebook元标记：

<!--FACEBOOK-->
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas />
<meta property="og:image" content="http://pollosweb.wesped.es/programa_pollos/play.png" />

Facebook linter验证正确，在Facebook上它显示完美，但当我尝试通过WhatsApp分享图像时没有显示。

我正在尝试 Android上的WhatsApp

→This is the URL of the Sample Webpage

Answer 1

我相信您需要将\s* //any number of whitespace (\d*) //any number of digits \s* //any number of whitespace ([^\d\s]*) //any number of characters that aren't whitespace or digits \s* //any number of whitespace (\d*)\s //any number of digits with a space after it \s* //any number of whitespace (\d*%?) //any number of digits with an optional % \s* //any number of whitespace ([^\d\s]*) //any number of characters that aren't whitespace or digits添加到itemprop元标记，将图片大小设置为og:image，同时添加256x256也不会有害， site_name和type属性：）

updated_time

您可以查看这些元标记，例如Google Maps 更改元标记后，您可能需要等待一段时间才能更新可能的缓存。

您可以从Facebook Debugger执行调试/验证Open Graph元标记如果您可以在那里看到所有标记，那么标记未正确显示的网站/应用可能会对Open Graph标记有不同的要求。

编辑：
如果您要通过<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" />链接指定图片，则需要使用HTTP-Secure代替og:image:secure_url。

EDIT2：
您还需要指定og:image，因为它是四个基本必需参数之一 og:type应该让你朝着正确的方向前进。

Answer 2

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

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

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

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

Answer 3

我在这里找到了解决方案Whatsapp preview link posted on 2 March 16

你应该看到工作Before and after screenshoot

有两种代码。第一个元：图像里面＆lt; head＆gt;

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

schema.org里面的缩略图架构＆lt; body＆gt;

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

希望这有帮助。感谢。

Answer 4

我也面临这个问题最后，我解决了它

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

我的图片属性

尺寸：300X200
尺寸：＆lt; 300KB
网址：http://yourdomain.com/yourfolder/imagename.png

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

Answer 5

清除您的whatsapp数据和缓存（或使用其他whatsapp）！

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

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

然后结果：清除数据和缓存WhatsApp之前和之后

Answer 6

其他有用的信息：

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

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

Answer 7

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

或使用谷歌的json-ld格式

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

 }
 </script>

Answer 8

对于所有仍然遇到此问题的人而言，对我来说，没有任何已发布的解决方案能够实现。

我有类似的问题。图像在所有其他共享对话框中正确显示。只有WhatsApp才能显示图像，即使facebook调试器正确显示了og：image标签。

对我有用的解决方案：我正在使用firebase。对于其存储中上传的内容，您将获得带有媒体令牌的唯一下载URL。类似的东西：

https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/ ALT =媒体＆安培;标记= YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY

我在og：image元标记中使用了此URL。它适用于Facebook等，但似乎WhatsApp无法从此URL下载图像。相反，您需要将图像包含在项目目录中，并将此链接用于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">

希望它对你们中的一些人有所帮助:)。

Answer 9

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

标题：在网页上添加关键字丰富的标题，最多65个字符。
元描述：以最多155个字符描述您的网页。
og：title：最多35个字符。
og：url：指向您网页地址的完整链接。
og：description：最多65个字符。
og：image：图片（JPG或PNG）尺寸小于300KB，最小尺寸为300 x 200像素。
favicon：尺寸为32 x 32像素的小图标。

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

Answer 10

我希望这有帮助：

<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上。我尝试从亚马逊加载网址，图片预览无效。

Answer 11

我不知道在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>

Answer 12

2020年11月： 以我的经验，这些元标记是必需的，并且会影响您在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>，则页面og:image的{{1}}和og:description将会在whatsApp上呈现为您在正文中提到的链接（可能很明显）。

2-当您example.com/page2 add/change之类的任何打开的图形标签，然后再次单击页面/正文上的og:description标签时，在WhatsApp上看到的内容不会改变除非您更改<a></a>标签的href="I am a new URL"或清除WhatsApp的缓存!!

3-我尝试了<a></a>个图像，所有图像均小于300 kb，像素均大于300 * 300，图像内容为Png/jpg或https网址，上面的代码支持它们两者（不需要http）。

4-每次您添加/更改og:image:secure_url内容时，要在WhatsApp上显示缩略图，所做的更改都不会在第一次尝试时产生影响！并且第二次尝试成功。很奇怪！

Answer 13

遇到同样的问题，经过一番尝试，我终于让它工作了。这是我在网页上使用的8个html标签，以使预览正常工作：

在 [Fri Oct 30 01:52:23.726544 2020] [ssl:warn] [pid 8648:tid 624] AH01909: www.example.com:443:0 server certificate does NOT include an ID which matches the server name [Fri Oct 30 01:52:23.802080 2020] [core:warn] [pid 8648:tid 624] AH00098: pid file C:/xampp/apache/logs/httpd.pid overwritten -- Unclean shutdown of previous Apache run? [Fri Oct 30 01:52:23.812081 2020] [ssl:warn] [pid 8648:tid 624] AH01909: www.example.com:443:0 server certificate does NOT include an ID which matches the server name [Fri Oct 30 01:52:23.849084 2020] [mpm_winnt:notice] [pid 8648:tid 624] AH00455: Apache/2.4.46 (Win64) OpenSSL/1.1.1g PHP/7.4.9 configured -- resuming normal operations [Fri Oct 30 01:52:23.849084 2020] [mpm_winnt:notice] [pid 8648:tid 624] AH00456: Apache Lounge VC15 Server built: Aug 4 2020 11:50:23 [Fri Oct 30 01:52:23.849084 2020] [core:notice] [pid 8648:tid 624] AH00094: Command line: 'c:\\xampp\\apache\\bin\\httpd.exe -d C:/xampp/apache' [Fri Oct 30 01:52:23.852085 2020] [mpm_winnt:notice] [pid 8648:tid 624] AH00418: Parent: Created child process 3080 [Fri Oct 30 01:52:24.329479 2020] [ssl:warn] [pid 3080:tid 632] AH01909: www.example.com:443:0 server certificate does NOT include an ID which matches the server name [Fri Oct 30 01:52:24.404848 2020] [ssl:warn] [pid 3080:tid 632] AH01909: www.example.com:443:0 server certificate does NOT include an ID which matches the server name [Fri Oct 30 01:52:24.443850 2020] [mpm_winnt:notice] [pid 3080:tid 632] AH00354: Child: Starting 150 worker threads. 标签中：

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

这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

Answer 14

我按照此处答案中的所有说明进行操作，但仍然无法正常工作。看来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"/>

然后它似乎可以工作...

Answer 15

如果按照上述所有提示操作后，缩略图仍然没有显示，请尝试以下操作：

我的问题是，为生产而构建时，会删除og属性中的双引号（npm run build）。 Minify模块正在执行此操作。

因此解决方案是取消此删除，将removeAttributeQuotes属性设置为false：

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js recap</title>
</head>

<body>
  <form class="addform">
    <input type="number" name="text" id="text">
  </form>

<!-- START JAVASCRIPT -->

  <script>
    const addform = document.querySelector('.addform');

    addform.addEventListener('submit', e => {
      e.preventDefault();
      
      const todos = parseInt(addform.text.value.trim())

      if (typeof todos === "number") {
        for (let i = 0; i <= todos; i++) {
          console.log(i);
        }
      }
    });
  </script>

<!-- END JAVASCRIPT-->
</body>

</html>

在开发环境中，将其设置在“ webpack.prod.conf.js”文件中。将其设置为等效文件。

只需重建即可使用。

Answer 16

对于仍然遇到这种情况的任何人，我发现在Amazon S3上提供的图像对于WhatsApp移动应用程序（Android和iOS，但Mac桌面应用程序都很好）不起作用。我们的AWS设置很可能会导致这种情况，但我也注意到其他站点中的模式（例如this one，其中og:image击中了https://s3.amazonaws.com之类的域）。

我尝试过的任何其他平台都没有问题，只是WhatsApp移动应用程序。一旦我将<meta property="og:image" content="https://some-non-aws-location" />指向另一个公共URL（例如Google云端硬盘文件（当然是公共共享）），它就可以正常工作。

我还尝试了在我们的存储库中提交映像，该存储库通过自定义域托管和部署在AWS上，但也不起作用。因此，AWS似乎仍然是罪魁祸首。希望这对某人有帮助！

Answer 17

似乎仅需要这三个标签（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://svelte.dev/repl/e38138607bc445ea95754de83e5e0b8d?version=3.8.0创建一个Vanilla应用
在index.html文件中相应地修改元标记
保存文件（ctrl+s），该文件将派生应用并生成自己的唯一网址
将该网址粘贴到WhatsApp中以查看预览（您甚至不需要发送消息）
对元标记进行更改
修改网址-在网址末尾添加一个字符。这会丢弃“先前的缓存预览”

需要报价

请务必确保始终使用引号和右引号，因为WhatsApp对此很敏感。您上面的示例中没有og:description的结束语。

Answer 18

花了几个月的时间试图弄清楚这一点之后，我终于解决了问题。这是我的解决方案：

$ code .

复制上面的内容，粘贴到网站的顶部区域。关闭您的Whatsapp应用，重新打开，然后进行测试。无需清除缓存，也无需清除数据。

祝福大家！

Answer 19

就我而言，添加以下meta标签可以解决此问题。我使用的是阿拉伯语内容，因此必须添加它才能使图像显示在WhatsApp上：

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

注意：如果您使用的是英语内容，则因为英语是默认值，所以无需添加此元标记。

Answer 20

打开图形数据：

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

Answer 21

您只需在开头输入带有“http：//”的消息。例如： http://www.google.com显示缩略图，但www.google.com号。

Answer 22

此解决方案对我有用：

    <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”来实现了魔术

如果您的图片网址为ex：https://test.com/img.jpeg至//test.com/img.jpeg

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

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

22 个答案:

实验/演奏

需要报价