I have recently designed a website with no img tags, only one big fat CSS sprite with everything in it. Though, when I try to publish that website on Facebook, it won't show a preview thumbnail — probably because it doesn't find any images on the markup. Any suggestions? I'd still like to keep it a super fast img-less website, nevertheless.
3 Answers
Facebook uses a proprietary link type called image_src:
<link rel="image_src" href="location/of/image" />
Just insert that in your <head> and Facebook should be able to pick up on the image.
If you're also interested, Facebook also recognizes two other rel values: audio_src and video_src. See here for more.
I would suggest this reading
How to Get Your Website Preview Thumbnail to Show Up on Facebook Share
Google is your friend :)
It all resumes to add a meta info to your code as:
<link rel="image_src" href="http://site.com/website-thumb.jpg" />
and try not to make that image more than 250px wide.
Replace your <html> tag with <html prefix="og: http://ogp.me/ns#">
Add the given meta tag inside your head tag.
<head>
<meta property="og:title" content="TITLE TO BE DISPLAYED"/>
<meta property="og:image" content="IMAGE URL"/>
<meta property="og:description" content="DESCRIPTION"/>
</head>
Title and description are optional in your case. This will work for sites utilizing open graph protocol.
