在Telegram中的丰富链接预览中获得良好的BIG/LARGE图像

Question

我在Telegram中看到了很多或关于丰富链接预览的请求,但这是关于"如何在预览中获得大/大图像".

我们以我的网站上的这篇文章为例.它已经拥有所有OG:

<meta property="og:title" content="Questa settimana su TLI (08 dicembre 2018)" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://turbolab.it/immagini/12483/max" />
<meta property="og:url" content="https://turbolab.it/newsletter-turbolab.it-1349/questa-settimana-tli-08-dicembre-2018-1812" />
<meta property="og:description" content="Non hai tempo di leggerci tutti i giorni? nessun problema! ecco a te il riepilogo di quanto proposto da TurboLab.it nel corso della settimana in conclusione." />
<meta property="og:locale" content="it_IT" />
<meta property="og:site_name" content="turbolab.it" />

结果:链接在Telegram上发布时有效,但图像很小并且即使og:image(this)为1000 px宽也向右浮动.我想在它自己的路线上拥有它.

检查一下(第一个条目是我的网站,我要修复的网站:请注意小图片,向右浮动.第二个和第三个是我想要的结果,如YouTube视频和Mashable文章所示).

上图中使用的3个URL是:

1. https://turbolab.it/newsletter-turbolab.it-1349/questa-settimana-tli-08-dicembre-2018-1812
2. https://www.youtube.com/watch?v=y6eHY537Cao
3. https://mashable.com/article/xiaomi-48-megapixel-camera/?europe=true&utm_cid=hp-r-1#cR2kG7X_naqO

richpreview.com没有帮助,因为它在所有theree(一,二,三)上预览图像为"小" .

奇怪的是:它在Facebook上按预期工作.在那里,我得到了大而宽的图像.它在Twitter上也很完美.

我错过了什么？

Answer 1

添加 twitter 元标记为我解决了这个问题

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="{IMAGE URL}" />

Answer 2

Telegram 的预览图像基于 Twitter 共享卡标记。你漏掉了summary_large_image内容。除了已有的内容之外，您还需要添加以下内容：

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://turbolab.it/immagini/12483/max">

更新标记后，将共享链接粘贴到 Telegram 的网页机器人中，然后选择更新预览以清除 Telegram 的图像缓存并查看放大的图像。

有关详细信息，请参阅Twitter 开发人员上的大图像摘要卡。

为了使用大图像进一步丰富您的结果，您还可以创建Telegram Instant View。但请注意，即时视图仅针对 Telegram 本身选择的指定模板显示。

自定义即时视图模板示例：

# enable for items in the post section
?path: /post/.+

# define required elements
title: //*[@itemprop="headline"]
body: //*[@itemprop="articleBody"]

# if cover exists, define images
?exists: //head/meta[@property="og:image"]/@content
cover: //head/meta[@property="og:image"]/@content
image_url: $cover/self::img/@src

允许从即时视图加入您的频道的示例元标记：

<meta property="telegram_channel" content="turbolabit">

您可能会失去一些访问者指标的可见性，但您的用户将在 Telegram 中获得更好的阅读和享受您网站的体验，这会转化为品牌认知度。