Website Image Usability and SEO Best Practices

There is often a fine line between usability and Search Engine Optimization (SEO). Usability folks often moan and groan when the SEO team shows up because their recommendations and “best practices” are often at odds with each other. Fortunately, when it comes to website image usability and SEO best practices, both sides of the table get what they want – images that look and function great, with a subtle nod to what makes them valuable to search engines.

Here are specific strategies and best practices for ensuring that your images are seen for not only the eye candy they’re supposed to be, but also for the often overlooked search engine juice they can give you.

Image Filename

Before you upload images to your website, make sure you save them with a filename that is descriptive and helpful using keyword rich text appropriate for the content of the page it will be on.

In the case of header or other site wide graphics, create a filename that represents the purpose of the graphic; for instance: my-company-logo.jpg

Search engines utilize an image’s filename as a way of determining what that image is about and in turn, to determine what your page is about.

Naming images appropriately will allow you to not only find them quickly and easily, but also give you valuable SEO juice.

Image Alternate (Alt) Text

After an image has been uploaded, you now need to make sure that you ALWAYS include the alternate text (Alt) attribute for the image.

While a carryover from the dark ages of web browsing when some would turn off image loading for faster web surfing, the alternate image text is still used by the visually impaired to help determine what an image is about, and just as importantly for you, by search engines for the same purpose.

Here’s an example with images turned on:

Here’s what you would see with image loading turned off:

When writing the Alt text description, make sure it tells the user and search engines what that image is about, using appropriate keyword rich text. Make sure that EACH image has a DIFFERENT Alt text!

You should use Capital Letters at the beginning of each word for the Alt attribute for aesthetics.

Image Title Attribute

An often overlooked SEO and usability strategy is to use the “title” attribute for images.

This is the text that appears when you roll over, or hover over, an image:

This information helps users AND search engines further differentiate what your image and page is about.

You should use different image title text than your Alt text if appropriate and also make sure that the image title is DIFFERENT for every image.

Finally, you should again use Capital Letters at the beginning of each word for the image title attribute for aesthetics.

Image Captions

Image captions are powerful ways to further explain an image, add commentary or provide context.

Search engines look at image captions to glean more information about what your page is about while human visitors see captions below images.

Creating an image caption is not something you have to do, but should be used if an image needs further explanation or context within your post.

Also, if you do use image captions, make sure they are DIFFERENT than your image Alt and Title text so that you don’t get penalized for keyword stuffing, but do make them appropriate to your page’s theme and keywords.

Image Links

There are a couple of usability and SEO considerations for links when it comes to images.

The first and most important is a “bug” that WordPress initiates when you upload an image and insert it into your content.

WordPress defaults to inserting the image into your page with a link to ANOTHER page with the exact same image on it – why I have no idea!

This is a BIG problem for SEO purposes because you are losing valuable link authority by linking to another page with essentially no value to it.

It’s also a BIG usability problem because if a user happens to click on the image, they get taken to another page with the same image on it with no new content.

This then increases the user’s chances of getting annoyed, leaving your page and NOT pressing the “back” button to finish reading your content.

When you upload and insert an image, make sure you click “NONE” next to “Link URL” field in WordPress, UNLESS you are scaling the image because it was too big to fit and needed its own page.

In that case, make sure you include a caption underneath the image that specifically TELLS the user to “click on image to enlarge” or else they won’t know they have the ability to do so.

Finally, if your image links to another website, or a larger image, make sure you update the image title text to indicate where clicking on the image will take the user when they hover over it.

Then make sure that your image opens a new window if it is pointing to a different website so that the user won’t leave your page.

Bottom Line

Most websites completely overlook the value of images for SEO – and more importantly, usability.

With these best practices, your users will not only enjoy great looking images that work seamlessly, but search engines will also be happy because your images were properly optimized for crawling, indexing and in turn, help them determine the general intent of the page.

For more usability and SEO best practices, we recommend the following articles:

Share This Post

About Chris Fernandez

Chris Fernandez is the Founder and CEO of Biquitous – an Internet Marketing and Consulting Services Firm with a proven track record of driving sales, increasing market share and turning a company’s entire online presence into an asset that continuously churns out positive cash flow. You can follow Chris on Twitter: @Biquitous and read his latest Internet marketing strategies and commentary on the Biquitous blog.

A lot of good advices here but I don’t agree at all that the link should open in a new window if the URL points to a different site. That is bad usability. It’s not up to the creator of a website to decide if a link should open in a new window or not. It’s up to the user. This is just a bad and old way to desperately try to hang onto the user. I always, always, always expect the links I’m clicking to open in the same tab. I’m so frustrated every time it doesn’t and breaks the standard behavior of the back button. Stop breaking the web. Please.

Hello @jholmberg:disqus Thanks for the feedback, and I enjoy hearing other perspectives.

I think that as users we see things differently — and especially as business owners.

Whenever I surf the web and there are imbedded links in a post that I want to continue reading, I want nothing more than to open those links in either new tabs and/or a new window as I want to continue my place on the current page and keep reading the post I was originally reading.

As such, for usability, allowing the user this option — opening in a new window automatically for convenience or they can press the “control” or other button to get it to open in a new tab themselves — allows for fluidity and doesn’t break the reading experience.

Others may disagree, but this is my experience and usability best practice, but I again thank you for bringing another viewpoint to the discussion.

I have a few issue with this advice, most importantly the suggestion to open in a new window – open in the same window, that’s what the back button is for. Holding on to a user who doesn’t want to be on your site any longer just artificially inflates your “time on site” analytics. Above that, it’s bad usability, as @jholmberg:disqus says.

Could you explain why you suggest Capital Letters For Alt And Title? I’ve never heard that before. I can’t see how this helps, it just makes the sentence harder to read – nigh on impossible for someone with reading difficulites.

Lastly, titles. They’re so poorly supported across browsers that a wise lady once said to me: “If you wan’t something to be accessible, don’t put in in a title attribute.”

Hi Luke — regarding the “holding hostage” and analytics reasons for opening a new window, I explained myself in the above comment.

As to the Capital Letters — this is a personal preference, and something that I have found is more elegant, and clean than lower case.

The Upper Case allows someone to scan the text more easily and glean what it is about as opposed to making it like regular text.

Again, this is not set in stone, please feel free to do as you like on your own or client’s websites, but for a cleaner aesthetic this is something I much prefer, especially when mousing over an image.

Finally, regarding titles, they do not hurt and only take an extra 10 seconds to create and could add value to both the user and search engines.

There is no harm in creating them, and the slight chance that they help with SEO — and more than likely, user appreciation for explaining the image, where the images is about to go (if I click on it) and other considerations.

Chris, I can’t agree with you here. By opening new tabs you are not “allowing this option” for users, you are forcing the option. As you say, users can open links in new tabs by holding control when clicking on a link. Saying this is “usability best practice” is not evidence, it is incorrect.

which states: ” In general, it is better not to open new windows and tabs since they
can be disorienting for people, especially people who have difficulty
perceiving visual content”.

As for capital letters, it is not a case of ease of scanning or cleanliness it is readability. Users expect sentences to conform to grammatical norms, more so when the user in question is cognitively disabled. Reading ease is vital for many disabled (and regular) users and should not be contorted.

I don’t agree with your approach to titles but will conceed that it is a much more contentious area. The others, I believe, are wrong.

I guess as the saying goes “we’ll have to agree to disagree” at this point.

Opening new windows is nothing malicious or contentious to me, it is a practice to allow the user to see the link you want, while also staying on the same page/place as they were before without having to pres the “back” button on their browser.

It’s convenience, nothing more.

Capital Letters For A Sentence Just Looks Better.

It’s why it is a best practice for virtually all ads (AdWords, LinkedIn, et. al), but again, that’s your own preference.

It’s good to discuss this and have an open dialogue about it, so thanks for that again!

Chris, I have been researching SEO tips for my clients to build
their image libraries and fill in all of the pertinent meta data as you have
mentioned. From your post, it appears that you use a Mac. My clients are
Windows-based. I have noticed that not all of the file properties upload to my
media library (e.g. alt text and caption). I also have just switched to the
Genesis framework. May I ask how you add file properties (which program do you
use or would recommend for a PC) to your image libraries before you upload them?
It appears that Adobe Lightbox would be a great choice unless WordPress does not
import the alt text and captions.

This is a task I have left to my client
and I am in the process of building a cheat sheet for SEO labeling of images,
which is also helpful in placing them in documents and presentations. Your
advice fits the best practices that I have found so far.