如何同时插入 Facebook 和 WhatsApp 的站点预览图像?
How to insert site preview image for Facebook AND WhatsApp simultaneously?
我知道如何在 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标签呢?谢谢
您可以指定两个(或更多)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 使用最后一张图片。
我知道如何在 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标签呢?谢谢
您可以指定两个(或更多)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 使用最后一张图片。