用于缩略图嵌入图像的不和谐HTML meta标签

uoifb46i  于 2023-05-12  发布在  其他
关注(0)|答案(2)|浏览(82)

我正在尝试优化我的<meta>标签,以便在Discord等社交媒体上正常工作。
到目前为止我得到了什么:

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

这将显示一个大的图像不和谐,但我需要一个缩略图大小的图像太。

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

这是缩略图。
如何使用<meta>标签获得大图像和缩略图?

eqqqjvef

eqqqjvef1#

对于社交媒体嵌入,您可以设置图像的特定宽度和高度,以便使用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">
9lowa7mx

9lowa7mx2#

如果你想让图片以大格式显示,你必须提供twitter的 meta标签
我尝试了另一个答案中的例子,只使用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:卡,所以我尝试包括它,现在我的链接显示大缩略图,而不仅仅是小图标.

<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。图像大小必须小于5MB。支持JPG、PNG、WEBP和GIF格式。将只使用动画GIF的第一帧。不支持SVG。twitter:image
要在卡中使用的图像的URL。图像大小必须小于5MB。支持JPG、PNG、WEBP和GIF格式。将只使用动画GIF的第一帧。不支持SVG。
Facebook建议开放图形的图像大小为1200x630

相关问题