在WhatsApp中显示链接的缩略图|| og:图像元标记不起作用
Jes*_*pez 70 html android meta-tags opengraph whatsapp
试图按照这个问题:为whatsapp链接共享提供图片
我创建了一个简单的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上尝试它
Unk*_*own 73
我相信你需要添加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调试器调试/验证Open Graph元标记
如果您可以在那里看到所有标记,那么标记未正确显示的网站/应用可能对Open Graph标记有不同的要求.
编辑:
如果您要通过HTTP-Secure链接指定图像,则需要使用og:image:secure_url而不是og:image.
EDIT2:
您还需要指定,og:type因为它是四个基本必需参数之一.
<meta property="og:type" content="website" />应该让你朝着正确的方向前进
- 另外，如果要使用安全HTTP链接来映像，则需要使用“ property =“ og：image：secure_url””而不是“ property =“ og：image”` (3认同)
Ced*_*iga 18
我有同样的问题,问题是图片的大小.Whatsapp不支持大小超过300KB的图片.
所以在Whatsapp上显示图像最重要的属性是:
<meta property="og:image" content="url_image">
并且要显示的图像大小必须小于300KB
- 可以确认。将图像大小调整为方形且大小约为 100 kB 后，缩略图出现在 WhatsApp 中（之前为 1920x1080 和 350 kB）。我必须重新启动 Android 手机中的 WhatsApp。我**不需要**需要添加老派的 `itemprop="image"` 或 `og:image:secure_url` 属性。 (6认同)
小智 9
我在3月2日发布了Whatsapp预览链接的解决方案
你应该看到在屏幕截图之前和之后工作
有两种代码.第一个元:在<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>
希望这有帮助.谢谢.
- FB 调试器：100% 正常。丰富的预览：100% ok（包括 Watsapp）。当我尝试通过 WhatsApp 共享时，图像不显示。我的情况下的网址是robotiqu.es ...一年后没有回应？ (2认同)
小智 8
我也面临这个问题最后,我解决了它
<meta property="og:image" itemprop="image" content="http://yourdomain.com/yourfolder/imagename.png" />
我的图片属性
- 尺寸:300X200
- 大小:<300KB
- 网址:http://yourdomain.com/yourfolder/imagename.png
确保图像名称中没有空格,如果有两个单词,则使用下划线符号
小智 6
在花了几个月的时间试图解决这个问题之后，我终于解决了这个问题。这是我的解决方案：
<!-- 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应用，重新打开，然后进行测试。无需清除缓存，也不需要清除数据。
祝福大家！
- 对我来说，文件大小才是最重要的。只要文件大小低于 300 Kb 就一切正常。我不需要测量属性。og:image 标签就足够了。 (2认同)
我不知道在 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>
| 归档时间： |
|
| 查看次数： |
103017 次 |
| 最近记录： |