Question

我在Telegram中看到了很多有关富链接预览的信息或要求，但这特别是关于“如何在预览中获取 BIG / LARGE 图片”。

以我的网站上的this article为例。它已经具有所有OG：

<div className="d-flex flex-row">
    <div >
        <h3><strong>"Title"</strong> </h3>
        <Button color="primary" className="mr-xs">
         <i className="fa fa-check mr-xs mb-xs" />Edit
        </Button>
    </div>
</div>

结果：当链接发布到Telegram上时，它会起作用，但图像很小且向右浮动，即使og：image（this）的宽度为1000 px。我想在自己的生产线上把它做大。

检查一下（第一个条目是我的网站，我要修复的那个：请注意小图，向右浮动。第二个和第三个是我想要的结果，如YouTube视频和Mashable文章所示）。

上图中使用的3个URL是：

richpreview.com没有帮助，因为它在所有三个（one，two，three）上将图像预览为“小”。

奇怪的是：它在Facebook上按预期工作。 There，我得到大而宽的图像。 on Twitter也是完美的。

我想念什么？

Answer 1

我想念什么？

为了获得最好的电报体验，您应该创建一个Telegram Instant View。

示例即时视图模板：

# 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中更好地阅读和欣赏您的网站，并且应该可以带来更多的回头客。

Answer 2

添加twitter meta标签为我解决了该问题

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

Answer 3

您的 html 标记中缺少开放图谱协议 prefix-属性：

<html prefix="og: http://ogp.me/ns#">

在 ogp.me 上了解有关开放图谱协议的更多信息。

在Telegram中通过丰富的链接预览获得高质量的大/大图像

3 个答案: