Image SEO with IMG Tag

image-SEO-img-tag

Almost all SEO professionals admit that the IMG element is important for search engines, at least to a certain degree. If your website is selling image stocks, then it’s crucial. But since almost all web sites depend more or less on images,  optimizing them for search engines (and humans) seems logic.

The purpose of this article is to describe some SEO techniques that can be used to improve image crawling, indexing and ranking.

We’ll start with a very minimalistic sample IMG element, as seen below, and at the end of the article we’ll end up with a highly SEO friendly tag. Bear with me, it’s a long (but useful too, I hope) article.

<img src=”0012adsds.gif” />

Unfortunately lots of designers and/or programmers stop with the minimum implementation of this tag.

How do search engine understand images?

Here are some signals used by search engines to read, understand, categorize and rank images:

- Colors, size and image resolution

- Image “bucketing”: is the image a face, photo, drawing or a clip art?

- Weighting text by its distance from an image and extracting context from text around them

- Overall theme of the website (i.e. adult websites will have all images labeled as “adult” and filtered)

- ALT attribute (alt content influences rankings) and TITLE attribute (doesn’t influence rankings, but provide additional context)

- Image file names

- Total number of thumbnail images that are located on the same webpage as the ranked image

- image tagging on third party photo sharing websites like panoramio.com or flickr.com

- Possible OCR of the web pages (see article Google Instant Previews, OCR, Page Segmentation and SEO)

As you can see there’s plenty of things search engines have to take into consideration when crawling images, and the above is not even the complete list.

A Microsoft patent that describes how images are ranked can be found here.

So, let’s go into the real tips, starting with the well known ALT attribute, and then continuing with more advanced stuff, like image EXIF meta data or dedicated landing pages for each image.

Always add the ALT attribute to the IMG tag

Just by simply adding the ALT text you will provide search engines more information about the content of the image and improve your chances of that image being indexed in Google Images:

<img src=”0012adsds.gif” alt=”yellow t-shirt” />

The only attribute that get’s indexed by search engines for the IMG tag is the ALT attribute.

alternative text on various images

Image placeholders are filled with IMG’s alt attribute when images are disabled

The ALT attribute should also be keyword rich, not just a list of keywords. When writing you alternative text, try to think of how you would describe the image to a blind person in less than 25 words (150 chars or fewer). That sentence will be your ALT attribute.

Spacer images, 1px gifs or other images used just for programming or spacing purpose should still have an ALT attribute, but it should be empty, alt=”". All images that visually depict something important to visitors should have a descriptive, keyword rich alternative text.

Microsoft recommends: “Place relevant text near the beginning of the alt attribute to enable search engines to better correlate the keywords with the image. A copyright symbol or other copyright notice at the beginning of the alt attribute will indicate to the search engines that most search-relevant aspect of the image is the copyright, rather than what the image actually depicts. If you require a copyright notice, consider moving it to the end of the alt attribute text”. More recommendations for the ALT attribute from Microsoft can be found here.

Also, don’t repeat the same alt text with different images, especially images on the same page and try to use the same alternative text on images that appear multiple times throughout the site.

Advanced stuff: more and more websites started using a technique called CSS spriting to reduce the number of HTTP requests made to a server and thus improve page load times. While this is a great technique, the implementation makes impossible the usage of standard IMG elements with ALT attributes, which raises usability and SEO concerns. To address such issues please read this article.

Use the TITLE attribute

The TITLE attribute is not getting indexed by search engine bots and it will not improve your rankings, but that doesn’t mean you shouldn’t use it. The TITLE attribute is displayed as a tooltip on mouse hover in many browsers and can provide additional information to users.

screenshot of an image that displays a title attribute tooltip at mouse over

Title attributes are showing as tool tips on mouse over images

So, anywhere you have images which are appropriate to have alternative texts, you should add a TITLE attribute also. The TITLE shouldn’t be a copy of the ALT text, rather it should complement it. Keep the TITLE attribute below 25 words (150 chars) and don’t just list your keywords in it, create a meaningful sentence.

Our initial sample can now be improved to:

<img src=”0012adsds.gif” alt=”yellow t-shirt” title=”athletic women wearing a yellow tee shirt”/>

Don’t underestimate the TITLE attribute just because it doesn’t influence search engine rankings. Read this article’s further, at section on providing the right context to your images to understand more.

Specify the width and the height of the IMG tag

Let’s improve our example a bit, this time with some non SEO related attributes, for better browser rendering (page load speed) into:

<img src=”0012adsds.gif” alt=”yellow t-shirt on a model” title=”athletic women wearing a yellow tee shirt while running” height=”250″ weight=”100″/>

It is a best practice to define the IMG width and height on the tag or on the style for better page load speed.

html code highlighting the usage of height and width attributes in IMG tag

IMG tag complemented with HEIGHT and WIDTH attributes

Advanced stuff: for heavy, long vertical pages defer loading images until users scroll down and images are visibile in their browsers (search this on Google for more info)

Use keyword rich file names

You’ve probably noticed the unfriendly file name used in the previous examples: 0012adsds.gif. This type of names don’t help search engines understand the image at all and should be avoided.

various image properties one of which displays a proper image file name

Proper usage of image file naming

There’s really no information search engine bots could extract from that file name. Instead your file names should describe the image a bit. If appropriate, you could add your targeted keywords to the file name.

We can easily optimize our example to:

<img src=”yellow-t-shirt.gif” alt=”yellow t-shirt on a model” title=”athletic women wearing a yellow tee shirt while running” height=”250″ weight=”100″/>

For ecommerce sites, you should enforce some image naming rules, otherwise things will get messy pretty fast. For example, you can add an image ID to the file names, i.e. yellow-t-shirt–0012.gif. That is still much better than just 0012adsds.gif

If you’re not convinced about renaming your image files, Matt Cutts has a video where he discusses the importance of proper image file naming.

Advanced stuff: permanently redirect the old file name to the new ones, at server level (.htaccess).

Use relevant anchor texts to link to images

Wherever you link to an image (i.e. you link a larger size of the image) or you link to a standalone landing page for the image, use a relevant, descriptive and useful anchor text to point to that page/image.

For our example, if you have a dedicated landing page for the t-shirt page, the anchor text would be something similar to “Rate the new yellow t-shirt from {$manufacturer}”.

The above accomplishes two things: first, it provides useful information to visitors; second, it gives relevant, keyword rich data to search engine bots.

Provide good context for your images

Previously, I mentioned that the TITLE attribute is not going to improve your search engine rankings. The content of this attribute doesn’t get cached by search engines. However, this tag can provide context to search engines and that is important. Image captions or the texts surrounding the image do the same thing, provide context to search engines.

4 ipods followed by text description

The description below the images provide context to search engines

Here are some things that you can do to provide better context for your images:

- Make sure that the content around the image provide search engines relevant information about it

- The text above the image should be an introduction to the image

- Add a caption to the image if possible

- Try to add an image-related sentence just below the image, as close as possible to the image, both as text or html code. the best is to use image captions

Here’s how our IMG element can be improved even further by adding a caption:

<h6><img src=”yellow-t-shirt.gif” alt=”yellow t-shirt on a model” title=”athletic women wearing a yellow tee shirt while running” height=”250″ weight=”100″ />Adidas 2011 Summer Collection </br> Yellow T-Shirt<h6>

<h6> has been used here as a sample implementation technique for image captions, but your implementation might be different. What’s more important is to have relevant, related text very close to the image.

Create standalone landing pages for each image

The above recommendation may not apply for most websites nor for every images. For sites that sale stock images for example, it is recommended to create dedicated landing pages for each image.

landing page dedicated to a single image on pixmac.com

Clean, useful landing page dedicated to a single image. Source pixmac.com

Additionally, you can allow users to comment, share or rate each picture and encourage user generated content.

In case the same image appears on multiple pages, it is good to have unique captions on each page but keep the same alternative text for the image.

Create image site maps

You can edit your sitemap files to include information about your images.

xml source code highlighting image details section

XML sitemap file with supplemental image information

To submit your images into a sitemap read this article from Google. You will be able to specify information such as image caption, geo location, title attribute and license.

Add EXIF data to your images

This technique requires specialized software that can be used to edit images’ meta data. One can be found here.

While Google or other search engines haven’t confirmed if they use EXIF data or not, more and more photo shooting devices are adding data such as geo tagging, owner of the picture or orientation to the EXIF data. So, if a picture is telling search engines information about the location, orientation, and focus could they eventually guess what’s in the picture background? Not very far in the future, they will.

Editing meta data such as User Comment can be a good place to reinforce your image’s title or alt text (maybe with some small changes). Other meta data that can come useful are Artist, Copyright or Image Description.

screenshot of exif editing software

You can use EXIF editors to change images meta data

Google Picasa already uses EXIF data, so it might worth testing how modified images are behaving in search engines. Also, keep in mind that some image optimization software can remove “unnecessary” EXIF data to reduce the size of the file.

Group Similar Images into Folders

If possible and appropriate, all images which can be logically grouped around a similar theme should be grouped into folders.

browser address bar that contains a proper URL structure

The t-shirt image is located under the /t-shirt/ directory that contains similar images of various tees

The advantage of doing so is that you will be able to add another keyword to the image URL and provide clues to users too. Not to mention that Google and other search engines look at the URL structure:

In our example you can put the image under /t-shirts/ directory. Now the IMG element becomes:

<h6><img src=”/t-shirts/yellow-t-shirt.gif” alt=”yellow t-shirt on a model” title=”athletic women wearing a yellow tee shirt while running” height=”250″ weight=”100″ />Adidas 2011 Summer Collection </br> Yellow T-Shirt<h6>

Note: you should place your adult (or other sensitive images) into separated directories.

Use absolute paths rather than relative

While the referencing type doesn’t influence search engine rankings per se, it is recommended to use absolute paths to avoid problems with crawling, broken links and 404 errors.

As a good programming practice you should use configuration files where you define your website root and other frequently used directories. In your scripting files use config paths to reference other documents.

Adding the absolute path, our example transforms to:

<h6><img src=”http://www.domain.com/t-shirts/yellow-t-shirt.gif” alt=”yellow t-shirt on a model” title=”athletic women wearing a yellow tee shirt while running” height=”250″ weight=”100″ />Adidas 2011 Summer Collection </br> Yellow T-Shirt<h6>

Note: verify that URL paths aren’t blocked by robots.txt and/or other search engine bots blocking obstacles (see below).

Images accessible through plain HTML

Don’t put your slide shows, zooming or other fancy features in Flash or pure JavaScript implementation. When using Flash, always provide alternative images with static URLs in GIF, JPEG and/or PNG format otherwise Google won’t be able to crawl them easily and they might not get displayed in SERPs.

Google rewards high quality images rather than crappy ones so try to keep his res images crawlable with JavaScript disabled. Most search engines bots can’t execute JavaScript and if the only way to reach those images is with JavaScript enable, the image URLs will not be followed.

When creating sliders, your image URLs (and all the text content in general) should be accessible to search engines in plain HTML.

Note: try to place your big size images above the fold. A good rule to define “big” is to allocate 2/3 of the visible screen for the big image. Below there’s a very interesting video on how Google defines quality images:

Don’t Forget the Favicon

A particular case of images is the favicon.ico file. It’s the small icon present on your browser address bar or bookmarks and unfortunately, even if you don’t care about it, browsers are still requesting it. If you don’t have one, your web server will return a 404 code.

browser top screenshot with a favicon file in the address bar and browsertab

Favicon files are requested when browsers load a page

Place this file on your website root and make it cachable. Check this article on Yahoo! Developer for more information.

Overlay text on web buttons

One powerful SEO technique for improving your document relevancy (and page load speed) is the usage CSS text buttons. The principle is simple: create simple web call to action buttons with plain color fill, without any text embedded in the image, and then overlay the targeted keywords as plain text.

Here’s how an implementation looks like on Google Docs home page:

google docs screenshot showing the try google docs now button

The background of the button is an image, the text is plain HTML

The text “Try Google Docs Now” is actually plain HTML overlaid on the button (see how chars are selectable).

The opposite of this technique is what I call noise words reduction. You take “noise” text (which doesn’t contain your keywords) and embed it in images. For example, if you have an FDA warning at the bottom of the each page of your website, you could embed it into an image, so it’s not diluting your page theme with “unwanted text”:

Keep in mind that the noise words reduction is a technique used by spammers to pass email filters and it can be flagged as spam on web pages too. Use it at your own risk.

Include related images

Whenever appropriate, you should use related/similar images, such as thumbnails that link to the bigger version on the images (eventually image dedicated landing pages), crawlable CSS sliders, collapse and expand or other techniques you like.

See pixmac.com’s implementation:

pixmac screenshot depicting an stock image with related and similar pictures

The related and similar pictures will help search engines create relationships between images

They even have a dedicated landing page for related and similar pictures. That’s great food for search engine spiders.

If you’re linking to larger version of the thumbnail-ed image, here’s how the IMG element is going to change to:

<h6><a href=http://www.domain.com/t-shirts/yellow-t-shirt-big.gif><img src=”http://www.domain.com/t-shirts/yellow-t-shirt.gif” alt=”yellow t-shirt on a model” title=”athletic women wearing a yellow tee shirt while running” height=”250″ weight=”100″ />Adidas 2011 Summer Collection</br> Yellow T-Shirt</a><h6>

Add Snippets and Social Sharing

Provide a snippet for each large size image (2/3 of the screen size maybe) so others can use to copy and paste your images on their websites. This way you still get the attribution as original source for that image. Since you can control the alt text, which is the anchor text of an image, you will get more benefits if someone is simply hotlinking to your images.

Additionally, you can provide social sharing options, such as twitter, facebook likes or Google +1.

Take a look at how Flickr is integrating both, the snippet and the social sharing:

So, we’ve started with this:

<img src=”0012adsds.gif” />

And we’ve ended up with this optimized version:

<h6><a href=http://www.domain.com/t-shirts/yellow-t-shirt-big.gif><img src=”http://www.domain.com/t-shirts/yellow-t-shirt.gif” alt=”yellow t-shirt on a model” title=”athletic women wearing a yellow tee shirt while running” height=”250″ weight=”100″ />Adidas 2011 Summer Collection</br> Yellow T-Shirt</a><h6>

Now it’s time to go and optimize those images of yours! If I forgot something or if you have questions, let me know.

Pitstop Media offers ROI focused SEO services. If you need a SEO company to help you rank #1 please contact us for a free, no obligation quote. We’ve helped companies rank first on Google in short periods of time, for highly competitive terms.

VN:F [1.9.22_1171]
Rating: 8.4/10 (13 votes cast)
VN:F [1.9.22_1171]
Rating: +5 (from 5 votes)
Image SEO with IMG Tag, 8.4 out of 10 based on 13 ratings

About

Traian is Founder and Director of Search Marketing at Pitstop Media Inc. He has more than 11 years experience in helping small and medium businesses generate and convert organic traffic from search engines. Connect with Traian on Google+

 

14 Responses to “Image SEO with IMG Tag”

  1. Zoran said:

    Jun 03, 11 at 3:18 pm

    Thanks for the great article on image SEO. Would like to propose future article topic: How to Track Visits from Google Images in Google Analytics. This should be useful to all the webmasters or marketers (like myself) to track the results after implementing the above techniques. Thanks in advance!

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  2. TraiaN said:

    Jun 03, 11 at 4:03 pm

    here’s what you need to do. Create an advanced segment, with Referral Path as your first and only condition. Use the following value in the Value field of the Condition (matches regular expression):
    ^(/imgres|/images/view|/images/search)

    You’re all set. If you want to you can create a profile to track just Image referrals, using the same pattern for the referral values in Field A. You can output to Campaign Source variable with “Google Images” as name – no quotes.

    Cheers

    VN:F [1.9.22_1171]
    Rating: 4.7/5 (3 votes cast)
    VN:F [1.9.22_1171]
    Rating: +2 (from 2 votes)
  3. Jeff Bezal said:

    Sep 24, 12 at 11:58 am

    Awesome! This blog is going to change my views about alt text. its really helpful. Tons of thanks for writing such clear and simple blog.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  4. Marulu said:

    Oct 03, 12 at 8:32 pm

    Hi TraiaN,
    Thanks for your tips.
    I have a lot of images on my blog : http://get-free-crochet-patterns.blogspot.in/and I had put in keywords in image properties. I was getting about 250 uniques in a day on an average but now on most days I get less than 100. Google has recently introduced the automated tags (you don’t have to know HTML) in Blogger and from then on I seem to find my traffic dwindling… Is it that Google is no longer looking for the keywords in image properties and looking for the alt text. I have not modified my posts yet to put in the alt text.
    Look forward to your reply.
    Regards,

    Marulu.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  5. Traian Neacsu said:

    Oct 04, 12 at 9:59 am

    Marulu, I don’t have experience with Blogger, so I can’t help you with this. Thanks for reading the article and commenting here.

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  6. Marulu said:

    Oct 04, 12 at 8:17 pm

    Thanks for your quick reply, Traian. Guess I’ll just have to put in the alt tags when I have the time and check what it does for me. Also, it could be because I haven’t been posting to my blog for quite a few months now.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  7. Bane said:

    Nov 07, 12 at 6:03 pm

    OMG That was intense! I just learnt a LOT of things about SEO and images. haha. That was awesome. I just came here to figure out how to add ALT text to my HTML code. And now I’ve just picked up 100 other tips. Cheers mate

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
    VA:F [1.9.22_1171]
    Rating: +1 (from 1 vote)
  8. Making SEO Work by Motivating Your Readers - 1st Web Design said:

    Nov 17, 12 at 8:34 am

    [...] Of course, remember that photos can only do so much. Photos will only be effective if you use the right words along with them. Also remember to optimize you photos for search engines. [...]

  9. Ahsan said:

    Dec 11, 12 at 10:26 am

    but in blogger you can do very limited SEO of images. WP is better from Image SEO perspective.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  10. Ravi Adepu said:

    Dec 27, 12 at 10:18 pm

    Hello,
    How many characters can i use for a image file name Can I use my image file name home-temple-models-north-carolina.jpg
    is this too long please guide me

    Regards,
    Ravi.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  11. Traian Neacsu said:

    Dec 28, 12 at 10:47 am

    Ravi, a lot oc CMS create image file names similar to the one you list, and for most part, it should be ok. As a rule of thumb, do not stuff keywords in the file name and try to keep the number of dashes around 3.

    Technically there is no limit for the number of characters to be used in the file name, but I would keep URLs under 1024 chars, which is actually 50% of the maximum recommended by Microsoft for IE).

    VN:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  12. Ravi Adepu said:

    Jan 18, 13 at 3:55 am

    Dear Traian Neacsu

    Image name and alt attribute both should be same like
    image – pooja-mandir-hyderabad.jpg
    alt – pooja mandir hyderabad
    or both should be different which one is better for SEO

    Thank you

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  13. Traian Neacsu said:

    Jan 18, 13 at 2:15 pm

    Ideally they should be a bit different.

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  14. Larry said:

    Apr 05, 13 at 4:59 pm

    Wow, great article. So much detail and information. We are constantly enhancing and growing our understanding of SEO, web design and implementation for our clients.!

    There is much to learn about making our images for relevant and searchable!

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)