如何同时插入 Facebook 和 WhatsApp 的站点预览图像？

Question

我知道如何在 HTML 的标题中使用 Open Graph 元标记。示例：

<meta property="og:type" content="website">
<meta property="og:url" content="https://sitename.com/">
<meta property="og:title" content="My blog"/>
<meta property="og:description" content="Tutorial..."/>
<meta property="og:image:secure_url" content="https://sitename.com/img/tutorial.png"/>

但是，如果一种预览图像适合 WhatsApp，那么它就不适用于 Facebook！那么应该如何同时为不同的平台设置meta标签呢？谢谢

Answer 1

您可以指定两个（或更多）Open Graph 图像，第一个是用于 FB 的矩形图像，第二个是用于 WhatsApp 的方形图像。

<meta property="og:type" content="website">
<meta property="og:url" content="https://sitename.com/">
<meta property="og:title" content="My blog"/>
<meta property="og:description" content="Tutorial..."/>
<meta property="og:image" content="https://sitename.com/img/tutorial_1200-600.png"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<meta property="og:image" content="https://sitename.com/img/tutorial_400-400.png"/>
<meta property="og:image:width" content="400"/>
<meta property="og:image:height" content="400"/>

WhatsApp 使用最后一张图片。