alt and title attributes

[box] Link to this article http://wp.me/p364Xm-W[/box]

 

REASON FOR ALT AND TITLE

Search engines can not read an image, they only read words. On each site you place the image it may have a special category or subject that you wish the image to be found under. eg you add an abstract to three forums on three specialist sites about different things. On each site you would add the specialist word for the search engine to know that is an image about…………(?)

Or, you have a dog and you want the search engine to know its a dog of a certain breed.
Or a landscape needs a place name

etc

You add a descriptive (under 10 words) piece.

eg dog print for sale German Shepherd

The search engine then knows that is a dog, a print, a print for sale, and a german shepherd

It is up to you to change alt and title tags. No site does this for you. They may be different per site you are adding to, and they are only put in as you paste them to that site you are sharing on. You cannot save the changes here on your profile page

:Let’s use this image as an example

arts_mag_head

The code for this to paste into your HTML area would be <a href=”http://1stangel.co.uk/wp-content/uploads/2014/06/arts_mag_head.jpg”><img src=”http://1stangel.co.uk/wp-content/uploads/2014/06/arts_mag_head.jpg” alt=”text here”></a>

See it has an alt tag but not a title, so we will need to add one.  I also need us to add text

HOW TO USE

<a href=”http://1stangel.co.uk/wp-content/uploads/2014/06/arts_mag_head.jpg”><img src=”http://1stangel.co.uk/wp-content/uploads/2014/06/arts_mag_head.jpg” alt=”text here”></a>

Needs ALT and TITLE

The reason you use both is that some browsers see alt tags and some only see title tags.

The words should be 10 or under

So,

1.  get the code you will be using  (You could use our HTML generator)

2. Paste somewhere you want it, or to notepad

Which will look something like this

<a href=”http://1stangel.co.uk/wp-content/uploads/2014/06/arts_mag_head.jpg”><img src=”http://1stangel.co.uk/wp-content/uploads/2014/06/arts_mag_head.jpg”></a>

In it you can see

“></a>

On this image I changed it to

alt=”1stangel magazine header image” title=”1stangel magazine header image which I must add to the end of the link code

alt=”1stangel magazine header image” title=”1stangel magazine header image></a>

You would change 1stangel magazine header image to the keywords or short description you wanted on your image

The words must be 10 or under as search engines will ignore the others over 10

Your code now looks like this

<a href=”http://1stangel.co.uk/wp-content/uploads/2014/06/arts_mag_head.jpg”><img src=”http://1stangel.co.uk/wp-content/uploads/2014/06/arts_mag_head.jpg” alt=”1stangel magazine header image” title=”1stangel magazine header image></a>

which will give you

1stangel magazine header image

RECAP

alt and title tags are for other sites you share your work to
They are the description of that image for a blind person…….. ie search engines who cannot ‘see’ the image
You add them per site and can change them at whim
they are very important
You need both, alt AND title as some browsers read the alt and some read the title

Another side effect of this is, if the image goes offline for any reason, it will show the alt tag on the page instead of the image

Hope this helps

 

[box] We love feedback. Leave a message below in the comment if this helped you. [/box]

Comments