首页 文章

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

提问于
浏览 次
50

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

enter image description here

我创建了一个简单的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分享时，图像不显示 .

我正在尝试 WhatsApp on Android

→This is the URL of the Sample Webpage

android html opengraph meta-tags whatsapp

11 回答

  • 1

    我相信你需要将 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" />

    您可以在操作中看到这些元标记，例如Google Maps .
    更改元标记后，可能需要等待一段时间才能更新可能的缓存 .

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

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

    EDIT2：
    您还需要指定 og:type ，因为它是四个基本必需参数之一 .
    <meta property="og:type" content="website" /> 应该让你朝着正确的方向前进 .

    回复于
  • 0

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

    所以在Whatsapp上显示图像最重要的属性是：

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

    和 size of the image to display must be less than 300KB

    回复于
  • 52

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

    你应该看到工作Before and after screenshoot

    enter image description here

    有两种代码 . 第一个元：在<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>

    希望这有帮助 . 谢谢 .

    回复于
  • 9

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

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

    我的图片属性

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

    回复于
  • 0

    清除你的whatsapp数据和缓存（或使用另一个whatsapp）！

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

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

    clear whatsapp data and cache

    然后结果：清除数据和缓存之前和之后WhatsApp
    before and after sharing

    回复于
  • 11

    回复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>
    回复于
  • 0

    对于所有仍然有这个问题的人，对我来说，没有任何已发布的解决方案 .

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

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

    https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/？alt = media＆token = YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY

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

    希望它可能会帮助你们中的一些人:)

    回复于
  • 2

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

    • Headers ：将关键字丰富的 Headers 添加到您的网页，最多65个字符 .

    • 元描述：描述您的网页最多155个字符 .

    • og：title：最多35个字符 .

    • og：url：指向您网页地址的完整链接 .

    • og：description：最多65个字符 .

    • og：image：建议大小小于300KB且最小尺寸为300 x 200像素的图像（JPG或PNG） .

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

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

    回复于
  • 1

    您只需要在开始时使用"http://"键入消息 . 例如：http://www.google.com显示缩略图，但www.google.com号 .

    回复于
  • 1

    我希望这有帮助：

    <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上 . 我尝试从亚马逊加载网址，图片预览不是工作 .

    回复于
  • 7

    我不知道在whatsapp上工作所需的元标记的最小数量，在某个地方发现了这个，这对我来说完美无缺 . Note: Image resolution is 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>
    回复于

相关问题