eqb eqb -4 years ago 87
HTML Question

How does facebook obtain URL metadata to display as preview in shared links?

I just noticed a shared link on facebook whose preview had an image that was not contained on the page itself (at least not visibly). So I'm wondering -- is there any way of specifying what images can be shown in the thumbnail/preview when a link is shared using HTML code?

The only way I can think of doing this would be to have a 0px image on the page that can be used in the preview. Is this what's usually done?

Answer Source

This can be achieved using facebook open graph meta tags: http://swarminglabs.com/facebook-open-graph-meta-tags/

<meta property="og:title" content="Awesome, Inc. – We're even more awesome.">
<meta property="og:description" content="Awesome's mission is to take cool to a whole new level.">
<meta property="og:image" content="http://YOURWEBSITE.com/YOURIMAGE.png">
<meta property="og:image:secure_url" content="https://YOURWEBSITE.com/YOURIMAGE.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1500">
<meta property="og:image:height" content="1500">

Making use of the og:image meta tags will change the image to what you want.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download