用于缩略图嵌入图像的 Discord HTML 元标记

Question

我正在尝试优化我的

<meta>

标签以在 Discord 等社交媒体上正常工作。

到目前为止我得到了什么：

<meta name="twitter:card" content="summary_large_image">
<meta property="og:image" content="URL">

这将在 discord 上显示大图像，但我也需要缩略图大小的图像。

<meta property="og:image" content="URL">

这将是缩略图。

如何使用

<meta>

标签获得大图和缩略图？

Answer 1

对于社交媒体嵌入，您可以设置图像的特定宽度和高度，以便使用

og:image

属性相应地显示。

<meta property="og:image" content="path_to_image.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="250">
<meta property="og:image:height" content="250">

您还可以使用

theme-color

属性为某些平台设置要显示的颜色，例如 Discord。

<meta name="theme-color" content="#FFFFFF">

Answer 2

如果你想以大格式显示图像，你必须提供推特元标签

我只使用 openGraph 标签尝试了另一个答案中的示例，但这是结果：

<meta property="og:title" content="Hello World">
<meta property="og:description" content="Lorem ipsum sit dolor">
<meta property="og:type" content="article">
<meta property="og:url" content="https://www.example.com/hello-world">
<meta property="og:image" content="https://www.example.com/hello-world/thumbnail.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

你可以看到只显示了一个小图标，但在检查其他显示大缩略图的网站后，我看到它们包含 twitter:card，所以我尝试包含它，现在我的链接显示大缩略图而不仅仅是小图标.

<meta name="twitter:site" content="@twitter_handle">
<meta name="twitter:title" content="Hello World">
<meta name="twitter:description" content="Lorem ipsum sit dolor">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image:src" content="https://www.example.com/hello-world/thumbnail.png">

如此完整的例子：

<meta property="og:title" content="Hello World">
<meta property="og:description" content="Lorem ipsum sit dolor">
<meta property="og:type" content="article">
<meta property="og:url" content="https://www.example.com/hello-world">
<meta property="og:image" content="https://www.example.com/hello-world/thumbnail.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:site" content="My Website">
<meta name="twitter:title" content="Hello World">
<meta name="twitter:description" content="Lorem ipsum sit dolor">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image:src" content="https://www.example.com/hello-world/thumbnail.png">
<meta name="theme-color" content="#FD0054">

https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup

推特：图片

要在卡片中使用的图片 URL。图片的大小必须小于 5MB。 支持 JPG、PNG、WEBP 和 GIF 格式。只有第一帧 将使用动画 GIF。不支持 SVG.twitter:image

要在卡片中使用的图片 URL。图片的大小必须小于 5MB。 支持 JPG、PNG、WEBP 和 GIF 格式。只有第一帧 将使用动画 GIF。不支持 SVG。

Facebook 推荐打开图的图片尺寸为 1200x630