Html 为 WhatsApp 链接共享提供图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19778620/
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
Provide an image for WhatsApp link sharing
提问by maxdaniel98
How can we include an image in our website to display in WhatsApp when we share a link like this?
当我们分享这样的链接时，我们如何在我们的网站中包含图像以在 WhatsApp 中显示？
回答by Derk Jan Speelman
2020 standards
2020标准
It takes a few steps to get the perfect preview for WhatsApp, Twitter, Facebook and bookmark icons for pc's and mobile devices. If you like reading go to ogp.me- but make sure to read steps 1 - 6 in this answer to get the best WhatsApp preview.
只需几个步骤，即可完美预览 WhatsApp、Twitter、Facebook 和个人电脑和移动设备的书签图标。如果您喜欢阅读，请访问ogp.me- 但请务必阅读此答案中的第 1 - 6 步，以获得最佳的 WhatsApp 预览。
Please note:some apps or websites use cache or even store the website preview to their database. This means when you're testing your link in WhatsApp or Facebook for example, you'll most likely not see any difference right away. Using another link (another page) will do the trick. But as soon as you use that link once, this "please note"section starts all over again.
请注意：一些应用程序或网站使用缓存，甚至将网站预览存储到他们的数据库中。这意味着当您在 WhatsApp 或 Facebook 中测试链接时，您很可能不会立即看到任何差异。使用另一个链接（另一个页面）可以解决问题。但是一旦您使用该链接一次，这个“请注意”部分就会重新开始。
Step 1: title
第 1 步：标题
Maximum of 65 characters
最多 65 个字符
<title>your keyword rich title of the website and/or webpage</title>
Step 2: description
第 2 步：描述
Maximum of 155 characters
最多 155 个字符
<meta name="description" content="description of your website/webpage, make sure you use keywords!">
Step 3: og:title
第 3 步：og:title
Maximum 35 characters
最多 35 个字符
<meta property="og:title" content="short title of your website/webpage" />
Step 4: og:url
第 4 步：og:url
Full link to the current webpage address
当前网页地址的完整链接
<meta property="og:url" content="https://www.example.com/webpage/" />
Step 5: og:description
第 5 步：og:description
Maximum 65 characters
最多 65 个字符
<meta property="og:description" content="description of your website/webpage">
Step 6: og:image
第 6 步：og:image
Image(JPG or PNG) with a size less than 300KB and minimum dimensions of 300 x 200 *
图片（JPG 或 PNG）小于 300KB，最小尺寸为 300 x 200 *
<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">
*@RichDeBourke mentioned this to me, but apparently WhatsApp has increased its maximum image size (dimensions as well as file size). I did some tests: it does not work consistently every time on every device. I tested 2.x Mb images and even that seemed to work 9/10 times. <300KB is the safest approach, but you should be fine using larger images as of 18-02-2020. I would recommend keeping the file size below 2MB, though. And definitely throw your image through TinyPNGor any other image compression algorithm if you haven't already.
*@RichDeBourke 向我提到了这一点，但显然 WhatsApp 增加了其最大图像大小（尺寸以及文件大小）。我做了一些测试：它不是每次都在每台设备上都一致地工作。我测试了 2.x Mb 图像，即使这样似乎也能工作 9/10 次。<300KB 是最安全的方法，但自 2020 年 2 月 18 日起使用更大的图像应该没问题。不过，我建议将文件大小保持在 2MB 以下。如果您还没有使用TinyPNG或任何其他图像压缩算法，请务必将您的图像扔掉。
If you completed the steps above, you can now see your preview in WhatsApp! However, be aware of the "please note"section above.
如果您完成了上述步骤，您现在可以在 WhatsApp 中看到您的预览！但是，请注意上面的“请注意”部分。
Step 7: og:type
第 7 步：og:type
In order for your object to be represented within the graph, you need to specify its type. Here's a list of the global types available: http://ogp.me/#types. You can also specify your own types.
为了在图形中表示您的对象，您需要指定其类型。以下是可用的全局类型列表：http: //ogp.me/#types。您还可以指定自己的类型。
<meta property="og:type" content="article" />
Step 8: og:locale
第 8 步：og:locale
The locale of the resource. You can also use og:locale:alternate if you have other language translations available.
资源的语言环境。如果您有其他语言翻译可用，您也可以使用 og:locale:alternate。
If you don't specify og:locale, it defaults to en_US.
如果不指定 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" />
Step 9: Twitter
第 9 步：推特
For the best Twitter support read this.
要获得最佳 Twitter 支持，请阅读此内容。
Step 10: Facebook
第 10 步：脸书
For the best Facebook support read this.
要获得最佳 Facebook 支持，请阅读此内容。
Step 11: favicon
第 11 步：图标
For the best favicon support for all browsers and devices read this.
要获得对所有浏览器和设备的最佳图标支持，请阅读此内容。
Bonus step 12: video/audio
奖励步骤 12：视频/音频
It's also possible to share audio/video. Facebook and twitter for example share videos very well. Read ogp.me.
还可以共享音频/视频。例如，Facebook 和 Twitter 可以很好地分享视频。阅读ogp.me。
回答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。
If the problem persists, read also the answer for this similar question
如果问题仍然存在，请阅读此类似问题的答案
回答by Alejandro Brasil
I guess there is no white list in whatsapp, as I found a solution that worked for me. Do as follows. insert 3 meta tags:
我想 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."/>
Your image must be in .png format and 600x600px dimension and must be named 'logo-yoursite.png' (once it worked for me JUST LIKE THAT)
您的图片必须是 .png 格式和 600x600px 尺寸，并且必须命名为“logo-yoursite.png”（一旦它对我有用，就像那样）
Dont forget to insert the link to whatsapp in your website:
不要忘记在您的网站中插入指向 whatsapp 的链接：
<a href='whatsapp://send?text=Text to send withe message: http://www.yoursite.com'>whatsApp</a>
Do this and you'll be well done!
这样做，你会做得很好！
回答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要获得完美的预览，需要完成七个步骤。
Title : Add Keyword rich title to your webpage with maximum of 65 characters.
Meta Description : Describe your web page in a maximum of 155 characters.
og:title : Maximum 35 characters.
og:url : Full link to your webpage address.
og:description : Maximum 65 characters.
og:image : Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised.
favicon : A small icon of dimensions 32 x 32 pixels.
标题：为您的网页添加关键字丰富的标题，最多 65 个字符。
元描述：以最多 155 个字符描述您的网页。
og:title ：最多 35 个字符。
og:url ：指向您网页地址的完整链接。
og:description : 最多 65 个字符。
og:image ：建议使用小于 300KB 且最小尺寸为 300 x 200 像素的图像（JPG 或 PNG）。
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.
在上面的页面中，您有所需的规格、字符限制和示例标签。觉得满意就点个赞吧。
回答by Anna Kleiner
I would like to draw attention to the fact that a simple <meta property="og:image" content="image.png" />, as suggested somewhere above, does not work for me (this in fact had me in a loop for weeks now). What works is either an absolute URL:<meta property="og:image" content="https://domainname.com/image.png" />
我想提请注意一个简单的事实<meta property="og:image" content="image.png" />，正如上面某处建议的那样，对我不起作用（这实际上让我陷入了数周的循环）。有效的是绝对 URL：<meta property="og:image" content="https://domainname.com/image.png" />
orstarting out with a slash (if the image is in the root directory):<meta property="og:image" content="/image.png" />
或以斜杠开头（如果图像在根目录中）：<meta property="og:image" content="/image.png" />
(I would have added this as a comment, but I'm not allowed to yet. Moderators feel free to move this if more appropriate.)
（我会添加这个作为评论，但我还不允许。如果更合适，版主可以随意移动它。）
回答by Kim Sant
After working in a bugg, found out that in IOS, elements in HEAD might stop the WhatsApp search of the og:image/og:description / name=description. So try first to put them on topof everything else.
在一个bugg中工作后，发现在IOS中，HEAD中的元素可能会停止WhatsApp对og:image/og:description / name=description的搜索。因此，首先尝试将它们置于其他一切之上。
This doesn't work
这不起作用
<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>
This work:
这项工作：
<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>
回答by jony89
I've been trying to do this myself as well and I've added all the right meta tags :
我自己也一直在尝试这样做，并且添加了所有正确的元标记：
<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" />
but yet could not see the image when sharing my link within WhatsApp.
但在 WhatsApp 中分享我的链接时却看不到图像。
I've discovered that WhatsApp also does some kind of caching of the image and the url info, dont know for how long.
我发现 WhatsApp 还对图片和 url 信息进行了某种缓存，不知道持续了多久。
To check that I've inserted the correct tags, I just tried different url, for example : http://domain.cominstead of http://www.domain.com.
为了检查我是否插入了正确的标签，我只是尝试了不同的 url，例如：http://domain.com而不是http://www.domain.com。
hopefully this helps to someone else.
希望这对其他人有帮助。
回答by Braconnot_P
I'd recommend always have a look at https://developers.facebook.com/tools/debug/sharingto validate your properties as Facebook often changes it's policies, compliances and API.
我建议您始终查看https://developers.facebook.com/tools/debug/sharing以验证您的属性，因为 Facebook 经常更改其政策、合规性和 API。
If you work with Messenger bots or other FB apps, you may need the property fb:app_id for link images to work in Whatsapp. More at Facebook developers webmasters site. https://developers.facebook.com/docs/sharing/webmasters
如果您使用 Messenger 机器人或其他 FB 应用程序，您可能需要属性 fb:app_id 才能在 Whatsapp 中使用链接图像。更多内容请访问 Facebook 开发者网站管理员网站。 https://developers.facebook.com/docs/sharing/webmasters
回答by jurgel
I had the same problem, here is to solve.
我有同样的问题，这里是解决。
It should be show up if you add meta og:image
如果添加 meta og:image 应该会显示
The problem is whatsapp would not show image if you type without http:// and end with / For example, it show up image and description if you type http://google.com/but not with google.com
问题是如果您输入没有 http:// 并以 / 结尾，whatsapp 将不会显示图像例如，如果您输入http://google.com/而不是 google.com ，它会显示图像和描述
Hope it helps someone.
希望它可以帮助某人。
回答by moreirapontocom
You need the following tags to get a WhatsApp image preview:
您需要以下标签才能获得 WhatsApp 图像预览：
<meta property="og:title" content="Website name" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://url.com/" />
<meta property="og:description" content="Website description" />
<meta property="og:image" content="image.png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="600" />
As Facebook docssays, if you specify the og:image size it will be fetched fastly instead of asynchronously otherwise.
正如Facebook 文档所说，如果您指定 og:image 大小，它将被快速获取而不是异步获取。
PNG is recommended for image format. 600x600 pixels at least is recommended.
建议使用 PNG 作为图像格式。建议至少 600x600 像素。
