Obtain a good, BIG/LARGE image in rich link preview in Telegram

Asked 8/12, 2018 at 18:50 Answered 16/1, 2021 at 20:13

I saw a lot or request about rich link preview in Telegram, but this is specifically about "how to get a BIG/LARGE image" in the preview.

Let's take this article on my site as example. It already has all of the OGs:

<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" />

Result: it works when the link is posted on Telegram, but the image is small and floated right even if the og:image (this) is 1000 px wide. I'd like to have it big, on it's own line.

Check this out (first entry is my site, the one I want to fix: note the small image, floated right. 2nd and 3rd is the result I want as shown by a YouTube video and a Mashable article).

The 3 URLs used in the image above are:

richpreview.com isn't helpful, because it preview the image as "small" on all of the theree (one, two, three).

Strange thing is: it works as expected on Facebook. There, I get big, wide images. It's perfect on Twitter too.

What am I missing?

Servant answered 8/12, 2018 at 18:50 Comment(0)

Adding twitter meta tags fixed the issue for me

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

Earmark answered 30/4, 2019 at 16:11 Comment(4)

Don't know why telegram uses twitter tags. Anyway, here is the twitter docs developer.twitter.com/en/docs/tweets/optimize-with-cards/… – Taneka 1/4, 2020 at 1:47

This is still true as of this comment's date. – Escalate 11/8, 2020 at 17:42

It's possible that they only use those when <html prefix="og: http://ogp.me/ns#"> is added to your page. – Nina 16/1, 2021 at 20:10

Pay attention to summary_large_image. It is very important here. – Ernestinaernestine 24/1, 2021 at 14:47

Telegram bases its preview images on Twitter sharing cards markup. You're missing the summary_large_image content. You need to add the following in addition to what you have:

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

Once you've updated your markup, paste the share link in to Telegram's Webpage Bot and choose Update Preview to clear Telegram's image cache and view the enlarged image.

Consult Summary Card with Large Image on Twitter Developers for more info.

To further enrich your results with large images you could also create a Telegram Instant View. Note however Instant Views only appear for designated templates chosen by Telegram itself.

Example custom Instant View Template:

# 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

Example meta tag for to allow joins to your channel from the Instant View:

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

You may lose some visibility of your visitor metrics but your users will have a better experience reading and enjoying your site from within Telegram which translates into brand recognition.

Astarte answered 26/1, 2019 at 7:22 Comment(0)

You're missing the Open Graph protocol prefix-attribute in your html tag:

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

Learn more about the Open Graph protocol at ogp.me.

Nina answered 16/1, 2021 at 20:13 Comment(0)

Recommended topics

Hot tags