Difference between alt and title of img - which one to use - and impact

Question

For years I've been writing my HTML for images like this:

<img src="picture.jpg" alt="my picture" >

But I recently ran a audit of my site using Raven SEO tools and it reported loads of errors which I was really surprised with.

When I went through the report 99 % of these errors were because of missing image title text.

I know that the title text for an image can display a little pop over when you hover over an image, but apart from that what's the purpose and does it have an effect on SEO?

Also if you were to implement it, what would you put in there? Would you just put the same info that's in the alt attribute? i.e. alt="my picture" title="my picture"

Answer 1

ALT tag is an accessibility tag that was introduced for people who have sight difficulties even through Google use it to determine what an image is about you should never consider putting alt tags for SEO purposes before your visitors.

Many people and even Matt Cutts who works at Google talks about alt tags like they were specifically designed for Search Engines to inform bots what the image is about, this is simply not true.

However you can inform Google of what the image is about while looking after your audience, never just stuff keywords into the alt tag, it dampens user experience and its very unnatural.

A prime example of this is that often say someone wants to rank for a the keyword 'Bournemouth' they will have Bournemouth in the title, in the H1, meta description then make a image with the alt tag 'Bournemouth' While this will work for SEO its dampens the user experience and misses the whole point of the alt tag. The alt tag is for people who have sight issues or disable images all together. So the ALT tag was designed to inform the user what the image is about.

A good exmaple of this can been seen below

<img src="i.jpg" alt="Bournemouth" />

vs

<img src="i.jpg" alt="Birdseye view of Bournemouth" />

The above example still includes your keyword while explains to both Google and your Audience what the image is about.

So what about Title tag?

The title tag was designed to give more information when you hover over an element, its not very useful for IMG because if you intend to use the same information for ALT and TITLE then you can use a script to read the alt tag and make your very own hover overs using JS. I would only recommend the title tag if your going to provide more information than that of the ALT tag, like a longer description - no need to provide the exact information in both elements, as that just bloats the code.

The title tag comes really handy for links, since on hover over it can give your audience more information about the link they are about to click. It'll be worth you while to read more about the title tag here.

Answer 2

alt gives an alternative description of the image. This attribute is required for img.

title gives additional information about the image. This attribute is optional for img.

Never rely on information in title. If the information is really important, include it in its own element.

These two attributes should not have the same content.

Answer 3

Your confusion is normal and yes each tag (Title, ALT) represents it's own potential which helps search engine and user to know what the image is about.

Some time ALT text is not enough to describe the image so it's better assign more information as far as possible, use variation in assign words which is more effective from SEO point of view too.