General Image question regarding search results

[theremotedr]

Here is a page for example.
http://www.theremotedoctor.co.uk/kar...llto=selection

On the page you will see various images with ALT tags which are shown in Google etc.
Fiat + Tel number + Keys & remotes etc

My question is,
When the customer makes a selection,in this case One button key remote, the photo of that item is then shown.
My part number of this item is FIAT 004
No ALT tags has been assigned to it so it will never be found in search results.
I mean as its pulled from a folder and not always on the page i see no way to add an ALT tag to it.

Or am i being thick ?

[Beverleyh]

I think you are mistaken about the purpose of alt attributes. They aren't for Google - although Google may use them - they are to provide a text equivalent description in case the image fails to load. They are used as an in-page accessibility aid. http://www.w3.org/QA/Tips/altAttribute

No ALT tags has been assigned to it so it will never be found in search results.

Not so. Google will pay attention to key words in the file names.

Bad - IMG0123.jpg
Good - spiced-biscotti-with-cranberries-and-white-chocolate.jpg

[theremotedr]

Oh dear.
I did know that but i also thought that was also the way for search engines to find them etc.
Now i have a big issue as my images etc are named like this. MAZDA001 HONDA015
These would never be found & i now know that they should be named like honda-accord-2-button-key
My problem now is that the site pulls & loads photos from MAZDA001 etc
Having to go though & sort everything is a huge task.

Do you have any help/advioce ?

[Beverleyh]

Not really other than to tackle it in stages.

The whole URL plays a part too though, so if, for example, your images are stored in a logical/descriptive folder structure, Google will takes cues from that;

'/keys/honda/accord/2-button/HONDA015.jpg' (all the better if HONDA015 is an industry recognised code/part number)

[theremotedr]

Hmmm
The MAZDA001 i mentioned above has a url as shown http://www.theremotedoctor.co.uk/kar...llto=selection
Having said that if i make another selection to say MAZDA007 the url is the same.

[Beverleyh]

Not sure what you mean.

I was referring to the URL of the image outside of the context of a web page - i.e. '/keys/honda/accord/2-button/HONDA015.jpg'

The filename and the URL, when containing keywords, all help Google to understand what the content of the file (image, pdf, etc.) is about in order to serve it in related results.

The link you provided isn't really a URL - more of a URI (a location anchor within a web page that is not really specific enough for Google to identify the image resource)

[Beverleyh]

For reference (and the benefit of others reading this thread) https://support.google.com/webmaster...r/114016?hl=en

[theremotedr]

Ive seen that and now thinking.
Take this page for example http://www.theremotedoctor.co.uk/kar...llto=selection
Item selection you will see One button key remote.
When you select it then the image is shown.
This image is named FIAT004.PNG and i think this is where my problem lies.
When people search Google etc my image would only realy be shown if people typed FIAT004.PNG
On the other hand if this image was called FIAT ONE BUTTON KEY.PNG there would be a very much higher chance it would be found & shown rather than FIAT004

The code which applied to the selection on the right called One button key remote is as follows.

<li><a href="javascript:" onclick="replaceMainImage('m-images/photos/FIAT004.png', 'Fiat004','<b>£35.00</b><br>Chip Will Require Programming<br>Key Will Require Cutting<br><scan class=keychipColor>+ Virgin Chip & Uncut Key</scan><br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><scan class=drColor>The Remote Doctor</scan>')">One button key remote</a></li>

Would it be best for me to just add some relevent text after the FIAt004 file name ?
Just trying to overcome this issue without messing up what is cuurrently a working site.

[styxlawyer]

Search engine robots do not click on menu buttons in any page, so will never see images loaded by JavaScript. However there's a trick you can use to overcome this.

The best way to ensure that Google and other search engines see the "alt" attributes of images is to pre-load them in an invisible part of the page. Put this code in at the start of your page and the search engines will find the "alt" attributes which they use to index images:

<div style="display:none;">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
</div>

[Beverleyh]

Search engine robots do not click on menu buttons in any page, so will never see images loaded by JavaScript. However there's a trick you can use to overcome this.

The best way to ensure that Google and other search engines see the "alt" attributes of images is to pre-load them in an invisible part of the page. Put this code in at the start of your page and the search engines will find the "alt" attributes which they use to index images:

<div style="display:none;">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
</div>

Hmmm, this isn't a great idea because it will have a negative impact on page performance - All the images will download in the background, even though they will not be seen.

Would it be best for me to just add some relevent text after the FIAt004 file name ?

Do you mean here?;

<li><a href="javascript:" onclick="replaceMainImage('m-images/photos/FIAT004.png', 'Fiat004','<b>£35.00</b><br>Chip Will Require Programming<br>Key Will Require Cutting<br><scan class=keychipColor>+ Virgin Chip & Uncut Key</scan><br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><scan class=drColor>The Remote Doctor</scan>')">One button key remote</a></li>

No, that wouldn't be the *best* thing you could do because Google wouldn't know how to associate the text with the image. In fact, Google wouldn't be able to tell from the markup that this is an image at all (its an anchor); <a href="javascript:" onclick="replaceMainImage('m-images/photos/FIAT004.png' ...

However, Google *can* tell that this is an image; <img src="m-images/photos/FIAT004.png" alt="Fiat Punto 3 Button Key Remote" /> Because it's programmed to recognise this img element as being an image.

The correct 'tool' for getting Google to associate text with an image is through the alt attribute and title attribute (to varying degrees) of an image tag. You can also use HTML5 captions.

I think the best thing you can do in your case, with the least disruption to your page and keeping the JavaScript functionality as is it, is to rename the files as previously discussed.

However, to do the job *properly* you might want to consider building the web pages over using the correct semantic markup. i.e. figure, img, figcaption, alt attribute and title attribute.