1

Our support pages contains link to our videos on youtube with additional instructions. I've a requirement that when a link to our support pages are shared, the thumbnail should be displayed. i.e., link is to our website, but the thumbnail should be from our youtube video. The share can happen on social sites or email, etc. I've tried sending sharable link and something like below, but it does not work:

<a href="https://www.mycomurl:4200/sharablelinks/448fe88f"> <img src="https://i.ytimg.com/vi/f3Synm4U4Uk/hqdefault.jpg""> </a>

How does youtube do that? When you share their sharable link, the thumbnail and video button shows up. It is almost like the receiver(WhatsApp/telegram/etc) sends a get request to youtube to get the thumbnail upon receiving the YouTube link and display that.

arun
  • 13
  • 2
  • Does this answer your question? [How do I get a YouTube video thumbnail from the YouTube API?](https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api) – Titulum Sep 16 '20 at 06:43
  • No. I know how to get thumbnail for youtube video. Our support pages already embeds them. What I want to know is, when I provide a sharable link to my webpage, I would like to show the thumbnail from Youtube, but when it is clicked, it should come to my web page. – arun Sep 16 '20 at 06:58
  • The thing you see on whatsapp/telegram/etc is exactly what you guessed. The client will recognize the link and ask the service for preview-infos like a thumbnail and title etc. And this is what you need. A script that looks out for all sharablelinks and adds the respective image. – lupz Sep 16 '20 at 07:15
  • In your code there is a superfluous doublequote closing the image `src` attribute. Also, images need an `alt`-attribute. – lupz Sep 16 '20 at 07:19

1 Answers1

1

You can't always control how a third-party client displays a link to your website, but a standard way of doing this is via the Open Graph protocol. This allows your website to contain metadata that robots can use to categorize your website and add metadata to links.

To tell a robot which image to show with your link, you can use the og:image tag, like so:

<meta property="og:image" content="https://c7.uihere.com/files/293/500/890/adorable-animal-cat-cute-thumb.jpg" />

Along with the thumnail you can add a lot of other metadata, such as a title and a description:

<meta property="og:title" content="Your link title" />
<meta property="og:description" content="Some description of your webpage" />
Titulum
  • 9,928
  • 11
  • 41
  • 79
  • Implemented this. Well almost there.. Ran into trouble. Please see https://stackoverflow.com/questions/63964785/open-graph-message-upon-click-does-not-go-to-url-specified-in-ogurl. – arun Sep 19 '20 at 21:49