Image Optimization for Visual Search Results

You’ve been optimizing the text-based content of your web pages for the search engines for years now. But that’s not enough anymore. The web is growing more visual every day, with the consequence that searchers now want to be able to find images and video as easily as they can find articles and other word-based content. That means you will have to start optimizing your images. Keep reading to learn how.

There are two kinds of image optimization techniques. The first, which has been around since the web was able to display images, deals with optimization for displaying on the web.  This usually involves making the image’s file sizes as small as possible so that they render quickly in a browser across HTTP.  Slicing is often involved. 

The other kind of optimization, which has only really begun to matter since people were able to search specifically for images, deals with optimizing your images for search engine indexing. So now, in addition to all of your usual SEO practices, you also have to make sure that your images are optimized in both ways.  This is not going to get any less important either, with the emergence of new and improved search engines designed solely for images, yotophoto being an excellent example. Optimizing your images is only going to matter more.

Just as optimizing your images for easy and fast viewing over the Internet is simple, optimizing your images for SEO is not a major headache either. There are a few simple rules to follow and a little investment of time. During the course of this article, we’ll look at each aspect of an image that can be optimized.  One thing I won’t be discussing however is how to make your images render more quickly.  This is something you should have been doing already for a long time and doesn’t really come under the SEO umbrella.

{mospagebreak title=Rule Number 1: Make Use of Your HTML Attributes}

If you aren’t using the alt attribute with all of your images already, you need to stop and ask yourself why.  Alt, or alternative text defined as an attribute of the image tag, has been a requirement to meet accessibility standards for as long as there have been accessibility standards.  SEO often goes hand in hand with accessibility and nine times out of ten something that’s good for accessibility is good for SEO. Using alt text with images is no exception.

Just to clarify things for anyone that doesn’t already know, the alt attribute is used to display some text when the picture they are associated with fails to load for some reason. Reorganizing your web site’s directory structure is a prime candidate for causing this. It’s also used to display some text when the picture is not loaded at all, such as when viewed with a text-only browser or screen reader (hence the accessibility requirement).

As for the actual text content making up the alt attribute, this should primarily be something that adequately describes the picture, but should also, where possible, include the keywords for which you are optimizing your page or site.  This will raise the keyword density of the page slightly, but provided you aren’t totally squeezing every keyword possible into the page content already, this shouldn’t go against you.  I don’t need to tell you not to use alt text as a poorly disguised vehicle for keyword spamming.

Another attribute that can be put to good use here is the title text.  This is the attribute that makes a little tool-tip appear when the mouse pointer hovers over an image.  It is sometimes confused with the alt attribute, but unlike the alt text, it can be used with many other elements, not just images.  This is another place where a strategically placed keyword will help you.  Like the alt attribute, its textual content should be relevant and descriptive.

One final attribute you can make use of for SEO purposes is the longdesc attribute.  This complements the shorter alternative text with a longer description in a separate file.  The content of the longdesc attribute is normally in the form of a URL, which links to the page containing the long description.  This is one more place for you to insert a keyword if appropriate (and the page it links to is obviously prime real estate for plenty more!)

Because these attributes are primarily used within the accessibility framework that exists to make the Internet a better experience for people with low-vision, blindness or other disabilities, the use of keywords should take a back seat to relevant and informative text.  Use them to enhance your SEO where possible, but don’t use them at the expense of accessibility and definitely don’t overuse them.

{mospagebreak title=Rule Number 2: Make Use of Your File Attributes}

As well as the HTML attributes used in your mark-up code, you can also use several properties of the actual file itself for your SEO needs.  On a page displaying lots of images, each image should of course be fairly small and optimized for viewing across the Internet, but each of these images should be thumbnails that link to a larger, full size image, on a page of its own if necessary.  Bigger image files are seen as more important and tend to do better in image focused searches. 

Linking to a full-size image also has the benefit of providing us with a link tag that can be optimized as well, giving us another opportunity for keyword placement.  So the size of the image is one property, or attribute, that can be turned to our advantage and the link to the larger image is another.

The obvious choice of file attributes that we have control over is the filename.  Some people choose to match the filename with the alt attribute. While there is no reason not to do this, unless your alternative text is more than a couple of words, you have to remember that the filename is not used in any way for accessibility and is therefore fair game for some keyword placement.  This will be reflected in your HTML code in the SRC of the image tag, thereby being visible to bots and crawlers. 

Remember to always give images meaningful names, so avoid "image1.png" at all costs.  Also, don’t use spaces in an image name at all; use a hyphen instead, which most search engines will interpret as a logical space.

The last important attribute of the image file to think about is the file extension, which denotes the format of the image file.  For web images this is likely to be either .jpg, .gif or .png.  For relevancy, always ensure you use an appropriate format for the image you’re displaying; so for photographs use jpg and for logos, line drawings or other non-photographic imagery stick with gif or png.  This isn’t as important for SEO but is definitely a current best practice.

{mospagebreak title=Rule Number 3: General Presentation}

Try to avoid setting images using CSS or JavaScript if SEO is an important factor.  When using images as part of the content of your site always embed them directly on the page with a standard HTML image tag. If your image is set dynamically with either CSS or JavaScript, the spiders indexing your site will not know that the image is there and it will therefore be impossible for them to index and pointless for you to optimize.  This obviously doesn’t apply for images that are used in your site that don’t form part of the page content, things like roll-overs in a navigation menu for example, or heading images.

You should also make sure that the image has appropriate and relevant text in the near vicinity, especially on pages with a lot of images on them.  Crawlers will also look at the elements surrounding an image, so a nice block of descriptive text, in addition to a linked full-size image and perhaps a caption, will ensure that the search engines know what the picture represents.

The directory structure, or folder hierarchy, of your web site is also important if your want your images indexed by the search engines. First of all, make sure the folder or folders that your images reside in on the web server is accessible to bots and spiders.  Make sure a permissions entry or robots.txt file is not obstructing them in any way, and try not to make the paths to the files too deep.  Something like www/mysite/images is going to be more accessible than www/mysite/content/images/products/cameras/Kodak/8mp/ for example.

To Conclude

I’m sure it goes without saying that the page your optimized image is being used on has also been optimized for search engines, but if it’s not then it should be as all of your efforts optimizing the image will be wasted.  Optimizing images is almost always secondary to optimizing that actual content on the site itself, and why go to the trouble of optimizing images on a poorly optimized site?

If your image appears high in the SERPs for an image search, this will often lead to a visit to your site from the searcher and forms another route into your site from targeted traffic, so having your images rank well in image SERPs can only be a positive thing for your site.  Optimizing images needs only a little thought and preparation. By applying the rules as the image is created you can save yourself time and effort later on, so follow these simple rules to keep your images in favor with the search engines and your visitors.

[gp-comments width="770" linklove="off" ]