Apps

Best practices: Optimize web images for search engines

Ryan Boudreaux lists the best practices for optimizing graphic elements on your websites to get the best search engine attention.

Image SEO best practicesMost marketing department folks and organizational stakeholders are always hoping for optimum exposure from their websites, always looking at the scorecard and website traffic reports hoping that the page views, duration per page visit, and other metrics are showing improvement and growth. The typical well-oiled and traditional Search Engine Optimization (SEO) pursuit may seem to be chugging along as planned, but one of the most overlooked items for optimization on a website is the graphic part - made up of images, logos, icons, buttons, and graphics. This article will review the best practices for image SEO, including the types of metadata, image file naming conventions, keywords, alt image tags, and captions.

Targeting your SEO to specific audiences other than search engines include social networking and people. And lastly, several online tools and a plugin are provided that can assist you with reviewing how your website stacks up with image SEO.

All the right images

Just because you have an image on a web page does not mean it is always effective or even pertains to the focus or subject matter. While textual content titles and headlines are the first item most visitors see on your webpage, any associated images are the "eye candy" that pushes the content to the forefront. By this time you might be wondering about the blood cell image with the "Image SEO" text, and you might ask what an image of blood cells has to do with the subject at hand? Good question! Blood cells are an integral part of the human anatomy, but most people don't go around thinking about their blood cells every day. And just like blood cells, most web development folks and organizational stakeholders for that matter, don't pay much attention to the images they arrange on their web pages, but images are an integral part of the web page body that is often ignored.

If your web development team does not include a graphic artist or you just don't have the time or budget to create your own images, you can always find stock images online; just make sure you abide by the licensing requirements.

Don't forget about your icons, logos, and banners on your web pages. Often these types of images get lost in the fray as part of a template, sidebar, or widget within a Content Management System (CMS), and they only get touched when major look and feel or redesign projects are implemented. How many pages on your website do you have Twitter, Facebook, or Google+ icons/logos? Make sure you pay attention to those images also, and others like Stumble Upon, Delicious, LinkedIn, Tumbler, Digg, Google Reader, among others.

Get your image metadata

Following best practices for file naming conventions, keywords and alt tags, surrounding textual content, image captions, and image titles will help promote your images in search results.

When you viewed the image of the red blood cells above, you mostly likely instantaneously identified the subject, but no search engine or crawler spider is going to identify it more accurately than the human interface does.

The International Press Telecommunications Council (IPTC) Photo Metadata serves to describe and administrate photographs and to provide the most relevant rights related information, making visual content easily accessible by human language terms or machine readable codes. The IPTC provides a set of three standards which are the ITPC Core, ITPC Extensions, and the Information Interchange Model .

So what we need to do as web masters and developers is to help the search engine crawler by optimizing metadata with keywords and alternate text.

Image SEO best practices

Keyword image file names

Use relevant keywords for image file names, keep the file name to five words or less, and use a hyphen (-) between words without spaces. Typical files names for stock photos might be like "stock_photo-034543-med-400px image.jpg", note that this image file name has no relevance at all to the content except that the image is stock, is medium sized at 400 pixels, and it also uses a combination of underscore and hyphen, and has more than five words. A better file name example would be something like "red-blood-cells-image.jpg". Notice that the image file name is four words separated by hyphens with no spaces between. Other keywords that might fit this image depending on the associated content on the web page could be terms such as anatomy, biology, healthcare, hematology, microscopic, or plasma.

Image file types:

The best practice for image file types or image URLs are BMP, GIF, JPEG, and PNG.

Alt Text/Tags

Make sure each image has an alternate (alt) text included within the image tag, use descriptive keywords such as the examples above that pertain to the image content, and limit the alt text to five words separated by commas. An example would be <img src="i/red-blood-cells-image.jpg" alt="red, blood, cells, image, human" />.

Image directory consolidation

Maintain all images in the same sub-directory to keep them consistent within your website. Having images in multiple directories makes them harder to be found by search engines. I know this is easier said than done, especially if your website has multiple sub-topics with their own areas or directories, or on multiple web servers for that matter, but consolidate your images as much as possible to help in other ways as well.

Image anchor text

Any images that are linked from anchor text should be specifically set to incorporate the same keyword best practices. How many times have you seen a web page that has the following phrase, "Click to see the image of..." or some such variant? A better image anchor text would be something like "Click to view the image of red blood cells."

Surrounding textual content

Image placement on the web page is another important consideration and this can include caption text as well. Make sure your images are placed near the textual content which is relevant to the image itself, and ensure that the same keywords used in the alt text are sprinkled within and around the neighboring paragraphs. Of course, the keywords should have already been picked out from the original content in the first place; we just want to make sure that the same keywords are used consistently across all relevant content types.

Social networking image optimization

Want more of your images to show up on Facebook, or Digg? Each has its own image guidelines, but for the most part you always want to start with a stellar image to give your readers a reason to share them with all their peeps.

People

Use clear images with high resolution and details, also those with people's faces will capture more eye attraction, and make sure the image is relevant to the content on the page - remember consistency.

Image SEO Tools

I've listed several tools that can assist you with reviewing your image alt text and link analysis including a WordPress plugin that assists with SEO friendly images.

  • Image ALT Text Tool - Created by Patrick Sexton, who has been helping webmasters with the Google Webmaster Guidelines, this tool examines the images on your web page and tells you how well they are being "seen" by search engines like Google.
  • Image SEO Tool - A similar alternative to the alt text tool above, however, this tool will show the image in questions as it examines the images on your web page and will tell you how well they are being "seen" by search engines.
  • Image & Link Analyzer - This tool allows you to check webpages and images for size, alt text, header checks, image file path, the native size of the image file in pixels (not the display size specified in the tag), and other properties and attributes.
  • SEO Friendly Images - The WordPress optimization plugin which automatically updates all images with proper ALT and TITLE attributes. If your images do not have ALT and TITLE already set, SEO Friendly Images will add them according the options you set. Additionally this makes the post W3C/xHTML valid as well.

If you are a stakeholder within your organization or part of the web marketing team then it's time you reviewed your image SEO to see if your website needs an image overhaul. If you are a web developer how well has image SEO been implemented within your organization?

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

9 comments
hastenax
hastenax

I always try to reduce image size, page loads faster and search engines love that. I use Image Tools http://imdrops.com for that.

jebswebs
jebswebs

Sure would be nice if the folks who run this website read your article! Your red blood cell image is tagged as follows:

lehnerus2000
lehnerus2000

@EGM42 Normally there is an "Edit" link at the bottom of your previously posted comment. Sometimes you have to refresh the page before it will appear. You also have to be in the "See all comments" section. This particular page seems to be broken, as I can't even "Reply" to anyone's posts.

IT Fixt
IT Fixt

I totally agree with EGM42. Not only that but for UK based sites there is a legal requirement that they are usable by, e.g., people using screen readers. The advice given here on using ALT for SEO in the way described would arguably make a site non-compliant in that respect. Not that anyone seems to ever be even given a slap on the wrist for that, let alone prosecuted :/

EGM42
EGM42

Apparently this site edited out text that it thought was HTML. The missing "this example should be" near the end of the above post should have read, in angle brackets which I left out this time: img src=”i/red-blood-cells-image.jpg” alt=”image of human red blood cells” / (There doesn't seem to be any way to edit posts here. If I missed it, my apologies for doing this instead.)

EGM42
EGM42

Generally good ideas, but I disagree with your use of the ALT image property. The purpose of ALT is to describe an image to people who can't see it. (This is different from TITLE, whose purpose is to provide additional information for people who CAN see it. ALT text and TITLE text should never be the same.) That includes the visually impaired and those whose browsers don't display it - perhaps because they've been set to download images only on request. Any use of ALT text for SEO has to be secondary to this fundamental purpose. This example should be . That should be as good for SEO, and it's a lot better for what the purpose of ALT text is in the first place.

RJBoudreaux
RJBoudreaux

I am not sure what CMS is used by the editors here at TR, but I did mention that in the article "...images get lost in the fray as part of a template, sidebar, or widget within a Content Management System (CMS)"

RJBoudreaux
RJBoudreaux

It is true that the primary goal of alt text is to provide assistance for the impaired and for screen readers. The examples provided in this piece are best practices for leveraging SEO for your images, therefore, the key for you as a developer or stakeholder in your web development is to strike a balance between what is right for your users, and your customer requirements, and then apply what you can in the way of SEO. The only real "required by law" 508 compliance in the US is imposed for government sponsored web sites, i.e. *.gov, and I can tell you that it is a daily struggle for getting them to 100% compliance with every pixel on the page. Have you ever had the task of tagging a 38+ page PDF with graphics on every page for 508 compliance?

Editor's Picks