Facebook (and other sites!) have a link feature that allows users to share content with one another. This feature, usually called something like Share or Add This, loads a graphic from the site to go along with the link. Due to a couple factors, not all sites will load an image preview. In addition to having the most loaded title of all time, this article also contains the steps to ensure your website will pull up a Share Preview image.
Step 1. Before you go through every single page of your site adding code and making images, check to make sure you don’t already have a good image with Share Preview. Head over to Facebook, attempt to share a link and see what comes up. If you don’t get an image (or at least not one you’d like) then continue on.
Step 2. Find an image you want to use to represent your site. You could use a logo, an image from the site, or even a screenshot. Assuming you just want people to know how awesome your site would look in their browser, take a screenshot of your website. You can do this using the print screen button, Shift+Command+3 on a Mac, or some free screenshot software.
Step 3. Before you upload the screenshot, use some image software to crop and edit it just the way you want it to look on the site. For loading purposes, I’d shink it down to 250px wide or less and compress it.
Step 4. Upload the image. It’s best if you upload it to the actual website you’re generating a preview for. While it maybe work on another service like Flickr or Photobucket, some times won’t load an off-site image preview.
Step 5. Add a image source meta tag to the head of your document. The tag looks like this: Make sure you change the href to where the image is hosted, using the full URL. In order to get Share Preview and other features to read the image correctly, you need to make sure it’s between and in your html. It also helps to have the meta tags “title” and “description”.
- Facebook caches the preview images, so if you recently tried to generate a preview and you’re still not having luck try using another address (http://site.com/index.html instead of http://site.com)
- Forwarding seems to get in the way of the preview. If you forward your domain, try using the actual address it points to instead.
- Adding an img_src share preview image may take away the ability to let users select from various images when sharing your site. This code will tell certain sites which image to chose rather than giving the user some options.