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

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).

enter image description here

The 3 URLs used in the image above are:

  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 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?

htmltelegramfacebook-opengraph


Solution 1:[1]

Adding twitter meta tags fixed the issue for me

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

Solution 2:[2]

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.

Solution 3:[3]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 adriaan

Related Questions