A picture is worth a thousand words. Unfortunately, when it comes to major search engines (which are still primarily text-based), a picture is worth a lot of blank space. Does this mean you shouldn't use images on your site if you want to rank in search? Not at all. Just keep some simple things in mind when adding those images to your pages. As a bonus, these tips help not only with seach engine robots, but with Jane as well! You want your site to be accessible in screen readers, to those who have images turned off in their browsers, and to those who have slow connections or are on mobile browsers and may have trouble loading images.

By providing search engine robots with textual information about the images on your site, your site can benefit not only from better placement in web search results, but in image search results also. Image Seach can provide substantial search traffic, so don't overlook this as an acquisition channel.

Below are recommendations for using images effectively for both Jane and search engine robots. 

Don't put text in images

Put text in straight HTML whenever possible. Sometimes web designers like to put text in images because they can use a wider variety of fonts and can manipulate the design more freely. Much of this styling can be done with CSS and in cases where it can't, the extra design a graphical version of the text provides may not really add visitor value. In fact, it may detract from usability because it may be difficult to read. It also may hurt viral efforts since it can't be copied and pasted. If I want to send an email to all of my friends suggesting we all go to a hot new restaurant, I may want to copy and paste a few menu items from the restaurant's web site to send to them. If the menu is in an image, I can't do that.

Use the ALT attribute

The most well-known method for making images accessible is effective use the ALT attribute in the IMG element. And yet it's very common to find empty ALT tags all over the web.

<img src="/images/lavender-plant.jpg" alt="Picture of a lavender plant">

• Make the text in the ALT tag descriptive. It should describe the image concisely. Think of someone browsing your site with a screen reader. How will they want the image presented?

• Don't stuff the ALT tag with keywords. A long ALT attribute, full of keywords your want to rank for looks spammy to both your visitors and to search engines and may make both devalue your content. How can you tell if your ALT text is spammy or simply descriptive? It's a judgment call, but if you can't tell, get some objective opinions. ALT="buy cheap viagra now cheap viagra online get viagra here" is probably going to be pretty obviously spammy to anyone you ask.

• Make the ALT text relevant to the image. Use the ALT text to describe the image, not as a place to add descriptive text abou the page that isn't directly relevant to the image. For instance, if the image is of a car, your ALT text should be something like "blue mini cooper" not "cheapcars.com has cheap cars available in every make and model including mini coopers, volkswagons, and Ferraris like Magnum PI used to drive".

What about the TITLE attribute? It likely doesn't provide direct search engine value, although it may be useful for your visitors.

Make image filenames descriptive

If possible, describe the image in name of the image file. For instance, lavender-plant.jpg is better than image123.jpg. If you are importing a lot of images, for instance, for a product database, it may be problematic to manually name each file. In this case, find programmatic ways to rename the images using text from how the images are tagged or categorized. If your filename includes multiple words, use hyphens to separate them (search engines tend to see a hyphen as a separator and an underscore as a joiner (so lavendar_plant would be seen as one word and lavender-plant would be seen as two).

Use image captions

Provide a caption below or above the image that describes what it's about and gives context for how it relates to the rest of the page.

Provide textual clues around the image

Try to include text around the image that relates to what the image is about. Text on the page helps seach engines know what the page itself is about, which helps the page rank for relevant queries, but text near images can help those images rank in image search results as well.

Be cautious about using images for navigational links

If you use images in menus and other navigation, make sure that you use ALT text that replicates how the image represents that menu option. But also test the implementation by turning off images in your browser and making sure the links still work. Some implementations incorrectly require images to be enabled, causing search engine robots to be unable to follow those links.

Another potential usability issue with images and navigation is that if you use a textual link combined with a background image, the text may disappear if the image doesn't load. (This issue can happen with this type of design in places other than menus, but that scenario is where it can be commonly seen.)

Navigational Link With Images Enabled	Navigational Link with Images Disabled

Be cautious about using images for headings and logos

Many web sites use an image for the header of the page or for the company logo. This implementation works well, but be sure that you replicate the company name, heading text, or other words from that image in the ALT text.

• If you have an image as the page's H1 tag, keep in mind that the H1 is one of the most important clues for a search engine to determine what the page is about, so consider using text instead of an image or at least using descriptive ALT text. In the example below, the code is using CSS to display an image of the company logo as the H1 tag. A better implementation would be to display the image in the header of the page, and use the H1 tag to provide visitors and search engines description information about the page.

							<h1 class="home-logo">Company Name</h1>																				
	

The CSS for this implementation positions the text at -999em. This is not recommended both because it means that when a visitor loads the page with images turned off, the text can't be seen (and so the heading space is simply blank) and because search engines may find the practice deceptive (the text is hidden).

							.home-logo {	background:transparent url(/images/logo1.gif)	no-repeat scroll center top;	height:63px;	margin-top:35px;	text-indent:-99999em;	}		
	

• If your header includes an image of your company logo, avoid commonly used ALT text such as "home" or "logo". Instead, succinctly describe your company or home page (using either the company name or a brief description of the site). (Also, avoid naming your company logo something like logo.jpg.)

• If your site includes a header that consists entirely of a large image, test the layout of the page with images turned off. In some cases, the result can be a large area of white space that pushes all content below the fold. In the example below, all company information and details about the site are lost without the header image.

  

   

Block Non-Content Images

If you use a lot of non-content images (for instance, arrows, bullets, and boxes), you likely don't want those indexed. Since search engine robots spend limited time crawling each site, it may make sense to block them from crawling these types of images so they can spend all the available resources on the pages and images you do want indexed. As a bonus, if you want to provide an image search on your site (for instance, using the Live Search API), if only content images are indexed, then the image results will be more useful for your visitors.

A good way to block non-content images is to place them in a separate folder from your content images and then block that folder using robots.txt. For instance, if you place these images in a folder called no_index_images, your robots.txt file would contain:

User-agent: *

Disallow: /no_index_images/

Opt-in to Google's Image Labeler

In Google's Webmaster Tools, you can opt your images into their Image Labeler. This enables others on the web to tag your images, which in turn provides Google with additional details about what the images are about and can help them rank for a wider variety of queries in Google Image Search.

Images can be search engine and user friendly

With a little planning and good structure, you can effectively use images on your site in ways that benefit both Jane and robots. And by optimizing images in the ways described in this article, you may also be able to tap into an additional acquisition channel - image search.