How to make Skype-friendly links (preview image tags)

Question

Sharing certain links on Skype triggers the program to show preview with image from the page. On a website I work on - there are big images on certain pages but Skype picks up the logo of the website instead. I was unable to find what meta tags would make Skype pick up the intended image and preview it.

I have a <link rel="image_src" href="http://www.example.com/path/to/img.png" /> that works for Facebook-sharing preview (img.png is used instead of the logo of the website) but doesn't work for Skype.

So how would you hint Skype which image should be used for preview?

Assistance

This is such a good question. I guess that testing is the only way... – Athodyd

Answer 1

I will need to find some source to support this, but I think that if you have defined some open graph meta data, it will pick the image specified in there. For example, I have these in one of my sites:

<meta property="og:title" content="Site Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://my.site.com" />
<meta property="og:image" content="http://my.site.com/images/thumb.png" />
<meta property="og:description" content="Site description" />

And the image displayed as the link preview on Skype is the thumb image specified in og:image (that is not available anywhere else on the page).

Fidellas

Thank you, that worked! Initially I couldn't get it right, because I had omitted og:type. The required tags are title, type, url and image and interestingly the description one was also preventing a nice preview - removing it and leaving only the 4 other resulted in Skype showing a block with image. – Assistance

Hi, does skype execute javascript? I have angular application and those fields constracted by javasctipt. – Sela

I very much doubt that, @user1315599 . Imagine the load on Skype servers if they did that! Obtaining og:image tag from static HTML is relatively cheap compared to that. – Verbify

@Sela I recommend using server side rendering for these meta tags. You could setup a rewrite rule to just redirect traffic from Skype (I think the Skype bot user agent is SkypeUriPreview) to a server side rendered version of the page. You could make this page a stripped down version that only has these meta tags. Or you could use a prerender proxy server like prerender.io. I've used these setups to share links with Facebook and Twitter. – Heaton

Thank @Alvaro, but are there any headers else that we can config for skype or facebook ? I mean is it all of them ? – Cestode

Answer 2

We are in 2021 and this Skype issue continues! :/

I communicated through Microsoft forum and several users have the same problem.

My open graph metadata is well defined, in fact the link previews fine on Facebook and Twitter, but not on Skype.

I already reported the bug to Skype, hopefully they will answer something ...

Nakamura