Discord HTML META 标签大和缩略图像图像

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

如果您希望以大格式显示图像，您必须提供 Twitter 元标记

我只使用 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

twitter:image

URL of image to use in the card. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.twitter:image

URL of image to use in the card. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.

Facebook 建议打开图的图片尺寸为 1200x630

Discord HTML META 标签大和缩略图像图像

Discord HTML META Tags Big and Thumbnail like image

html

meta