SEO - ALT tags vs Title tags - what are they for?

When should I use ALT and TITLE tags on my websites or blog websites?

Many people want to do SEO, Search Engine Optimization, but they don't put into practice some of the basic tasks that will often benefit greatly. Here is one of them. If you use images on a website and the images are related to the topic of the pages that they are on, you need to add both ALT and TITLE Tags to them, so that the search engines and people using text-based browsers know what they are for.

Alt tags show whatever text that is added to the HTML code when the image doesn't load whether it is corrupt, missing, or if the visitor has a text-based web browser. In Internet Explorer these tags will normally show up as hover text however this use is not covered by standards. When has Microsoft ever followed standards? On web browsers that follow standards, ALT tags correctly show only when an image does not.

It is important that any and all images that are related to your content contain ALT tags, otherwise a visitor will be very confused when an image does not load.

Title tags according to web standards and most web browsers are for hover or tool or tool tip text. The image loads and the text appears when the cursor is over the image. This is very useful for SEO because the search engines, like Google, know what your image is about and use the text like keywords which in the end can bring you more relevant traffic.

Title tags are also very useful because they allow you to add descriptions, or more description, to your images without taking up more space, so you see there is also an educational benefit to adding TITLE tags.

Examples of ALT and TITLE tags

Here are some examples of ALT and TITLE tags used for website images.

Notice Images 1 and 2 contain both ALT and TITLE Text so the information will be viewable on Text-browsers and the description will appear as hover or tool tip text. If you see "relevant ALT text" with your image then your web browser is not standards compliant.

Sample Image 1:

HTML CODE USED:

Sample Image 2:

HTML CODE USED:

Sample Image 3:

HTML CODE USED:

Notice how Image 3 (which doesn't exist) does not load and therefore the ALT text is displayed. Normally, the ALT tag would be the name of the image.