Images & SEO

    Optimizing images is becoming more and more important in SEO (Search Engine Optimization) for websites. The ALT attribute is a critical step that is often overlooked.

    This can be a lost opportunity for better rankings.

    In Google’s webmaster guidelines, they advise the use of alternative text for the images on your web site:

    Images:. Use the alt attribute to provide descriptive text. In addition, we recommend using a human-readable caption and descriptive text around the image.
    Why would they ask us to do that? The answer is simple, really; search engines have the same problem as blind users. They cannot see the images.
    Many webmasters and inexperienced or unethical SEOs abuse the use of this attribute, trying to stuff it with keywords, hoping to achieve a certain keyword density, which is not as relevant for rankings now as it once was.

    On the contrary, high keyword density can, on some search engines, trigger spam filters, which may result in a penalty for your site’s ranking. Even without such a penalty, your site’s rankings will not benefit from this tactic.This method also puts persons who use screen readers at a greater disadvantage. Screen readers are software-based tools that actually read aloud the contents of what is displayed on the screen. In browsing the web, the alt attributes of images are read aloud as well.
    Imagine listening to a paragraph of text which is followed by repetitions of many keywords. The page would be far from accessible, and, to put it bluntly, would be found quite annoying.

    What exactly is an Alt attribute?

    An ALT attribute should not be used as a description or a label for an image, though many people use it in that fashion. Though it might seem natural to assume that alternate text is a label or a description, it is not!


    The words used within an image’s alt attribute should be its text equivalent and convey the same information or serve the same purpose that the image would.
    The goal is to provide the same functional information that a visual user would see. The alt attribute text should function as a "stand in" in the event that the image itself is not available. Ask yourself this question: If you were to replace the image with the text, would most users receive the same basic information, and would it generate the same response?

    Some examples:

    • If a search button is a magnifying glass or binoculars its alt text should be ’search’ or ’find’ not ’magnifying glass’ or ’binoculars’.
    • If an image is meant to convey the literal contents of the image, then a description is appropriate.
    • If it is meant to convey data, then that data is what is appropriate.
    • If it is meant to convey the use of a function, then the function itself is what should be used.

    Some Alt Attribute Guidelines:

    • Always add alt attributes to images. Alt is mandatory for accessibility and for valid XHTML.
    • For images that play only a decorative role in the page, use an empty alt (i.e. alt="") or a CSS background image so that reading browsers do not bother users by uttering things like "spacer image".
    • Remember that it is the function of the image we are trying to convey. For instance; any button images should not include the word "button" in the alt text. They should emphasize the action performed by the button.
    • Alt text should be determined by context. The same image in a different context may need drastically different alt text.
    • Try to flow alt text with the rest of the text because that is how it will be read with adaptive technologies like screen readers. Someone listening to your page should hardly be aware that a graphic image is there.
    Please keep in mind that using an alt attribute for each image is required to meet the minimum WAI requirements, which are used as the benchmark for accessibility laws in UK and the rest of Europe. They are also required to meet "Section 508" accessibility requirements in the US. It is useful to categorize non-text content into three levels:
    • Eye-Candy
    • Mood-Setting
    • Content and Function

    Image Search Engine Optimization Tips

    Listed below are key steps in optimizing images:
    • Choose a logical file name that reinforces the keywords. You can use hyphens in the file name to isolate the keyword, but avoid to exceeding two hyphens. Avoid using underscores as a word separator, like for example "brilliant-diamonds.jpg";
    • Label the file extension. For example, if the image search engine sees a ".jpg" (JPEG) file extension, it’s going to assume that the file is a photo, and if it sees a ".gif" (GIF) file extension, it’s going to assume that it is a graphic;
    • Make sure that the text nearby the image that is relevant to that image.
    • Again, do not lose a great opportunity to help your site with your images in search engines. Use these steps to rank better on all the engines and drive more traffic to your site TODAY.

    Twitter Tweets

    Just launched Landmark Athletics' new website with @zebramats -- check out the site here http://t.co/vPmnoMeM
    Thursday, 03 May 2012 13:45
    story from @Magento - A Magical Transformation for Dan and Dave http://t.co/OCOE6QFu #magento - limited only by your imagination #possible
    Thursday, 19 April 2012 15:07
    congrats to our team on a successful launch for @Quest_Chat! http://t.co/XwdaVGjo, and Landmark Athletics coming soon...
    Wednesday, 18 April 2012 18:34
    had a powerful meeting with a new client this morning, and led a smooth training session this afternoon - what will the evening bring?
    Wednesday, 04 April 2012 20:14

    Contact MakeGoodMedia

    • (416) 621-1290
    • info@makegoodmedia.ca
    • 82 Enderby Rd. Toronto, ON Canada
    • Join Toronto Web Developers on Twitter
    • Toronto Web Developers Make in Facebook
    • Get the latest from Joomla and Magento Experts Feed
    • Magento developers
    • Joomla and Magento developers