Website Image Usability and SEO Best Practices

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.

Website Image Usability & SEO Best Practices - Keyword Rich Image Filename Example

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:

Website Image Usability & SEO Best Practices - Alt Text Example Images On

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

Website Image Usability & SEO Best Practices - Alt Text Example - Images 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:

Website Image Usability & SEO Best Practices - Image Title Attribute Example

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.

Website Image Usability & SEO Best Practices - Image Alt and Title Attributes in WordPress

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.

Website Image Usability & SEO Best Practices - Image Caption Example

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.

Website Image Usability & SEO Best Practices - WordPress Forced Link Example

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.

Website Image Usability & SEO Best Practices - Eliminating Image Link in WordPress

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.

Website Image Usability & SEO Best Practices - Image Title For Links

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:

  • http://jholmberg.com/ Johannes Holmberg

    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.

    • http://twitter.com/Biquitous Chris Fernandez

       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.

  • http://lukemcgrath.me/ Luke McGrath

    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.”

    • http://twitter.com/Biquitous Chris Fernandez

       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.

      Again, thanks for the discussion and bringing up some awesome points!

      • http://lukemcgrath.me/ Luke McGrath

        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.

        Please see this page: ‘Opening new windows and tabs from a link only when necessary’: http://www.w3.org/TR/WCAG20-TECHS/G200.html

        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.

        • http://twitter.com/Biquitous Chris Fernandez

          Hi Luke,

          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!

          • http://bloggedtips.blogspot.com/ Suzanne Sholer

            Excellent article. Often I meet people who do not know how to use the back button, nor how to choose to open a new tab. The computer knowledge level of your reader might determine which option to use.

  • Pingback: Usability, SEO And The Modern Day Internet Marketing Professional | Usability GeekUsability Geek

  • http://kizi-friv.kizi2.com/ kizi friv

    This is one of the best articles Ive ever read. Youve got some mad skill here, man. I just hope that you dont lose your style because youre definitely one of the coolest authors out there.

  • http://webenso.com Kathy Alice

    Thanks for pointing out the irritating “feature” that WordPress has of setting up a default link for your images. I agree there is usually no SEO benefit and it is annoying to users.

  • Pingback: 5 Quick Ways To Improve Your Website’s Usability | Ranign.com

  • Pingback: Tweet-Parade (no.21 May 2012) - The Best Articles of Last Week | gonzoblog

  • http://www.exceladvise.com mariah carey

    Great post! I am actually getting ready to across this information,that is Very helpful to re_build our Imges with right way.Specially In wordpress ON- Page with imges.

  • Pingback: 5 Ways To Make Your Business Website User Friendly - Usability Geek