当前位置：theitroad>Android 在 WhatsApp 中显示链接的缩略图 || og:image 元标记不起作用

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

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/25100917/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-20 09:05:27 　来源:igfitidea点击:

Showing Thumbnail for link in WhatsApp || og:image meta-tag doesn't work

androidhtmlfacebook-opengraphmeta-tagswhatsapp

提问by JesuLopez

Tried to follow this question : Provide a picture for whatsapp link sharing

试图遵循这个问题：提供用于whatsapp链接共享的图片

enter image description here

在此处输入图片说明

I have created a simple HTML webpage with the basic Facebook metatags:

我用基本的 Facebook 元标签创建了一个简单的 HTML 网页：

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

The Facebook linter validate correctly and in Facebook it shows perfect, but when I try to share by WhatsApp the image doesn't show.

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

I'm trying it on WhatsApp on Android

我正在Android上的WhatsApp 上试用

→ This is the URL of the Sample Webpage

→这是示例网页的 URL

回答by Unknown

I belive you need to add itempropto the og:imagemeta tag, have the image size set to 256x256and also it would not harm to add the site_name, typeand updated_timeproperties either :)

我相信您需要添加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" />

You can see these meta tags in action on for example Google Maps.
After you have changed your meta tags, you might need to wait a while for possible caches to update.

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

You can debug/verify Open Graph meta tags from the Facebook Debugger
If you can see all your tags there, then the sites/apps where your tags are not showing properly might have different requirements for Open Graph tags.

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

EDIT:
If you are going to specify an image by a HTTP-Securelink, you need to use og:image:secure_urlinstead of og:image.

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

EDIT2:
You also need to specify og:typeas it is one of the four base required parameters.
<meta property="og:type" content="website" />should get you in the right direction.

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

回答by Cedriga

I had the same issue and the problem was the size of the picture. Whatsapp doesn't support picture with a size greater than 300KB.

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

So the most important property to display image on Whatsapp is:

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

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

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

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

回答by Syed Zeeshan Ali

I also face that problem Finally, i solved it

我也遇到这个问题最后我解决了

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

My image property

我的图像属性

  1. Dimension : 300X200
  2. Size : < 300KB
  3. URL: http://yourdomain.com/yourfolder/imagename.png
  1. 尺寸：300X200
  2. 大小：< 300KB
  3. 网址：http: //yourdomain.com/yourfolder/imagename.png

Make sure in image name there is no space, if you have two words then use underscore sign

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

回答by wong_udik

I found the solution here Whatsapp preview link posted on 2 March 16

我在这里找到了解决方案3 月 16 日发布的 Whatsapp 预览链接

And you should see working Before and after screenshoot

你应该看到屏幕截图之前和之后的工作

enter image description here

在此处输入图片说明

There is two kind of code. First meta og:image inside <head>

有两种代码。<head> 中的第一个元 og:image

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

Thumbnail schema from schema.org inside <body>

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

Hope this help. Thanks.

希望这有帮助。谢谢。

回答by David E

After spending months trying to figure this out, I finally solved the issue. Here is my solution:

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

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

Copy the above, paste in head area of website. CLOSE your Whatsapp app, re-open, THEN test. No need to clear cache, and NO NEED TO CLEAR DATA.

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

Blessings to all!

祝福大家！

回答by Azodium

Clear your whatsapp data and cache (or use another whatsapp) !

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

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

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

Be careful ! Backup your messages before this action.

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

clear whatsapp data and cache

清除whatsapp数据和缓存

Then the result : before and after clearing data and cache WhatsApp before and after sharing

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

回答by falero80s

I don't know about the minimum number of meta tags required to work on whatsapp, found this in somewhere and this worked for me flawlessly. Note: Image resolution is 256 x 256.

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

回答by Joell Lapitan

In reply to https://stackoverflow.com/a/35785393/1518500

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

Try the updated version for schema.org

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

or using the json-ld format from google

或使用谷歌的 json-ld 格式

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

 }
 </script>

回答by Philipp Mittmann

For all still having this problem and as for me none of the posted solutions worked out.

对于仍然有这个问题的所有人，至于我，没有一个已发布的解决方案解决了。

I've had the similar issue. The image was showing correctly in all other share dialogs. Only WhatsApp couldnt display the image, even though the facebook debugger has the og:image tag correctly.

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

The solution that worked for me: I am using firebase. For uploaded content in their storage, you get a unique Download URL with a media token. Something like:

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

https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/?alt=media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY

https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/？ALT =媒体和令牌= YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY

I used this URL in the og:image meta tag. It worked for Facebook etc., but it seems like WhatsApp couldnt download the image from this URL. Instead you need to include the image in your project directory and use this link for the og:image tag. Now it works properly in WhatsApp too.

我在 og:image 元标记中使用了这个 URL。它适用于 Facebook 等，但似乎 WhatsApp 无法从该 URL 下载图像。相反，您需要将图像包含在您的项目目录中，并将此链接用于 og:image 标记。现在它也可以在 WhatsApp 中正常工作。

Before (not working in WhatsApp, but facebook etc.)

之前（不在 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">

After (now working in all shared dialogs tested, including WhatsApp)

之后（现在在测试的所有共享对话框中工作，包括 WhatsApp）

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

Hope it might help some of you :)

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

回答by GZone

I documented the perfect detailed solution here - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.htmlThere are seven steps to be done to get the perfect preview.

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

  1. Title : Add Keyword rich title to your webpage with maximum of 65 characters.

  2. Meta Description : Describe your web page in a maximum of 155 characters.

  3. og:title : Maximum 35 characters.

  4. og:url : Full link to your webpage address.

  5. og:description : Maximum 65 characters.

  6. og:image : Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised.

  7. favicon : A small icon of dimensions 32 x 32 pixels.

  1. 标题：为您的网页添加关键字丰富的标题，最多 65 个字符。

  2. 元描述：以最多 155 个字符描述您的网页。

  3. og:title ：最多 35 个字符。

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

  5. og:description : 最多 65 个字符。

  6. og:image ：建议使用小于 300KB 且最小尺寸为 300 x 200 像素的图像（JPG 或 PNG）。

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

In the above page, you have the required specifications, the character limit and sample tags. Do upvote once you find it satisfactory.

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

相关推荐

Android GridLayout 和行/列跨度问题

Android GridLayout 和行/列跨度问题

无法使用 android-ndk 和 Android Studio 构建项目

无法使用 android-ndk 和 Android Studio 构建项目

如何在android中将透明背景设置为自定义对话框

如何在android中将透明背景设置为自定义对话框

Android textview 大纲文本

Android textview 大纲文本

相关推荐
最近更新
标签