为WhatsApp链接共享提供图像
max*_*l98 146 html meta-tags open-graph-protocol whatsapp
当我们分享这样的链接时,我们如何在我们的网站中包含一个图像以显示在WhatsApp中？
Der*_*man 268
2019年标准
需要几个步骤才能获得WhatsApp,Twitter,Facebook和PC和移动设备书签图标的完美预览.如果你喜欢阅读ogp.me - 但请务必阅读本答案中的步骤1 - 6以获得最佳的WhatsApp预览.
第1步:标题
最多65个字符
<title>your keyword rich title of the website and/or webpage</title>
第2步:描述
最多155个字符
<meta name="description" content="description of your website/webpage, make sure you use keywords!">
第3步:og:标题
最多35个字符
<meta property="og:title" content="short title of your website/webpage" />
第4步:og:url
完整链接到您的网页地址
<meta property="og:url" content="https://www.example.com/webpage/" />
第5步:og:说明
最多65个字符
<meta property="og:description" content="description of your website/webpage">
第6步:og:图像
建议尺寸小于300KB且最小尺寸为300×200像素的图像(JPG或PNG)
<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">
第7步:og:输入
为了在图形中表示对象,需要指定其类型.以下是可用的全局类型列表:http://ogp.me/#types.您还可以指定自己的类型.
<meta property="og:type" content="article" />
第8步:og:locale
资源的区域设置.如果您有其他语言翻译,也可以使用og:locale:alternate.
如果未指定og:locale,则默认为en_US.
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
第9步:Twitter
要获得最佳Twitter支持,请阅读此内容.
第10步:Facebook
为获得最佳Facebook支持,请阅读此内容.
第11步:favicon
为了获得所有浏览器和设备的最佳图标支持,请阅读此内容.
奖励步骤12:视频/音频
它也可以共享音频/视频.例如,Facebook和Twitter分享视频非常好.阅读ogp.me.
- 请注意,如果您的站点在带有自签名证书的https上运行,则它可能不起作用.在Facebook和whatsapp上验证 (8认同)
- 您可以通过在共享或粘贴 URL 时更改 URL 来解决缓存问题。例如，如果您的 URL 是 https://www.test.com，您可以将其更改为 https://www.test.com?cache。您可以在 URL 中添加任何内容，等待几秒钟，假设所有元标记都以正确的格式应用，更新的文本就会显示。这对我有用。但从有机角度来看，我认为大约需要 24 小时才能改变。 (3认同)
- @Indraraj感谢您的分享，也可以在* Facebook开发人员文档中找到 (2认同)
- <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale =1，maximum-scale=1，user-scalable=no"> <title></title> <meta name="description" content=""> <meta property="og:title" content="" /> <meta property="og:url" content="" /> <meta property="og:description" content=""> <meta property="og:image" content="mappointer.png"> <meta property= "og:image:width" content="" /> <meta property="og:image:height" content="" /> 我把上面所有的标签都放了。但仍然没有显示图像 (2认同)
- @DerkJanSpeelman现在工作正常。谢谢。我忘了保持图像尺寸为300 * 200。 (2认同)
- 大家好，我已在我的网站上实施了此页面中的所有强制步骤，但我的网站的描述和缩略图未显示在 WhatsApp 上。我创建了新线程，以便能够在这里提供问题的详细信息：/sf/ask/4416644711/ 我真的感谢对我的案例的任何帮助，谢谢。 (2认同)
Ale*_*sil 14
我猜whatsapp中没有白名单,因为我发现了一个对我有用的解决方案.做如下.插入3个元标记:
<meta property="og:image" content="http://yourimage_with_complete_URL.png"/>
<meta property="og:title" content="Your Title"/>
<meta property="og:description" content="Your description."/>
您的图片必须是.png格式和600x600px尺寸,并且必须命名为'logo-yoursite.png'(一旦它对我起作用就像那样)
别忘了在你的网站上插入whatsapp的链接:
<a href='whatsapp://send?text=Text to send withe message: http://www.yoursite.com'>whatsApp</a>
这样做,你会做得很好!
- 绝对不是这个名字。我可以确认 JPG 有效。 (2认同)
Ced*_*iga 14
我有同样的问题,问题是图片的大小.Whatsapp不支持大小超过300KB的图片.
所以在Whatsapp上显示图像最重要的属性是:
<meta property="og:image" content="url_image">
并且要显示的图像大小必须小于300KB.
如果问题仍然存在,请阅读此类似问题的答案
- 人们如何知道300.000字节或300kB(小k)的大小限制？我在互联网上搜索了一个来源,但在WhatsApp网站或Open Graph Protocol网站http://ogp.me/上找不到这个大小限制. (4认同)
- +1为大小限制信息,但它不正确.Whatsapp应用程序获取前300.000字节(Http标题:"范围:字节= 0-299999") (3认同)
zen*_*nni 11
在查看了很多答案但无法解决问题后，经过多次迭代后我终于让它工作了。这是我使用的确切代码：
在<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_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
小智 9
我想提请注意一个简单的事实<meta property="og:image" content="image.png" />，正如上面某处建议的那样，对我不起作用（这实际上让我陷入了数周的循环）。有效的是绝对 URL：
<meta property="og:image" content="https://domainname.com/image.png" />
或以斜杠开头（如果图像在根目录中）：
<meta property="og:image" content="/image.png" />
（我会添加这个作为评论，但我还不允许。如果更合适，版主可以随意移动它。）
我自己也一直在尝试这样做，并且添加了所有正确的元标记：
<meta property="og:image" itemprop="image" content="image_url" />
<meta property="og:image:url" itemprop="image" content="image_url" />
<meta property="og:image:type" content="image/png" />
但在 WhatsApp 中分享我的链接时仍无法看到图像。
我发现 WhatsApp 也对图像和 url 信息进行某种缓存，不知道缓存多长时间。
为了检查我是否插入了正确的标签，我只是尝试了不同的网址，例如：http://domain.com而不是http://www.domain.com。
希望这对其他人有帮助。
小智 5
我在这里记录了完美的详细解决方案 - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html 有七个步骤可以完成预览.
标题:为您的网页添加关键字丰富的标题,最多65个字符.
元描述:描述您的网页最多155个字符.
og:title:最多35个字符.
og:url:指向您网页地址的完整链接.
og:description:最多65个字符.
og:image:建议尺寸小于300KB且最小尺寸为300 x 200像素的图像(JPG或PNG).
favicon:尺寸为32 x 32像素的小图标.
在上面的页面中,您具有所需的规格,字符限制和样本标签.一旦你觉得它满意就做upvote.
在处理 bugg 后，发现在 IOS 中，HEAD 中的元素可能会停止 og:image /og:description / name=description 的 WhatsApp 搜索。因此，首先尝试将它们放在其他一切之上。
这不起作用
<head>
<div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
<meta property="og:description" content="description" />
<meta property="og:image" content="http://cdn.some.com/random.jpg" />
</head>
这项工作：
<head>
<meta property="og:description" content="description" />
<meta property="og:image" content="http://cdn.some.com/random.jpg" />
<div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
</head>
- 为什么要在 <head> 部分放置 <div> ？ (9认同)
我建议您始终查看https://developers.facebook.com/tools/debug/sharing来验证您的属性，因为 Facebook 经常更改其政策、合规性和 API。
如果您使用 Messenger 机器人或其他 FB 应用程序，则可能需要属性 fb:app_id 才能使链接图像在 Whatsapp 中工作。更多信息请访问 Facebook 开发者网站管理员网站。 https://developers.facebook.com/docs/sharing/webmasters
其他有用的信息：
您可以提供多个 og:images，whatsapp 将使用最后一个。这将有助于解决例如 facebook 想要 1.91:1 比例和 whatsapp 1:1 的问题
<meta property="og:image" content="https://www.link.com/facebook.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image" content="https://www.link.com/whatsapp.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />
https://roei.stream/2018/11/18/ideal-open-graph-image-size-for-whatsapp-link-share/
https://css-tricks.com/essential-meta-tags-social-media/
| 归档时间： |
|
| 查看次数： |
192429 次 |
| 最近记录： |