Having links, photos or videos in your Facebook status updates is shown to increase engagement by your fans. When there is more than just a plain text status update you are more likely to capture your audience’s attention and stand out in their news feed if you have an interesting visual element.
Facebook auto-generates a thumbnail or small image preview when you include photos or videos in your status updates. If you are linking to a webpage in your update (which you can do by simply pasting the URL into your status), Facebook will create a preview of that link to include with the status by looking on that page for a suitable title, description and image to use as the thumbnail. The title and description of the preview typically come from the page title and the first bit of content on the page. The image is pulled from anywhere on the page that Facebook thinks is a suitable image. If there are no images found on the page you are left with just text, which is not as intriguing for your fans.
You can assure that there’s always an image to include by using one of two methods: adding an “image_src” link tag to the head of your HTML document, or by including an appropriate image on the page (this can either be included to supplement the content of the page or hidden from view with a bit of CSS styling).
The syntax for adding the image_src link is:
<link rel="image_src" href="http://site.com/image.jpg" />
By including this code in your HTML header you are telling Facebook to use this, and only this, image for your page. This is useful if you want to enforce consistency when folks link to your site by having the same logo or photo associated with your links. However, the side effect here is this will restrict a user from selecting any other image on your page (if there are any available) as the thumbnail for the link.
The second option is to have an image in the body of your page somewhere, either in the content or hidden from view on the page. This allows you to have both a “default” image to use if there isn’t one available on the page, and to allow selecting a more appropriate image from the content if it is available.
If you do not want to show the image you can hide it with:
style="display: none;"
added to your HTML image tag, this will hide the image from view in the browser, but allows Facebook to still see the image and include it for use as a link thumbnail.
Bonus Tip: You can trick Facebook into having two links in one status update by pasting the URL of the first link into your status update, adding a space at the end so Facebook recognizes it as a link and adds the preview, then you can delete that URL, compose the rest of your status update, and paste in a second supplementary URL.
For our old news website (looks like this code was ripped out of our new news site) we used Facebook’s Open Graph meta tags to control which images were available. So to include an image we used:
<meta property="og:image" content="http://wvutoday.wvu.edu/theme/images/facebook_share.png"/>That way we had a default image for articles without images. If an article had images you can just write that meta tag multiple times. For example, let’s say the article had one image this would be the code:
<meta property="og:image" content="http://wvutoday.wvu.edu/theme/images/facebook_share.png"/><meta property="og:image" content="http://wvutoday.wvu.edu/article/images/article_image.png"/>
Hopefully that looks ok 🙂
Yup! good point, that definitely works too for Facebook links.
I found that the hidden image approach also works for Google+ link thumbnails…once again, lots of different means to achieve the same end 🙂