2

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

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.

2

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.

1
  • Indeed it is. :)
    – John Conde
    Feb 17 '11 at 15:16
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.